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

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

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

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

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

  1. 2627945 4 1というタイトルの画像
    1
    標準的なHTMLコードをコピー＆ペーストする　以下のコードをコピーして、開いている「index.html」ファイルに貼り付けましょう。 
      <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
body {
	background-image: url(" ");
       background-repeat:no-repeat;
       background-size:cover;
} 

</style>

</head>

<body>

</body>
</html>
  2. 2627945 5 1というタイトルの画像
    2
    背景画像のURLを追加する　「index.html」ファイルの中で、「background-image: url(" ");」という行を探します。括弧内にカーソルを移動して、背景画像のファイル名を入力します。画像ファイルの拡張子も忘れずに入力しましょう。
    • 入力を終えると、次のようになるはずです。
      background-image: url("background.png");
    • ファイルパスやURLを付けずにファイル名を入力すると、ブラウザは、ウェブページのフォルダ内でそのファイル名の画像を探します。画像ファイルがファイルシステム内の別の場所にある場合は、そのファイル名にフルパスを付けなければなりません。[3]
  3. 2627945 6 1というタイトルの画像
    3
    HTMLファイルを保存する
    広告

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

  1. 2627945 7 1というタイトルの画像
    1
    ウェブブラウザでHTMLファイルを開く　「index.html」ファイルを右クリックして、任意のウェブブラウザで開きます。
    • ブラウザを開いても画像が表示されない場合は、「index.html」内の画像ファイル名が正しく入力されているかを、テキストエディタで確認しましょう。
    • ブラウザを開いたときに、背景画像ではなくHTMLコードが表示される場合は、「index.html」ファイルがリッチテキストとして保存されています。別のテキストエディタで、HTMLファイルを編集してみる必要があるかもしれません。
  2. 2627945 8 1というタイトルの画像
    2
    HTMLファイルを編集する　テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。
    広告

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

  1. 2627945 9 1というタイトルの画像
    1
    HTMLとCSSのタグを理解する　HTMLコードは、開始タグと終了タグで構成されます。<body>タグは開始bodyタグで、</body>は終了bodyタグです。ページを正常に表示するには、HTMLページ上の全ての開始タグを、対応する終了タグで閉じなければなりません。
  2. 2627945 10 1というタイトルの画像
    2
    DOCTYPEを理解する　よくできたHTMLページは、全て<!DOCTYPE html>で始まります。このタグは、ファイルがHTMLで記述されていることを、ウェブブラウザに知らせる役割を果たします。
  3. 2627945 11 1というタイトルの画像
    3
    HTMLファイルを編集する　テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。
  4. 2627945 12 1というタイトルの画像
    4
    HTMLとCSSのタグを理解する　HTMLコードは、開始タグと終了タグで構成されます。<body>タグは開始bodyタグで、</body>は終了bodyタグです。HTMLページ上の全ての開始タグは、ページが正常に表示されるために、対応する終了タグで閉じなければなりません。
  5. 2627945 13 1というタイトルの画像
    5
    titleタグを理解する　<title>タグは、ブラウザ画面のタイトルバー、およびブラウザのタブに表示される文字列です。
  6. 2627945 14 1というタイトルの画像
    6
    styleタグを理解する　<style>タグは、中身がCSSであることを示します。<style>タグの中に入っているものは全てCSSコードです。
  7. 2627945 15 1というタイトルの画像
    7
    bodyを理解する　<body>タグ内に書かれた文字列は、HTMLやCSSコードでない限りは、全て表示されます。
  8. 2627945 16 1というタイトルの画像
    8
    HTMLファイルを編集する　テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。
    広告

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

  1. 2627945 17 1というタイトルの画像
    1
    CSSコードを理解する　「index.html」ファイルの<style>タグ内に記述されるCSSコードは、ウェブページが表示されるときに、背景画像を指定の名前で<body>タグに追加するように、ウェブブラウザに伝える役割を果たします。
  2. 2627945 18 1というタイトルの画像
    2
    CSSコードを確認する　 
      body {
	background-image: url("background.png");
}
  3. 2627945 19 1というタイトルの画像
    3
    CSSの構成要素を理解する　CSSのスタイルは、セレクタと宣言と呼ばれる２つの部分から構成されます。[4]
    • 例えば上図で、「body」はセレクタで、
      「background-image: url("background.png")」は宣言です。
    • HTMLタグは、全てセレクタです。
    • 宣言は、常に波括弧で囲まれます。
  4. 2627945 20というタイトルの画像
    4
    CSSの宣言を理解する　CSSの宣言は、プロパティと値と呼ばれる２つの部分から構成されます。上図の波括弧内では、
    「background-image」がプロパティで、「url("background.png")」が値です。[5]
    • プロパティは、スタイルを設定する対象を表し、値はプロパティに対してどのようなスタイルを適用するのかを表します。
    • プロパティと値は、必ず:（コロン）で 分離されます。
    • CSSの宣言は、必ず;（セミコロン）で終了します。
    広告

関連記事

USBメモリーに音楽を入れる

How to

USBメモリーに音楽を入れる
特定のウェブサイトにアクセスできない問題を解決する

How to

特定のウェブサイトにアクセスできない問題を解決する
HPでスクリーンショットを撮る

How to

HPでスクリーンショットを撮る
ファンクションキーを解除する

How to

ファンクションキーを解除する
ノートパソコンのカメラで写真を撮る

How to

ノートパソコンのカメラで写真を撮る
パソコンにヘッドセットを接続する

How to

パソコンにヘッドセットを接続する
Windows PCでコマンドプロンプトからexeを実行する

How to

Windows PCでコマンドプロンプトからexeを実行する
Chromeでタブを切り替える

How to

Chromeでタブを切り替える
CapsLockを解除する

How to

CapsLockを解除する
大容量の動画ファイルをメールで送る

How to

大容量の動画ファイルをメールで送る
Webページの画像を一括保存する

How to

Webページの画像を一括保存する
パソコンのRAMを確認する

How to

パソコンのRAMを確認する
パソコンにBluetoothが搭載されているかを確認する

How to

パソコンにBluetoothが搭載されているかを確認する
ゼロになったノートパソコンのバッテリーを復活させる

How to

ゼロになったノートパソコンのバッテリーを復活させる
広告

出典

  1. ↑ http://www.w3schools.com/html/html_intro.asp
  2. ↑ http://www.w3schools.com/css/css_intro.asp
  3. ↑ http://www.w3schools.com/html/html_images.asp
  4. ↑ http://www.w3schools.com/css/css_syntax.asp
  5. ↑ http://www.w3schools.com/css/css_background.asp

このwikiHow記事について

wikiHow編集チーム
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。 この記事は10,747回アクセスされました。
カテゴリ: コンピューター | パソコン・電子機器
他言語版
このページは 10,747 回アクセスされました。

この記事は役に立ちましたか？

広告