HTML背景画像の設定方法

Web ページに画像を追加する場合は、HTML を使用します。ただし、画像を Web ページの背景画像として設定する場合は、HTML と CSS の両方が必要です。 HTML の正式名称は「ハイパーテキストマークアップ言語」で、Web ページに表示するコンテンツをブラウザに指示するために使用されるコードです。 ^{[1] X研究ソース}CSS の正式名称は「カスケーディングスタイルシート」で、Web ページの外観とレイアウトを変更するために使用されます。 ^{[2] X研究ソース}Web ページの背景画像も必要になります。

パート1 パート1/5:

新しいドキュメントを作成する

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/2627945-1-1.jpg\/v4-460px-2627945-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/2627945-1-1.jpg\/v4-728px-2627945-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 HTML ファイルと背景画像を保存するフォルダーを作成します。後で見つけやすくするために、コンピューター上にフォルダーを作成して名前を付けます。
- フォルダーには好きな名前を付けることができますが、HTML で作業する場合は、ファイルとフォルダーに短い 1 単語の名前を使用する習慣をつけることをお勧めします。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-460px-2627945-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-728px-2627945-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2背景画像を HTML フォルダーに配置します。背景として使用したい画像を HTML フォルダーに配置します。
- インターネット接続が遅い古いデバイスでも Web ページがスムーズに動作しても問題ない場合は、高解像度の画像を背景として使用できます。また、繰り返しパターンのあるシンプルな画像を背景に選択すると、その画像に対してテキストが読みやすくなるのでおすすめです。
- 画像がない場合は、無料の背景画像をダウンロードできます。画像をダウンロードし、作成した HTML フォルダーに配置します。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-460px-2627945-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-728px-2627945-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 HTML ファイルを作成します。テキストエディタを開き、新しいファイルを作成します。ファイルをindex.htmlとして保存します。
- Windows のメモ帳や Mac OS X のテキストエディターなどのネイティブテキストエディターを含め、任意のテキストエディターを使用できます。
- HTML を扱えるテキストエディターを使用する場合は、ここをクリックして、Windows、Mac OS X、Linux オペレーティングシステムで使用できるテキストエディター Atom をダウンロードしてください。
- Mac でテキストエディターを使用している場合は、HTML ドキュメントの作成を開始する前に、[フォーマット] メニューをクリックし、[プレーンテキストの作成] をクリックします。この設定により、HTML ファイルが Web ブラウザに適切に読み込まれるようになります。
- Microsoft Word などのワードプロセッサプログラムは、HTML ファイルを破損させ、Web ブラウザで正しく表示されなくなる可能性のある非表示の文字や書式を追加するため、HTML の作成には適していません。
広告する

パート2 パート2/5:

HTMLファイルの記述

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-460px-2627945-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-728px-2627945-4-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1標準の HTML コードをコピーして貼り付けます。以下の HTML コードを選択してコピーし、開いた index.html ファイルに貼り付けます。
```
 <!DOCTYPE html>
<html>
<ヘッド>
< title >ページタイトル</ title >

<スタイル>
体{
	背景画像: url ( " " );
} 

</スタイル>

</ヘッド>

<本文>

</本文>
</html>
```
2背景画像のアドレスを追加します。 index.html ファイルで「background-image: url(" ");」という行を見つけ、カーソルを括弧内に移動し、背景画像のファイル名を入力します。背景画像のファイル拡張子を必ず含めてください。広告する

背景画像: url("background.png");

^{[3] X研究ソース}

HTML ファイルを保存します。

パート3 パート3/5:

HTML ファイルを表示

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/72\/2627945-7-1.jpg\/v4-460px-2627945-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/72\/2627945-7-1.jpg\/v4-728px-2627945-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 Web ブラウザーで HTML ファイルを開きます。 index.html ファイルを右クリックし、任意の Web ブラウザーで開きます。
- ブラウザを開いたときに画像が表示されない場合は、index.html ファイルのテキストエディターウィンドウで画像ファイル名が正しく入力されていることを確認してください。
- ブラウザで開いたときに背景画像ではなく HTML コードが表示される場合は、index.html ファイルがリッチテキストドキュメントとして保存されているためです。 HTML ファイルを編集するには、テキストエディターを使用するのが最適です。
2 HTML ファイルを編集します。テキストエディターウィンドウで、カーソルを <body> </body> タグの間に移動して、「Hello world!」と入力します。ブラウザウィンドウを再読み込みすると、背景画像の上にテキストが表示されます。広告する

パート4 パート4/5:

HTMLコードを理解する

1 HTML および CSS タグを理解します。 HTML コードは開始タグと終了タグで構成されます。 <body> は本文の開始タグであり、</body> は本文の終了タグです。ページを正しく表示するには、HTML ページのすべての開始タグに終了タグが必要です。
2 DOCTYPE タグを理解します。適切に記述された HTML ページはすべて <!DOCTYPE html> で始まる必要があります。このタグは、ファイルが HTML ファイルであることをブラウザに伝えるために使用されます。
3 HTML ファイルを編集します。テキスト編集ウィンドウで、カーソルを <body> </body> タグの間に移動して、「Hello world!」と入力します。ブラウザウィンドウを再読み込みすると、背景画像の上にテキストが表示されます。
4 HTML および CSS タグを理解します。 HTML コードは開始タグと終了タグで構成されます。 <body> は本文の開始タグであり、</body> は本文の終了タグです。ページを正しく表示するには、HTML ページのすべての開始タグに終了タグが必要です。
5タイトルタグを理解します。 <title> タグは、ブラウザウィンドウのタイトルバーに表示されるテキストと、ブラウザタブに表示されるテキストです。
6スタイルタグを理解します。 <style> タグは CSS コンテンツを示します。 <style> タグ内のすべては CSS コードです。
7 body タグを理解します。 HTML コードまたは CSS コードを除き、<body> タグ内に入力されたすべての内容が表示されます。
8 HTML ファイルを編集します。テキスト編集ウィンドウで、カーソルを <body> </body> タグの間に移動して、「Hello world!」と入力します。ブラウザウィンドウを再読み込みすると、背景画像の上にテキストが表示されます。広告する

パート 5パート5/5:

CSSコードを理解する

1 CSS コードを理解します。 index.html ファイルコードでは、<style> タグ内の CSS コードは、Web ページが表示されるときに、特定の名前の背景画像を <body> タグに追加するようにブラウザーに指示します。
2 CSS コードを表示します。

体{
	背景画像: url ( "background.png" );
}

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-460px-2627945-19-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-728px-2627945-19-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 CSS コードのさまざまな部分を理解します。 CSS スタイルは、セレクターと宣言の 2 つの部分で構成されます。 ^{[4] X研究ソース}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/2627945-20.jpg\/v4-460px-2627945-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/2627945-20.jpg\/v4-728px-2627945-20.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 CSS 宣言を理解します。 CSS 宣言は、プロパティと値の 2 つの部分で構成されます。中括弧の間には、
background-image はプロパティであり、url("background.png") は値です。 ^{[5] X研究ソース}
広告する