【CSS】backgroundプロパティの使い方について
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
backgroundプロパティは背景画像や背景色、サイズ、位置などを一括して指定するプロパティです。
ここでは、background関連のプロパティの中でも特に実務でよく使用するプロパティの使い方について解説していきます。
目次
1. background-color（色）
background-colorは、要素の背景色を指定するプロパティです。
■背景を黒で表示する場合
background-color: rgb(0, 0, 0);
■背景を黒の透明度50%で表示する場合
background-color: rgba(0, 0, 0, 0.5);
2. background-image（画像）
background-imageは、要素の背景に画像を指定するプロパティです。
■背景に画像を表示する場合
background-image: url(../img/bg.jpg);
■背景の画像を透明度50%で表示する場合
背景画像を透過させる場合、そのままでは透明度の設定ができないため「background-color」と「background-blend-mode」をセットで使用して透明度を設定します。
background-image: url(../img/bg.jpg);
background-color: rgba(255, 255, 255, 0.5);
background-blend-mode: lighten;
3. background-repeat（繰り返し）
background-repeatは、背景画像の繰り返し方法を指定するプロパティです。
初期値は「repeat」で繰り返しが設定されており、繰り返しをしたくない場合は「no-repeat」を設定します。
■背景画像を繰り返し無しで表示する場合
background-image: url(../img/bg.jpg);
background-repeat: no-repeat;
■背景画像を繰り返し有りで表示する場合
繰り返し有り（repeat）の場合、横方向と縦方向の両方に対して繰り返しを行います。
background-image: url(../img/bg.jpg);
background-repeat: repeat;
※横方向、または縦方向のみに繰り返しを行う場合、「repeat-x」と「repeat-y」を使用します。
- repeat-x：横方向のみ繰り返しを行う
- repeat-y：縦方向のみ繰り返しを行う
4. background-position（位置）
background-positionは、背景画像を表示する位置を指定するプロパティです。
■背景画像を中央の上端に表示する場合
background-image: url(../img/bg.jpg);
background-position: center top;
5. background-size（サイズ）
background-sizeは、背景画像の表示サイズを指定するプロパティです。
■背景画像を領域からはみ出した部分はトリミングして表示する場合
background-image: url(../img/bg.jpg);
background-size: cover;
「background-size」でよく使用する値は下記の2つです。
- contain：縦横比を維持したまま領域に収まるように拡大縮小されます。
- cover：縦横比を維持したまま領域からはみ出した部分はトリミングされて表示されます。
6. まとめ
実務でよく使用するbackground関連のプロパティの使い方について解説してきました。
主なプロパティは下記の5種類です。
- background-color（色）
- background-image（画像）
- background-repeat（繰り返し）
- background-position（位置）
- background-size（サイズ）
どれもよく使用するプロパティなのでしっかりと学習しておきましょう！
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
