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

この記事には：ファイルの設定をする HTMLファイルを記述する HTMLファイルを確認する HTMLコードを理解する CSSコードを理解する

ウェブページに画像を追加したい場合は、必要なのはHTMLのみです。一方で、ウェブページに画像を背景として設定したい場合は、HTMLとCSSが必要です。HTMLとは、ハイパーテキスト・マークアップ言語を意味しており、ウェブブラウザに対して、表示する内容を伝えるためのコードです。^[1] CSSは、カスケーディングスタイルシートの略称で、ウェブページの外観やレイアウトを変えるために用いられます。^[2] この方法を実践するには、ウェブページの背景に設定するための画像が必要です。

パート 1
ファイルの設定をする

1
HTMLファイルと背景画像を保存するフォルダを作成する　パソコンにフォルダを作成して、後で見つけやすい名前を付けましょう。
- 好きな名前を付けることができますが、HTMLで作業を行うときは、短いひとつの単語をファイルやフォルダ名として付けることを習慣にするとよいでしょう。
2
背景画像をHTMLフォルダに保存する　背景に設定したい画像をHTMLフォルダに保存します。
- 古い端末や接続速度の遅いルーターを利用していてウェブサイトの軽快な動作を確保できない環境でも、あまり気にならなければ、高解像度の画像を用いるのがよいでしょう。また、容量の軽い繰り返し模様の画像を背景に設定するのも、その上に表示される文字を読みやすいため、良い選択と言えます。
- 手元に画像が無い場合は、無料の背景画像をダウンロードできます。画像をダウンロードしたら、作成したHTMLフォルダに保存しましょう。
3
HTMLファイルを作成する　テキストエディタを開いて、ファイルを新規作成します。「index.html」という名前でファイルを保存しましょう。
- Windowsのメモ帳やMac OS Xのテキストエディットなどの元からパソコンに入っているテキストエディタでも、他のテキストエディタを利用しても構いません。
- HTMLで作業することを想定したテキストエディタを利用したい場合は、こちらをクリックして、Atom（Windows、 Mac OS X、Linux上で動作するテキストエディタ）をダウンロードしましょう。
- テキストエディットを利用する場合は、「フォーマット」をクリックして、「標準テキストにする」を選択してから、HTMLファイルの記述を始めましょう。この設定をすることで、HTMLファイルが、ウェブブラウザで間違いなく正常に読み込まれるようになります。
- Microsoft Word などのワードプロセッサーをHTMLの記述に利用すると、目に見えない文字や書式が追加されるため、HTMLファイルが破損され、ウェブブラウザで正しく表示されなくなる可能性があります。ワードプロセッサーはHTMLの記述に用いない方がよいでしょう。

パート 2
HTMLファイルを記述する

1
標準的なHTMLコードをコピー＆ペーストする　以下のコードをコピーして、開いている「index.html」ファイルに貼り付けましょう。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { background-image: url(" "); } </style> </head> <body> </body> </html>
2

背景画像のURLを追加する　「index.html」ファイルの中で、「background-image: url(" ");」という行を探します。括弧内にカーソルを移動して、背景画像のファイル名を入力します。画像ファイルの拡張子も忘れずに入力しましょう。
入力を終えると、次のようになるはずです。
background-image: url("background.png");

ファイルパスやURLを付けずにファイル名を入力すると、ブラウザは、ウェブページのフォルダ内でそのファイル名の画像を探します。画像ファイルがファイルシステム内の別の場所にある場合は、そのファイル名にフルパスを付けなければなりません。^[3]
3

HTMLファイルを保存する

パート 3
HTMLファイルを確認する

1
ウェブブラウザでHTMLファイルを開く　「index.html」ファイルを右クリックして、任意のウェブブラウザで開きます。
- ブラウザを開いても画像が表示されない場合は、「index.html」内の画像ファイル名が正しく入力されているかを、テキストエディタで確認しましょう。
- ブラウザを開いたときに、背景画像ではなくHTMLコードが表示される場合は、「index.html」ファイルがリッチテキストとして保存されています。別のテキストエディタで、HTMLファイルを編集してみる必要があるかもしれません。
2

HTMLファイルを編集する　テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。

パート 4
HTMLコードを理解する

1

HTMLとCSSのタグを理解する　HTMLコードは、開始タグと終了タグで構成されます。<body>タグは開始bodyタグで、</body>は終了bodyタグです。ページを正常に表示するには、HTMLページ上の全ての開始タグを、対応する終了タグで閉じなければなりません。
2

DOCTYPEを理解する　よくできたHTMLページは、全て<!DOCTYPE html>で始まります。このタグは、ファイルがHTMLで記述されていることを、ウェブブラウザに知らせる役割を果たします。
3

HTMLファイルを編集する　テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。
4

HTMLとCSSのタグを理解する　HTMLコードは、開始タグと終了タグで構成されます。<body>タグは開始bodyタグで、</body>は終了bodyタグです。HTMLページ上の全ての開始タグは、ページが正常に表示されるために、対応する終了タグで閉じなければなりません。
5

titleタグを理解する　<title>タグは、ブラウザ画面のタイトルバー、およびブラウザのタブに表示される文字列です。
6

styleタグを理解する　<style>タグは、中身がCSSであることを示します。<style>タグの中に入っているものは全てCSSコードです。
7

bodyを理解する　<body>タグ内に書かれた文字列は、HTMLやCSSコードでない限りは、全て表示されます。
8

HTMLファイルを編集する　テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。

パート 5
CSSコードを理解する

1

CSSコードを理解する　「index.html」ファイルの<style>タグ内に記述されるCSSコードは、ウェブページが表示されるときに、背景画像を指定の名前で<body>タグに追加するように、ウェブブラウザに伝える役割を果たします。
2
CSSコードを確認する　
body { background-image: url("background.png"); }
3

CSSの構成要素を理解する　CSSのスタイルは、セレクタと宣言と呼ばれる２つの部分から構成されます。^[4]
例えば上図で、「body」はセレクタで、
「background-image: url("background.png")」は宣言です。

HTMLタグは、全てセレクタです。

宣言は、常に波括弧で囲まれます。
4

CSSの宣言を理解する　CSSの宣言は、プロパティと値と呼ばれる２つの部分から構成されます。上図の波括弧内では、
「background-image」がプロパティで、「url("background.png")」が値です。^[5]
プロパティは、スタイルを設定する対象を表し、値はプロパティに対してどのようなスタイルを適用するのかを表します。

プロパティと値は、必ず:（コロン）で分離されます。

CSSの宣言は、必ず;（セミコロン）で終了します。