Nagashima Laboratory

CSS 色と背景（background）

色 color ・背景 background

色や背景に関する設定を行うCSSプロパティです。

【はじめる前に】

  • css_sample_02 フォルダを作成します
  • index.html を作成し、フォルダに保存します。HTMLには、基本のコードを入力しておきます（tab + ! で入力）
  • style.css を作成し、フォルダに保存します。
  • css_sample_02 フォルダの中に、imagesフォルダをつくり、画像を挿入します。サンプル画像は下記からダウンロードしてください。
  • https://github.com/ngsm-syr/background_sample_img
    • bg.jpg（写真）
    • pattern.png（パターン）

HTMLとCSSの準備

▼index.html への追記（<head>と</head>の間に入力します）

<title>CSS基本プロパティ：まとめ</title>
<link rel="stylesheet" href="style.css">
</head>

<link>でファイルをリンクすることでHTMLにCSSを適用させることができます。

▼index.html への追記（<body>と</body>の間に入力します）

<body>
    <header>
        <h1>CSS基本プロパティ：まとめ</h1>
    </header>

    <main>
        <section class="section-color">
            <h2>1. 色と背景 (Color & Background)</h2>
            <div class="color-box">背景色と文字色のテスト</div>
        </section>
    </main>

    <footer>
        <small>&copy; Webデザイン演習</small>
    </footer>
</body>

▼style.cssへの追記

@charset "UTF-8";

/* =================================================
   1. 色と背景の設定
   ================================================= */
.section-color {
    background-color: #EEEEEE; /* セクション全体の背景色（薄いグレー） */
    padding: 20px;
}

.color-box {
    color: #ffffff;            /* 文字色：白 */
    background-color: #007bff; /* 背景色：青 */
}

背景に画像を配置する

背景に画像を重ねたり、画像を配置したりします

① タイル状に画像を表示（模様を敷き詰める）

背景に画像を表示させた場合、デフォルトでは繰り返し（repeat）になるため、タイル状に敷き詰められたようになります。

▼style.cssへの追記

.section-color {
    background-color: #eeeeee; /* セクション全体の背景色（薄いグレー） */
    background-image: url("images/pattern.png"); /* 背景画像がある場合 */
    padding: 20px;
}

②背景に画像を全面表示

▼style.cssへの追記・修正

.section-color {
    background-color: #eeeeee; /* セクション全体の背景色（薄いグレー） */
    background-image: url("images/bg.png"); /* 背景画像がある場合 */
    background-size: cover;
    padding: 20px;
}

色・背景に関するプロパティ

  • color 文字色
  • background-color 背景色
  • background-image 背景画像
  • background-size 背景画像のサイズ 数値で指定するときには、幅、高さの順に指定
    • cover…できるだけ大きく拡大縮小する。何もない空間ができないように、上下または左右が切り取られることがある
    • contain…縦横比を崩さずに可能な限り大きくする（上下または左右があまる可能性がある。余ったところは、画像が繰り返し表示されるか（background-repeatがrepeatになっている場合）background-colorの色が見える
  • background-repeat 背景画像の繰り返し
    • repeat…繰り返し（初期設定）
    • no-repeat…繰り返しなし
    • repeat-x…横方向に繰り返し
    • repeat-y…縦方向に繰り返し
  • background-position 背景画像の位置。横方向・縦方向の順に指定する
    • 例：center top …横方向はcenter（中央）、縦方向はtop（上揃え）
    • 横方向の指定は、left・center・right
    • 縦方向の指定は、top・center・bottom

「background」という、background-image, background-positionなどをまとめて設定できるプロパティもあります。まとめて書くことを、ショートハンドといいます。

.section-color {
    background: #eeeeee url("images/bg.png") center/cover;
    padding: 20px;
}

なお、ショートハンドで background-sizeを指定する際は、position/sizeの形式で記述する必要があります。

参考リンク

() Category: 資料 Tags: