HTML背景色＋背景画像を表示する方法（初心者向け）

こんにちは！
最近、WEB制作をはじめたけど「背景色ってどうやって表示するの・・？」
「背景画像は表示できるの・・？」「なんとなくは表示できたけど、思ったように表示できない・・！」
そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか？
背景色、背景画像を表示できるとよりキレイにWEBページを見せる事ができます！
今回は、「背景色の表示方法」「背景画像の表示方法」を中心に詳しく解説していきます。

背景色を指定する方法

背景色の指定方法を解説していきますが、その前にそもそも色（color）について少し触れていきます、知ってる方は読み飛ばして下さい。
色（color）で指定できる色の説明、指定方法の流れで解説していきます。

colorで指定できる色

WEBで色を指定するときに使える記述、主な4種類を解説していきます。

1.カラーネーム 最初から決められている色の名前で、red,blueなど一般的に誰でも連想できる色名です。

red blue orange

2.カラーコード カラーコードは16進数で色を表し、「00,33,66,99,CC,FF」のみを使って色を指定します。カラーネームよりも細かく種類多く色を指定できます。

#FF0000 #0000FF #FF6600

カラーコードは覚える必要はありません、下記を参考にコピペしてみて下さい。 http://www.netyasun.com/home/color.html

3.RGBカラーモデル RGBとは、「R：Red=赤」「G：Green=緑」「B：Blue=青」の3原色を混ぜて作られ様々な色を表現。 rag（）の（）内に3色の混ぜる色の割合を記入。

rgb(243, 16, 16); rgb(69, 124, 255); rgb(221, 88, 11);

RGBカラーモデルは覚える必要はありません、下記を参考にコピペしてみて下さい。 https://note.cman.jp/color/base_color.cgi

4.RGBAカラーモデル RGBAとは「R：Red=赤」「G：Green=緑」「B：Blue=青」に加えて透明度を指定しします。

rgba(241, 7, 7, 0.59) rgba(30, 122, 255, 0.67) rgba(199, 102, 37, 0.67)

RGBAカラーモデルも覚える必要はありません、下記を参考にコピペしてみて下さい。 https://note.cman.jp/color/base_color.cgi

CSSを指定し背景色を変える方法

CSSを指定し背景色を変更します、CSSプロパティ「background-color」を指定します。

○webページ全体の色を変える方法

サンプルコード表示結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

<body>
  <div>
   <p>テキスト1</p>
   <p>テキスト2</p>
   <p>テキスト3</p>
   <p>テキスト4</p>
   <p>テキスト5</p>
  </div>
</body>

<body>

<div>

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

</div>

</body>

CSSサンプルコード

body {
    background-color: #0000FF;
   }

body {

background-color: #0000FF;

}

※解説
WEBページ全体の色を変更したい場合は、body要素にCSSプロパティ「background-color」を指定します。
「background-color: 〇〇;」〇〇の箇所にお好みの色を指定する事で背景色の指定ができます。

○一部の背景色を変える方法

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

<body>
 
<div>
 <p class="ichigyoume">テキスト1</p>
 <p>テキスト2</p>
 <p>テキスト3</p>
 <p>テキスト4</p>
 <p>テキスト5</p>
</div>
 
</body>

<body>

<div>

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

</div>

</body>

CSSサンプルコード

body {
 background-color: #0000FF;
 
}
 
.ichigyoume {
 background-color: #FF0000;
}

body {

background-color: #0000FF;

}

.ichigyoume {

background-color: #FF0000;

}

※解説
HTMLコード4行目「＜p class=”ichigyoume”＞テキスト1＜/p＞」、クラス「class=”ichigyoume”」を指定し、CSSで「background-color」を指定する事で、1行目の背景色を変更することができます。
つまり部分的に背景色を変更したい場合は、「背景色を変更したい場所にクラスを指定」→「CSSでbackground-colorを指定」する事で変更する事ができます。

○一部の文字色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

<body>
 
<div>
 <p class="ichigyoume">テキスト1</p>
 <p>テキスト2</p>
 <p>テキスト3</p>
 <p>テキスト4</p>
 <p>テキスト5</p>
</div>
 
</body>

<body>

<div>

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

</div>

</body>

CSSサンプルコード

body {
 background-color: #0000FF;
 
}
 
.ichigyoume {
 color: #FF0000;
}

body {

background-color: #0000FF;

}

.ichigyoume {

color: #FF0000;

}

HTMLコード4行目「＜p class=”ichigyoume”＞テキスト1＜/p＞」、クラス「class=”ichigyoume”」を指定し、CSSで「color」を指定する事で、1行目の文字色を変更することができます。
つまり部分的に文字色を変更したい場合は、「文字色を変更したい場所にクラスを指定」→「cssでcolorを指定」する事で変更する事ができます。

HTMLにstyleタグを指定して背景色を変更する方法

CSSファイルを使わずに、HTMLにstyleタグを指定して、背景色を変更する方法を紹介します。

○webページ全体の色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

<body style="background-color: #0000FF;">
 
<div>
 <p>テキスト1</p>
 <p>テキスト2</p>
 <p>テキスト3</p>
 <p>テキスト4</p>
 <p>テキスト5</p>
</div>
 
</body>

<div>

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

</div>

</body>

※解説
bodyタグに「styleタグ」を追加し「background-color」を指定しています、「background-color: 〇〇;」の〇〇にお好みの色を指定する事で、背景色の指定をする事ができます。

○一部の背景色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

<body style="background-color: #0000FF;">
 
<div>
 <p style="background-color: #FF0000;">テキスト1</p>
 <p>テキスト2</p>
 <p>テキスト3</p>
 <p>テキスト4</p>
 <p>テキスト5</p>
</div>
 
</body>

<div>

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

</div>

</body>

※解説
HTMLコード4行目「＜p “style=”background-color: #FF0000;”＞テキスト1＜/p＞」、スタイルタグ「style=”background-color: #FF0000″」を指定し、CSSで「background-color」を指定する事で、1行目の背景色を変更することができます。
つまり部分的に背景色を変更したい場合は、「背景色を変更したい場所にスタイルタグを指定」→「スタイルタグにbackground-colorを指定」する事で変更する事ができます。

○一部の文字色を変える方法

サンプルコード表記結果

これを作る↓

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

HTMLサンプルコード

<body style="background-color: #0000FF;">
 
<div>
 <p style="color: #FF0000;">テキスト1</p>
 <p>テキスト2</p>
 <p>テキスト3</p>
 <p>テキスト4</p>
 <p>テキスト5</p>
</div>
 
</body>

<div>

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

</div>

</body>

※解説
HTMLコード4行目「＜p “style=”color: #FF0000;”＞テキスト1＜/p＞」、スタイルタグ「style=”color: #FF0000″」を指定する事で、1行目の文字色を変更することができます。
つまり部分的に文字色を変更したい場合は、「文字色を変更したい場所にスタイルタグを指定」→「スタイルタグにcolorを指定」する事で変更する事ができます。

背景画像を指定する方法

サンプルコード表記結果

HTMLサンプルコード

<body >
</body>

1 2	<body > </body>

CSSサンプルコード

body {
    background-image: url("https://2.bp.blogspot.com/-3J8MukWVApM/XLAcyuflY4I/AAAAAAABSTA/3IxtQnJKJH48h42rvdg2tGrQEvsc4QxrQCLcBGAs/s600/bg_ocean_suiheisen.jpg");
   }

body {

background-image: url("https://2.bp.blogspot.com/-3J8MukWVApM/XLAcyuflY4I/AAAAAAABSTA/3IxtQnJKJH48h42rvdg2tGrQEvsc4QxrQCLcBGAs/s600/bg_ocean_suiheisen.jpg");

}

※解説
body要素に「background-image : url(画像URL)」を指定する事で画面全体に背景画像を表示するこことができています。
「background-image : url(〇〇);」〇〇内に表示したい写真のファイル名もしくは、画像のURLを記述します。
今は画像が繰り返されて表示されています、ここで自分の好みに応じて表示方法を変更する事ができる、プロパティを紹介します。

繰り返し表示のオプション（background-imge: url（画像ファイルのURL）;）

４点のオプションがあります。
1.repeat: デフォルト値。縦と横に繰り返す
2.no-repeat: 繰り返し表示されない
3.repeat-x: 縦方向にのみ繰り返す
4.repeat-y:横方向にのみ繰り返す

繰り返し表示させないno-repeat:を設定してみます。
サンプルコード表示結果

HTMLサンプルコード

<body >
 
 
</body>

<body >

</body>

CSSサンプルコード

body {
   background-image: url("https://2.bp.blogspot.com/-3J8MukWVApM/XLAcyuflY4I/AAAAAAABSTA/3IxtQnJKJH48h42rvdg2tGrQEvsc4QxrQCLcBGAs/s600/bg_ocean_suiheisen.jpg");
   background-repeat: no-repeat;
}

body {

background-image: url("https://2.bp.blogspot.com/-3J8MukWVApM/XLAcyuflY4I/AAAAAAABSTA/3IxtQnJKJH48h42rvdg2tGrQEvsc4QxrQCLcBGAs/s600/bg_ocean_suiheisen.jpg");

background-repeat: no-repeat;

}

※解説
CSSコード3行目に「background-repeat: no-repeat;」プロパティを指定し、写真が繰り返し表示されなくなりました、用途に合わせて各プロパティを指定してみて下さい。

背景画像のサイズを指定する（background-size: サイズの指定;）

auto: 自動算出される、基本は元画像のサイズ
contain: 元画像の縦横比は保持し、要素に元画像が全て収まるように調整される
cover:元画像の縦横比は保持し、要素にちょうどよいサイズのなる
px: pxで大きさを指定できる
%: %で大きさを指定できる

元画像の縦横比は保持し、背景領域が全て隠れるcover要素を指定してみます。
サンプルコード表示結果

HTMLサンプルコード

<body >
 
 
</body>

<body >

</body>

CSSサンプルコード

body {
    background-image: url("https://2.bp.blogspot.com/-3J8MukWVApM/XLAcyuflY4I/AAAAAAABSTA/3IxtQnJKJH48h42rvdg2tGrQEvsc4QxrQCLcBGAs/s600/bg_ocean_suiheisen.jpg");
    background-size: cover;
   }

body {

background-image: url("https://2.bp.blogspot.com/-3J8MukWVApM/XLAcyuflY4I/AAAAAAABSTA/3IxtQnJKJH48h42rvdg2tGrQEvsc4QxrQCLcBGAs/s600/bg_ocean_suiheisen.jpg");

background-size: cover;

}

※解説
「 background-size: cover;」を指定する事で、横縦比を保持したまま背景領域が全て隠れるサイズ指定(今回はbody要素全体に)写真を表示する事ができました。

まとめ

今回は、「背景色の表示方法」「背景画像の表示方法」を中心に解説してきました。
ポイントをまとめると

背景色表示方法2点
1.CSSを指定し背景色を変える方法
2.HTMLタグにstyleタグを記述し背景色を変える方法

背景画像の表示方法1点
1.CSSプロパティ「background-imegeタグ」を使用し背景画像を指定します。画像の繰り返しや大きさの指定をし、お好みの表示ができます。

いかがだったでしょうか？
背景色、背景画像を表示できるようになると制作の幅がより一層増えます。
今回の記事を参考にしていただけたら幸いです。