【初心者向け】backgroundプロパティとは？基本〜応用の使い方を徹底解説

こんにちは！このあいだ健康診断を受けた際、腰回りが昨年より2㎝太くなっていて地味にショックを受けているシュンヤです。

さて、今回はCSSの話。

CSSで誰しも必ず使うbackgroundプロパティですが、その使用範囲の広さから

そもそもbackgroundプロパティってなに？どんなシーンで、どうやって使うの？

とお悩みの方も少なくないでしょう。そこで、今回はそんな方に向けて、

・backgroundプロパティの概要と基本的な使い方
・よく使うbackgroundプロパティの応用的な使い方

について解説していきます。

正直、backgroundプロパティは使用するシーンがたくさんあり過ぎて、これ１つでちょっとした本が書けるほど。

パニックにならないよう、基本的な使い方から、大切なところをピックアップして解説していきますので、CSS初心者さんなどはぜひ最後までご覧ください。

1 backgroundプロパティとは
2 backgroundプロパティの基本的な使い方
3 【応用編】backgroundプロパティの応用的な使い方
- 3.1 他のプロパティを一括して指定する
- 3.2 マウスでホバーした時に背景色をつける
4 まとめ

backgroundプロパティとは

backgroundプロパティの読み方

backgroundは「バックグラウンド」と読みます。

日本語では【背景】などと訳され、その言葉のとおり背景に関するデザインのために使用するプロパティです。

backgroundプロパティの説明

backgroundはテキスト、Webページの全体など、それぞれの要素の背景を指定するためのプロパティです。

もう少し具体的に言うと、テキストに引かれたマーカーの色を変えたり、Webページの背景色を変えたり、背景に画像を挿入するなど、背景に関する諸々のデザインをすることができます。

backgroundはショートハンドプロパティ

backgroundは【ショートハンドプロパティ】といい、複数のデザインを一括して指定することができます。

通常、CSSプロパティは１つのデザインにつき１つのプロパティが使われることが一般的ですが、backgroundは主に次の５つのプロパティを一括して指定することができます。

プロパティ名	説明
background-image	背景画像のURL（パス）
background-repeat	背景画像の繰り返し
background-position	背景画像の表示位置
background-attachment	背景画像の固定
background-color	背景の色

一括して記述するときに順番は関係なく、それぞれの値を「半角スペース」で区切るだけです。

これらのプロパティについて、一つ一つ指定することも可能ですが、一般的には、コードの記述量が少なくて済むショートハンドを使うことの方が多いでしょう。

backgroundプロパティの値

backgroundはショートハンドプロパティのため、各プロパティに準じた値になります。

例えば、後ほど紹介するcolorなら以下のとおりです。

	値	説明
初期値	transparent	色なし（透明）
設定値	色	”red”などのカラーネーム、＃RRGGBB、RGB、RGBA

色について簡単に解説すると、赤にしたいときは”red”と記述する【カラーネーム】のほかに、R（赤）、G（緑）、B（青）を基準として３〜６桁の英数字で表す方法があります。

色の種類はたくさんあって、一つ一つ覚えるのは大変なので、カラーの早見表サイトなどを参考にしましょう。
参照：原色大辞典

backgroundプロパティの対応ブラウザ

backgroundプロパティの対応ブラウザは次のとおりです。

PC用ブラウザ	対応状況
Chrome	完全対応
Edge	完全対応
Firefox	完全対応
nternet Explorer	完全対応
Opera	完全対応
Safari	完全対応
スマートフォン用ブラウザ	対応状況
Android webview	完全対応
Android版Chrome	完全対応
Android版Firefox	完全対応
Android 版 Opera	完全対応
iOS版Safari	完全対応
Samsung Internet	完全対応

backgroundプロパティの基本的な使い方

ここではbackgroundプロパティの基本的な使い方を３つほど解説していきます。

テキストの背景色を変更する

HTMLの＜mark＞タグで囲まれたテキストは、通常、黄色のマーカーで表示されますが、backgroundを使うことで簡単にこの色を変えることができます。

色の種類はいくつかありますが、今回は最も一般的な【HEXカラー】という６桁の英数字を使って解説しますね。

また、CSSの適用方法は外部ファイルを用意するのではなく、HTMLの＜head＞タグに＜style＞タグを追加して、直接CSSを書き込んでいく方法を採用しました。

こちらの方がHTMLとCSSを一目で確認できるので学習にはオススメです。

  ・・・
<head>
  ・・・
 <style>
    mark{
    background: #64dfff;
  }
 </style>
</head>
<body>
  <p>マークタグで囲った部分は通常、黄色で塗りつぶしされますが、<br>
    <mark>backgroundプロパティで簡単に色を変えることができます。</mark></p>
</body>

・・・

<head>

・・・

<style>

mark{

background: #64dfff;

}

</style>

</head>

<body>

<p>マークタグで囲った部分は通常、黄色で塗りつぶしされますが、<br>

<mark>backgroundプロパティで簡単に色を変えることができます。</mark></p>

</body>

結果は下記のとおり。

黄色は重要な部分、青色はネガティブな強調部分など、自分なりにルールを作って使用しましょう。

ページ全体の背景色を設定する

webページの背景色ってデフォルトでは真っ白（透明）で味気ないですが、backgroundを使って色を変えることができます。

コードは下記のとおりです。

・・・
<head>
  ・・・
 <style>
    body{
    background: #b3d874;
  }
 </style>
</head>
<body>
  <p>＜body＞タグに背景色を設定した場合、<br>
    Webページ全体の色を変えることができます。</p>
</body>

・・・

<head>

・・・

<style>

body{

background: #b3d874;

}

</style>

</head>

<body>

<p>＜body＞タグに背景色を設定した場合、<br>

Webページ全体の色を変えることができます。</p>

</body>

結果は下記のとおり。

body要素にbackgroundを適用させることで、ページ全体に背景色をつけることができました。

このように、backgroundは要素の背景をデザインすると覚えましょう。

ページ全体に背景画像を設定する

背景に画像を設定する場合は、＜body＞タグにbackgroundプロパティを適用させます。

コードは下記のとおり。

・・・
<head>
  ・・・
 <style>
    body{
    background: url(カッコの中に画像のURLを記述);
  }
 </style>
</head>
<body>
  <p>＜body＞タグに背景画像を設定した場合、<br>
    Webページ全体に背景画像を敷き詰めることができます。</p>
</body>

・・・

<head>

・・・

<style>

body{

background: url(カッコの中に画像のURLを記述);

}

</style>

</head>

<body>

<p>＜body＞タグに背景画像を設定した場合、<br>

Webページ全体に背景画像を敷き詰めることができます。</p>

</body>

結果は以下のとおり。

画像のurlの設定には【相対パス】と【絶対パス】のどちらを記述しても問題ありません。

MEMO【パスってなに？】

パスとは簡単に言うと、「その画像がどこにあるのかを示す道順」になります。
絶対パスとは「URLそのもの」のことを指し、外部サイトにリンクするときには必ず絶対パスを使用します。
相対パスとは画像を表示させたいページ（リンク元）をスタート地点として、どのファイルを経由して画像のURLにたどり着くのかを指定する方法になります。

【応用編】backgroundプロパティの応用的な使い方

他のプロパティを一括して指定する

前半で「backgroundはショートハンドプロパティと言い、他のbackgroundプロパティの値を一括して指定できる。」と説明しました。

実際に、【image、repeat、attachment】、３つのプロパティの値を一括記述してみましょう。

記述の方法は、それぞれの値を半角スペースを空けて記述するだけで、書く順番は関係ありません。

・・・
<head>
  ・・・
 <style>
 body{
  background: url(画像のURL) repeat-x fixed;
  }
 .content{
  margin: 64px auto 0 auto;
  padding: 32px;
  max-width: 900px;
  border-radius: 16px;
  background: rgba(255,255,255,0.5);
  }
 </style>
</head>
<body>
 <div class="content">
  <h2>クリスマスイベントの開催について</h2>
  <p>当日の開催情報は下記のとおりです。</p>
  <p>カップルからご夫婦、お子様連れのご家族から、みなさまが楽しんでいただけるようなイベントになっています。</p>
   <ul>
    <li>日　時：12月25日（金）　17:00〜２０：００</li>
    <li>場　所：横浜赤レンガ倉庫（横浜市中区・・・）</li>
    <li>問合せ：株式会社ABC（００−０００−００００）</li>
   </ul>
  </div>
</body>

・・・

<head>

・・・

<style>

body{

background: url(画像のURL) repeat-x fixed;

}

.content{

margin: 64px auto 0 auto;

padding: 32px;

max-width: 900px;

border-radius: 16px;

background: rgba(255,255,255,0.5);

}

</style>

</head>

<body>

<h2>クリスマスイベントの開催について</h2>

<p>当日の開催情報は下記のとおりです。</p>

<p>カップルからご夫婦、お子様連れのご家族から、みなさまが楽しんでいただけるようなイベントになっています。</p>

<ul>

<li>場　所：横浜赤レンガ倉庫（横浜市中区・・・）</li>

<li>問合せ：株式会社ABC（００−０００−００００）</li>

</ul>

</div>

</body>

結果は下記のとおり。

＜url＞で背景画像を設定。
＜repeat-x＞で横方向だけに画像表示を繰り返し。
＜fixed＞で背景画像の位置を固定。（スクロールしても画像は固定）
ちなみに＜.content＞には半透明の白い背景画像を適用させています。

マウスでホバーした時に背景色をつける

パソコンのマウスの矢印（ポインター）を、リンク先のURLの上に乗せることをホバーと言います。
ここでは、ホバーしたことが一目でわかるように、背景色をつけるコードを紹介します。

・・・
<head>
  ・・・
 <style>
 a{
  color: #6fb5ff;
 }
 a:hover{
  color: #6fb5ff;
  background: #ffce5b;
 }
</style>
</head>
<body>
 <h2>日本の行政機関の例</h2>
  <ul>
   <li><a href="https://www.mhlw.go.jp/index.html">厚生労働省</a></li>
   <li><a href="http://wwwa.cao.go.jp/notice/20191101notice.html">内閣府</a></li>
   <li><a href="https://www.meti.go.jp/">経済産業省</a></li>
  </ul>
</body>

・・・

<head>

・・・

<style>

color: #6fb5ff;

}

a:hover{

color: #6fb5ff;

background: #ffce5b;

}

</style>

</head>

<body>

<h2>日本の行政機関の例</h2>

<ul>

<li><a href="https://www.mhlw.go.jp/index.html">厚生労働省</a></li>

<li><a href="https://www.meti.go.jp/">経済産業省</a></li>

</ul>

</body>

結果は下記のとおり。マウスでホバーした時に、リンク先に背景色がつきました。

一目でどこにホバー（ポインターを乗せているか）がわかるので、読者にも親切なサイト設計ができましたね。

まとめ

いかがでしたか？
今回は、backgroundプロパティの基本から応用的な使い方について解説しました。

初心者の頃からこの記事を読んで、色々な使い方をたくさん練習しましょう。練習することで、そのうち自然にコードが書けるようになります。

backgroundは、Webページを作る人なら誰でも必ず使うプロパティなので、この記事で学習していただければ嬉しいです。

最後までご覧いただきありがとうございました。

参考文献：htmlクイックリファレンス
参考文献：MDN Ｗeb Ｄocs

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。