CSSのbackgroundプロパティをマスターしよう｜実例多数

※本サイトにはプロモーション・広告が含まれています。

（最終更新日：2023年10月）

✔このような方へ向けて書かれた記事となります

「css backgroundの基本的な使い方が知りたい」
「css backgroundの応用方法を学びたい」
「css backgroundを活用した実例を見たい」

✔当記事を通じてお伝えすること

  • css backgroundの基本概念
  • css backgroundの書き方と応用方法
  • css backgroundの実例

当記事では、css backgroundの基本概念から応用方法、実際に活用されている具体例まで解説しています。

ぜひ最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker
¥2,640 (2024/05/16 14:24:18時点 Amazon調べ-詳細)

CSS Backgroundの主なプロパティ

こちらでは、CSS Backgroundの主なプロパティについて詳しく説明します。

それぞれのプロパティがどのような役割を果たすのかを理解することが大切です。

  • background-color：色の設定
  • background-image：画像の設定
  • background-size：背景のサイズ調整
  • background-repeat：繰り返しの設定
  • background-position：位置指定
  • background-attachment：固定・スクロールの設定
  • background-originとbackground-clip：配置範囲の設定

background-color：色の設定

background-colorプロパティは、要素の背景色を設定するために使用します。

色の指定は色の名前、16進数、RGB、RGBAなどさまざまな方法があります。

<!DOCTYPE html>
<html>
<head>
  <title>Background Color Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

background-image：画像の設定

background-imageプロパティを使うと、要素の背景に画像を設定できます。

画像のURLを指定することで、その画像が背景として表示されます。

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.bg-image {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    padding: 20px;
    box-sizing: border-box;

    /* 背景画像を指定 */
    background-image: url('https://example.com/path-to-your-image.jpg');
    
    /* 画像のサイズ調整 */
    background-size: cover;
    
    /* 画像の位置調整 */
    background-position: center;
}

background-size：背景のサイズ調整

background-sizeプロパティにより、背景画像のサイズを調整することができます。

このプロパティによって背景画像を要素の大きさに合わせて伸縮させたり、特定の大きさに設定したりすることが可能です。

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

div {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    padding: 20px;
    box-sizing: border-box;

    /* 共通の背景画像を指定 */
    background-image: url('https://example.com/path-to-your-image.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

/* 背景画像が要素に収まるように画像を伸縮します。アスペクト比は保持されます。*/
.bg-contain {　
    background-size: contain;
}

/* 要素全体を背景画像で覆うように画像を伸縮します。アスペクト比は保持されますが、画像の一部がクリップされることがあります。*/
.bg-cover { 
    background-size: cover;
}

/*背景画像を指定されたピクセルの大きさに調整します。この例では100px x 100pxに設定 */
.bg-fixed-size {
    background-size: 100px 100px;
}

background-repeat：繰り返しの設定

background-repeatプロパティを用いると、背景画像が要素内でどのように繰り返されるかを制御できます。

値には “repeat”, “repeat-x”, “repeat-y”, “no-repeat”などがあります。

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

div {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    box-sizing: border-box;

    /* 共通の背景画像を指定 */
    background-image: url('https://example.com/path-to-your-image.jpg');
    background-position: center;
}

/* 背景画像が水平方向、垂直方向ともに繰り返されます。 */
.bg-repeat {
    background-repeat: repeat;
}

/* 背景画像が水平方向にのみ繰り返されます。 */
.bg-repeat-x {
    background-repeat: repeat-x;
}

/* 背景画像が垂直方向にのみ繰り返されます。 */
.bg-repeat-y {
    background-repeat: repeat-y;
}

/* 背景画像が繰り返されず、一回だけ表示されます。 */
.bg-no-repeat {
    background-repeat: no-repeat;
}

background-position：位置指定

background-positionプロパティを使用すると、背景画像の位置を指定できます。

これにより、画像を任意の位置に配置することができます。

div {
    width: 150px;
    height: 100px;
    border: 1px solid #000;
    margin-bottom: 10px;
    background-image: url('https://example.com/path-to-your-image.jpg');
}

/* 画像の位置が上部の左端に配置 */
.bg-top-left {
    background-position: top left;
}
/* 画像が要素の中央に配置 */
.bg-center {
    background-position: center;
}
/* 画像の位置が下部の右端に配置 */
.bg-bottom-right {
    background-position: bottom right;
}

background-attachment：固定・スクロールの設定

background-attachmentプロパティを使用すると、背景画像がウェブページと一緒にスクロールするか、それとも位置が固定されるかを制御できます。

body {
    font-size: 24px;
    height: 2000px;  /* この高さを設定してスクロールを確認できるようにしています */
}

div {
    width: 100%;
    height: 400px;
    margin-bottom: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url('https://example.com/path-to-your-image.jpg');
    background-size: cover;
}

.bg-scroll {
    background-attachment: scroll;  /* 背景画像がページと一緒にスクロールします */
}

.bg-fixed {
    background-attachment: fixed;  /* 背景画像の位置が固定され、ページがスクロールしても動かないようになります */
}

background-originとbackground-clip：配置範囲の設定

background-originプロパティとbackground-clipプロパティは、背景画像の配置範囲を制御するもの。

背景画像を要素のボーダー、パディング、またはコンテンツ領域に収めるよう指定します。

div {
    width: 300px;
    height: 200px;
    margin-bottom: 30px;
    padding: 50px;
    border: 10px solid #333;
    
    background-image: url('https://example.com/path-to-your-image.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
}

.bg-origin-border {
    /* 背景画像をborderまでの領域に配置します */
    background-origin: border-box;
}

.bg-origin-padding {
    /* 背景画像をpaddingまでの領域に配置します */
    background-origin: padding-box;
}

.bg-clip-content {
    /* 背景画像をコンテンツ領域のみにクリップします（paddingやborderの上には表示されません） */
    background-clip: content-box;
}

詳細な背景設定の仕方

ここでは、より詳細な背景設定の方法を見ていきましょう。

色の指定や複数の背景画像設定、位置指定について深く掘り下げます。

  • 16進数での色指定
  • 複数の背景画像設定
  • pxや%を使って位置指定

16進数での色指定

色を16進数で指定する方法は、RGB値を基にしています。

それぞれの色（赤、緑、青）は2桁の16進数で表現され、色の深度は00（最も薄い）からFF（最も濃い）まで変化します。

赤系の色

  • 真っ赤: #FF0000
  • 薄い赤: #FFCCCC
  • 濃い赤: #990000

緑系の色

  • 真っ緑: #00FF00
  • 薄い緑: #CCFFCC
  • 濃い緑: #009900

青系の色

  • 真っ青: #0000FF
  • 薄い青: #CCCCFF
  • 濃い青: #000099

その他の色

  • 黒: #000000
  • 白: #FFFFFF
  • グレー: #808080
  • 黄色: #FFFF00
  • シアン: #00FFFF
  • マゼンダ: #FF00FF

上記の16進数の色指定は、ウェブページやデザインに広く使用されています。

16進数の色指定は、RGB値を直感的に示すための効果的な方法となっています。

複数の背景画像設定

複数の背景画像をひとつの要素に設定することも可能です。

異なる背景画像を重ねて表示したり、特定の条件下で異なる背景画像を表示するなど、さまざまな効果を得られます。

pxや%を使って位置指定

位置指定には、ピクセル(px)やパーセンテージ(%)も使えます。

ピクセルを使用すると、画像の位置をピクセル単位で精確に制御が可能。

一方、パーセンテージを使用すると、親要素に対する相対的な位置を指定できます。

ショートハンドを利用した設定法

ショートハンドとは、複数のプロパティをひとつのプロパティで指定する方法です。

backgroundプロパティは、複数の背景に関するプロパティを一度に指定することができます。

  • backgroundプロパティのショートハンド
  • 順番に注意するポイント

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

backgroundプロパティはショートハンドプロパティであり、一度に複数の背景に関するプロパティを指定できます。

色や画像、サイズ、位置などの設定を1行で行うことが可能です。

順番に注意するポイント

ショートハンドプロパティを使用する際は、順番に注意する必要があります。

たとえば、backgroundプロパティでは、background-colorは最後に指定するのが一般的です。

ショートハンドプロパティの中で最も曖昧さが低いためで、早い段階で指定された場合、ほかの値と混同される可能性があります。

実践的な例題

ここでは、具体的な例題を通じて、これまでに学んだことの実践的な応用を試みます。

  • 色キーワードと画像による背景設定
  • HTML、CSS、結果の解説

色キーワードと画像による背景設定

色キーワードを使用して背景色を設定し、画像を設定して背景を作成する例を試みましょう。

この例では、まず色キーワード’lightblue’を使用して背景色を設定し、次にウェブ上の画像を背景画像として設定します。

HTML、CSS、結果の解説

例題のHTMLとCSSのコードを以下に示します。

また、そのコードによる結果も解説します。

これを通じて、具体的な背景設定のプロセスとその結果を理解しましょう。

了解しました。以下は色キーワード lightblue を使用して背景色を設定し、ウェブ上の画像を背景画像として設定する例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景色と背景画像の例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background-demo">背景色と背景画像のデモ</div>
</body>
</html>

CSS (styles.css)

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;

    /* 色キーワード’lightblue’を使用して背景色を設定 */
    background-color: lightblue;
}

.background-demo {
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* ウェブ上の画像を背景画像として設定 */
    background-image: url('https://example.com/path-to-your-image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

body 要素の背景色として色キーワード lightblueを設定。

次に、.background-demo というクラスを持つ div 要素の背景画像としてウェブ上の画像が設定されています。

ここでは url('https://example.com/path-to-your-image.jpg') として示されていますが、適切な画像のURLに置き換える必要があります。

アクセシビリティへの配慮

アクセシビリティはウェブサイトの設計において重要な考慮点であり、背景設定も例外ではありません。

ここでは、背景設定とアクセシビリティとの関係について詳しく見ていきます。

  • 色のコントラスト
  • 適切な背景画像の利用

色のコントラスト

色のコントラストは、視覚的なアクセシビリティを大きく向上させるための重要な要素です。

テキストとその背景色との間に十分なコントラストがない場合、視力の弱いユーザーや色覚異常のユーザーが読むのを難しくする可能性があります。

適切な背景画像の利用

背景画像を使用する場合も、アクセシビリティに配慮することが重要です。

背景画像がコンテンツを見づらくする可能性があるため、画像は適切な透明度を持ち、かつコンテンツと適切なコントラストを持つようにする必要があります。

まとめ

この記事を通じて、CSS Backgroundの基本的なプロパティから詳細な設定方法、ショートハンドプロパティの使用方法、アクセシビリティへの配慮まで幅広く学びました。

CSSは非常に広範で深い主題であり、まだ学ぶべきことは山ほどあります。

当記事を足がかりにして、更に深くCSSを学んでいくことがおすすめ。

ベンダープレフィックスや新しいCSS3プロパティなど、新たなトピックに挑戦してみてください。

この知識があなたのウェブデザインのスキル向上に役立つことを願っています。

タイトルとURLをコピーしました