X
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。
wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
この記事は10,747回アクセスされました。
ウェブページに画像を追加したい場合は、必要なのはHTMLのみです。一方で、ウェブページに画像を背景として設定したい場合は、HTMLとCSSが必要です。HTMLとは、ハイパーテキスト・マークアップ言語を意味しており、ウェブブラウザに対して、表示する内容を伝えるためのコードです。[1] CSSは、カスケーディングスタイルシートの略称で、ウェブページの外観やレイアウトを変えるために用いられます。[2] この方法を実践するには、ウェブページの背景に設定するための画像が必要です。
ステップ
パート 1 の 5:
ファイルの設定をする
パート 1 の 5:
-
1HTMLファイルと背景画像を保存するフォルダを作成する パソコンにフォルダを作成して、後で見つけやすい名前を付けましょう。
- 好きな名前を付けることができますが、HTMLで作業を行うときは、短いひとつの単語をファイルやフォルダ名として付けることを習慣にするとよいでしょう。
-
2背景画像をHTMLフォルダに保存する 背景に設定したい画像をHTMLフォルダに保存します。
- 古い端末や接続速度の遅いルーターを利用していてウェブサイトの軽快な動作を確保できない環境でも、あまり気にならなければ、高解像度の画像を用いるのがよいでしょう。また、容量の軽い繰り返し模様の画像を背景に設定するのも、その上に表示される文字を読みやすいため、良い選択と言えます。
- 手元に画像が無い場合は、無料の背景画像をダウンロードできます。画像をダウンロードしたら、作成したHTMLフォルダに保存しましょう。
-
3HTMLファイルを作成する テキストエディタを開いて、ファイルを新規作成します。「index.html」という名前でファイルを保存しましょう。
- Windowsのメモ帳やMac OS Xのテキストエディットなどの元からパソコンに入っているテキストエディタでも、他のテキストエディタを利用しても構いません。
- HTMLで作業することを想定したテキストエディタを利用したい場合は、 こちらをクリック して、Atom(Windows、 Mac OS X、Linux上で動作するテキストエディタ)をダウンロードしましょう。
- テキストエディットを利用する場合は、「フォーマット」をクリックして、「標準テキストにする」を選択してから、HTMLファイルの記述を始めましょう。この設定をすることで、HTMLファイルが、ウェブブラウザで間違いなく正常に読み込まれるようになります。
- Microsoft Word などのワードプロセッサーをHTMLの記述に利用すると、目に見えない文字や書式が追加されるため、HTMLファイルが破損され、ウェブブラウザで正しく表示されなくなる可能性があります。ワードプロセッサーはHTMLの記述に用いない方がよいでしょう。
広告
パート 2 の 5:
HTMLファイルを記述する
パート 2 の 5:
-
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背景画像のURLを追加する 「index.html」ファイルの中で、「background-image: url(" ");」という行を探します。括弧内にカーソルを移動して、背景画像のファイル名を入力します。画像ファイルの拡張子も忘れずに入力しましょう。
- 入力を終えると、次のようになるはずです。
background-image: url("background.png"); - ファイルパスやURLを付けずにファイル名を入力すると、ブラウザは、ウェブページのフォルダ内でそのファイル名の画像を探します。画像ファイルがファイルシステム内の別の場所にある場合は、そのファイル名にフルパスを付けなければなりません。[3]
- 入力を終えると、次のようになるはずです。
-
3HTMLファイルを保存する広告
パート 3 の 5:
HTMLファイルを確認する
パート 3 の 5:
-
1ウェブブラウザでHTMLファイルを開く 「index.html」ファイルを右クリックして、任意のウェブブラウザで開きます。
- ブラウザを開いても画像が表示されない場合は、「index.html」内の画像ファイル名が正しく入力されているかを、テキストエディタで確認しましょう。
- ブラウザを開いたときに、背景画像ではなくHTMLコードが表示される場合は、「index.html」ファイルがリッチテキストとして保存されています。別のテキストエディタで、HTMLファイルを編集してみる必要があるかもしれません。
-
2HTMLファイルを編集する テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。広告
パート 4 の 5:
HTMLコードを理解する
パート 4 の 5:
-
1HTMLとCSSのタグを理解する HTMLコードは、開始タグと終了タグで構成されます。<body>タグは開始bodyタグで、</body>は終了bodyタグです。ページを正常に表示するには、HTMLページ上の全ての開始タグを、対応する終了タグで閉じなければなりません。
-
2DOCTYPEを理解する よくできたHTMLページは、全て<!DOCTYPE html>で始まります。このタグは、ファイルがHTMLで記述されていることを、ウェブブラウザに知らせる役割を果たします。
-
3HTMLファイルを編集する テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。
-
4HTMLとCSSのタグを理解する HTMLコードは、開始タグと終了タグで構成されます。<body>タグは開始bodyタグで、</body>は終了bodyタグです。HTMLページ上の全ての開始タグは、ページが正常に表示されるために、対応する終了タグで閉じなければなりません。
-
5titleタグを理解する <title>タグは、ブラウザ画面のタイトルバー、およびブラウザのタブに表示される文字列です。
-
6styleタグを理解する <style>タグは、中身がCSSであることを示します。<style>タグの中に入っているものは全てCSSコードです。
-
7bodyを理解する <body>タグ内に書かれた文字列は、HTMLやCSSコードでない限りは、全て表示されます。
-
8HTMLファイルを編集する テキストエディタの画面で、<body></body>タグの間にカーソルを移動して、「Hello world!」と入力しましょう。ブラウザを再読み込みして、この文字が背景画像の上に表示されることを確認しましょう。広告
パート 5 の 5:
CSSコードを理解する
パート 5 の 5:
-
1CSSコードを理解する 「index.html」ファイルの<style>タグ内に記述されるCSSコードは、ウェブページが表示されるときに、背景画像を指定の名前で<body>タグに追加するように、ウェブブラウザに伝える役割を果たします。
-
2CSSコードを確認する
body { background-image: url("background.png"); }
-
3CSSの構成要素を理解する CSSのスタイルは、セレクタと宣言と呼ばれる2つの部分から構成されます。[4]
- 例えば上図で、「body」はセレクタで、
「background-image: url("background.png")」は宣言です。 - HTMLタグは、全てセレクタです。
- 宣言は、常に波括弧で囲まれます。
- 例えば上図で、「body」はセレクタで、
-
4CSSの宣言を理解する CSSの宣言は、プロパティと値と呼ばれる2つの部分から構成されます。上図の波括弧内では、
「background-image」がプロパティで、「url("background.png")」が値です。[5]- プロパティは、スタイルを設定する対象を表し、値はプロパティに対してどのようなスタイルを適用するのかを表します。
- プロパティと値は、必ず:(コロン)で 分離されます。
- CSSの宣言は、必ず;(セミコロン)で終了します。
広告
出典
このwikiHow記事について
他言語版
English:Set a Background Image in HTML
Português:Definir um Plano de Fundo em HTML
Bahasa Indonesia:Mengatur Gambar Latar di HTML
Nederlands:Een achtergrondafbeelding toevoegen aan HTML
한국어:HTML 배경화면 지정하는 법
Tiếng Việt:Thiết lập hình nền trong HTML
中文:设置HTML背景图片
このページは 10,747 回アクセスされました。
この記事は役に立ちましたか?
広告