cssで背景画像を設定する方法

cssはWebページをスタイリングするための強力なツールです。背景画像の配置方法を学ぶことで、cssの基本について多くを学ぶことができます......。

ウェブサイトを作ることは、自分を表現するのに最適な方法です。多くの****ツールがありますが、自分で書くことは、Webサイトの裏側の仕組みについてより深く知ることができる楽しい方法です。初心者向けのプロジェクトとしては、ウェブサイトを作成し、CSSで背景画像を追加するのがよいでしょう。このプロジェクトでは、HTMLとCSSを使いこなすことができます。

css形式は何ですか？

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。マークアップ言語のスタイルを設定することができるプログラミング言語である。このマークアップ言語のひとつがHTML（Hypertext Markup Language）で、Webサイトの作成に使われている。HTMLでもウェブサイトのスタイルをある程度制御することはできますが、CSSの方がより制御しやすく、デザインの選択肢も豊富です。

htmlで基本的なホームページを作成する

CSSは単なるスタイル言語なので、これを使うにはまずいくつかのスタイルが必要です。CSSで遊び始めるには、とても基本的なWebサイトで十分です。このページには、"Hello World "と書いてあります。

<html> <head> </head> <body> Hello World </body></html>

HTMLに慣れていない方のために、すべての要素がどのような働きをするのか、簡単におさらいしておきましょう。前述したように、HTMLはマークアップ言語であり、タグを使ってテキストをマークアップするものである。単語を<gt;で囲むと、それがマークアップになります。マークアップには、セクションの開始を示す < > と、セクションの終了を示す < /> の2種類があります。セクション内のテキストも、この区別を見やすくするためのものです。

htmlタグは、どの要素がサイトの一部であるかを示しています。headタグは、ページには表示されないが、ページを作成するために必要なヘッダーに関する情報を含んでいます。表示される要素はすべてbodyタグの間にある。表示される要素はpタグ1つだけです。これは、ウェブブラウザにテキストが段落であることを伝えるものです。

関連：10分で学べる簡単なCSSのコード例10選

htmlにcssを追加する

これで、CSSでスタイルをカスタマイズできるシンプルなページができました。このページは非常にシンプルで、どうすることもできませんが、まずは段落を少し目立たせて、ボーダーを追加して背景と区別できるようにしましょう。

<html> <head> </head> <body> Hello World </body></html>

これで、段落が黒い枠で囲まれるようになりました。CSSのスタイル記述を段落のマークアップに追加すると、段落のスタイルを設定する方法がサイトに表示されます。さらに記述を追加することも可能です。段落の周りに空白またはパディングを追加し、テキストを中央に配置しましょう。

<html> <head> </head> <body> Hello World </body></html>

しかし、段落タグの中に記述することで、HTMLが分かりづらくなっています。この情報を見出しに移動させればいいのです。私たちの見出しは、正しいサイトを表示するために必要な情報のためのものです。

<html> <head> <style> p { text-align: center } #ourParagraph { border-style: solid; padding: 30px; } </style> </head> <body> Hello World </body></html>

HTMLがより見やすくなりました。スタイルタグは、ウェブブラウザにスタイル情報を伝え、また、どのようなスタイルを設定するかを指示します。この例では、2つの異なる方法を用いて、どのようなスタイルを使用するかを指示しています。スタイルタグのpは、ウェブブラウザがそのスタイルをすべての段落タグに適用することを指示します。ourParagraph セクションは、ourParagraph ID を持つ要素にのみスタイルを設定するよう指示します。なお、idの情報は本文中のpタグに追加されています。

cssファイルのウェブサイトへの取り込み

見出しにスタイル情報を付加することで、コードを読みやすくすることができます。しかし、多くの異なるページを同じようにデザインしたい場合、各ページの上部にテキストを追加する必要があります。これは大した作業ではないように思えるかもしれません。何しろコピーして通せばいいのですから。しかし、後で要素を変更したくなった場合、多くの作業が発生します。

その代わり、CSS情報を別のファイルに保存し、そのファイルをインポートしてページスタイルを設定することになります。スタイルタグの間の情報をコピーして、私たちのcssfile.cssにある新しいCSSファイルに貼り付けてください。

p { text-align: center}#ourParagraph { border-style: solid; padding: 30px;}

そして、そのファイルをHTMLファイルに取り込みます。

<html> <head> <link rel="stylesheet" href="ourCSSfile.css"> </head> <body> Hello World </body></html>

cssによる背景画像の追加

HTMLとCSSの基礎ができたので、背景画像を追加するのは簡単でしょう。まず、どの要素に背景画像を割り当てるかを決めます。この例では、ページ全体に背景を追加することになります。つまり、本体のスタイルを変更するのです。bodyタグは、目に見えるすべての要素を含むことを忘れないでください。

body{ background-image: url("sky.jpg");}p { text-align: center}#ourParagraph { border-style: solid; padding: 30px;}

CSSでボディスタイルを変更するには、まずbodyキーワードを使用します。次に、先ほどと同じように花かっこ{}を付けます。本体のスタイル情報は、すべて括弧の中に入れてください。今回変更したいのは、背景画像です。全部を暗記しようとは思わないでください。CSSプロパティメモリストに記憶させたいプロパティを追加します。

関連：誰でも簡単に追加できるクールなHTMLエフェクト8選

属性の後に、コロンで属性の変更方法を示す。画像を取り込むには、url()を使用します。画像を指し示すためのリンクを使用していることを示します。ファイルの場所は、反転したカンマの間に括弧で囲んでください。最後に、セミコロンで行を終えます。CSSでは空白は意味がありませんが、インデントを使用するとCSSが読みやすくなります。

私たちの例を以下に示します。

画像の大きさによって表示がおかしくなる場合は、直接画像を変更することができます。しかし、CSSには背景を変更することができる背景スタイルのプロパティがあります。背景より小さい画像は、自動的に背景で繰り返されます。このオプションをオフにするには、要素に background repeat:no repeat; を追加します。

その他に、画像を背景全体にかぶせる方法が2つあります。まず、背景サイズを画面サイズに合わせるbackground size:100%100%;がありますが、これだと画像が引き伸ばされてしまい、歪みすぎる可能性があります。画像の縮尺を変えたくない場合は、「背景サイズ」を「オーバーレイ」に設定することも可能です。Coverは、背景画像を覆いますが、画像を歪ませることはありません。

背景色の変更

最後にもうひとつ、変えてみましょう。今は背景があるので、段落が読みにくいです。背景を白にしよう。流れは似ています。変更したい要素は "ourParagraph "です。は、"ourParagraph "がid名であることを示す。次に、背景色のプロパティを白に設定したいと思います。

body{ background-image: url("sky.jpg");}p { text-align: center}#ourParagraph { background-color: white; border-style: solid; padding: 30px;}

ずっといい。

引き続き、cssでWebサイトをデザインする

さまざまなHTML要素のスタイルを変更する方法がわかったので、簡単すぎる!スタイル属性を変更する基本的な方法は同じです。変更する要素を特定し、属性の変更方法を記述する。より深く知るためには、さまざまな属性を使い分けるのが一番です。次に、自分で文字の色を変えることに挑戦します。

2021-03-29 12:38 に公開
閲覧 ( 28 )
分類：プログラミング