【Chapter3】色と背景

概要と目標文字の色や背景に関する
プロパティを覚えよう。

文字の色や背景色、背景画像など、
文字色や背景関連のプロパティを学習しましょう。

今回のゴール

RERUN

文字色 `color` プロパティ

color(カラー)は、文字の色（前景色）を変更するはプロパティ。

初期値	値の継承	適用対象
ブラウザの設定値	する	全要素

主な値
指定できる値	説明
color値	文字色のcolor値 (例: #808080 など)
`transparent`	透明

`color`プロパティを
使ってみよう。

「css-lessons」 › 「chapter03」 › 「color」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認

chapter03/color/index.html

<h1>文字の色のプロパティ</h1>
<p>
  ここはp要素でマークアップされており、<br>
  何のスタイルも適用していません。
</p>
<hr>
<p class="color1">
  ここはp要素でマークアップされており、<br>
  class属性に「<em>color1</em>」が指定されています。<br>
  <a href="#">これはアンカーテキストです。</a>
</p>
<hr>
<p class="color2">
  ここはp要素でマークアップされており、<br>
  class属性に「<em>color2</em>」が指定されています。<br>
  <a href="#">これはアンカーテキストです。</a>
</p>

「css-lessons」 › 「chapter03」 › 「color」フォルダ内の「style.css」をテキストエディタで開く
class名「color1」、class名「color2」の文字色を変更するCSSを記述

chapter03/color/style.css

.color1 {
  color: #607D8B;
}

.color2 {
  color: #009688;
}

a {
  color: #00BCD4;
}

上書き保存
「css-lessons」 › 「chapter03」› 「color」フォルダ内の「index.html」をダブルクリック。
文字の色が変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

背景色 `background-color` プロパティ

background(バックグラウンド)-color(カラー)は、要素の背景色を指定するプロパティ。

初期値	値の継承	適用対象
`transparent`	しない	全要素

主な値
指定できる値	説明
color値	文字色のcolor値 (例: #808080 など)
`transparent`	透明

`background-color`プロパティを
使ってみよう

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「index.html」をテキストエディタで開く
HTMLを確認

chapter03/background/index.html

<h1>背景関連のプロパティ</h1>
<p>
  ここはp要素でマークアップされており、<br>
  何のスタイルも適用していません。
</p>
<hr>
<p class="bg1">
  ここはp要素でマークアップされており、<br>
  class属性に「<em>bg1</em>」が指定されています。<br>
  <a href="#">これはアンカーテキストです。</a>
</p>
<hr>
<p class="bg2">
  ここはp要素でマークアップされており、<br>
  class属性に「<em>bg2</em>」が指定されています。<br>
  <a href="#">これはアンカーテキストです。</a>
</p>

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「style.css」をテキストエディタで開く
「h1要素」、class名「bg1」、class名「bg2」に背景色を指定

chapter03/background/style.css

h1 {
  background-color: #03A9F4;
}

.bg1 {
  background-color: #eee;
}

.bg2 {
  background-color: rgba(0, 0, 0, 0.3);
}

上書き保存
「css-lessons」 › 「chapter03」› 「background」フォルダ内の「index.html」をダブルクリック。
背景色が変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

背景画像 `background-image` プロパティ

background(バックグラウンド)-image(イメージ)は、背景画像を指定するプロパティ。
CSS3より、半角カンマ区切りで複数の背景を指定できるようになった。
その際、最初に指定した背景画像が最も手前に表示される。
同じ要素に「background-color」が指定されている場合は、
背景画像よりも背面に表示される。

初期値	値の継承	適用対象
`none`	しない	全要素

主な値
指定できる値	説明
`none`	なし
`url(ファイル名)`	背景画像として表示したい画像ファイルのパスを指定

`background-image`プロパティを
使ってみよう

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「style.css」をテキストエディタで開く
「body」要素に背景画像を指定する

chapter03/background/style.css

body {
  background-image: url(images/star.png);
}

h1 {
  background-color: #03A9F4;
}

.bg1 {
  background-color: #eee;
}

.bg2 {
  background-color: rgba(0, 0, 0, 0.3);
}

上書き保存
「css-lessons」 › 「chapter03」› 「background」フォルダ内の「index.html」をダブルクリック。
背景画像が表示されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

背景画像の繰り返し `background-repeat` プロパティ

background(バックグラウンド)-repeat(リピート)は、背景画像の繰り返しを指定するプロパティ。

初期値	値の継承	適用対象
`repeat`	しない	全要素

主な値
指定できる値	説明
`repeat`	繰り返し
`repeat-x`	水平方向のみ繰り返し
`repeat-y`	垂直方向のみ繰り返し
`no-repeat`	繰り返さない

`background-repeat`プロパティを
使ってみよう

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「style.css」をテキストエディタで開く
「h1要素」に背景画像を指定して、背景画像を繰り返ししない設定にする

chapter03/background/style.css

body {
  background-image: url(images/star.png);
}

h1 {
  background-color: #03A9F4;
  background-image: url(images/hart.png);
  background-repeat: no-repeat;
}

.bg1 {
  background-color: #eee;
}

.bg2 {
  background-color: rgba(0, 0, 0, 0.3);
}

上書き保存
「css-lessons」 › 「chapter03」› 「background」フォルダ内の「index.html」をダブルクリック。
背景画像の繰り返しがしていないことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

背景画像の位置 `background-position` プロパティ

background(バックグラウンド)-position(ポジション)は、背景画像の表示位置を指定するプロパティ。
水平方向、垂直方向の順に、半角スペースで区切って2つ指定する。
なお、値が1つか指定されていなかった場合は、
もう一方に「center」が指定されたものとして処理される。
「background-repeat」が「no-repeat」の場合は、指定した位置に表示される。
それ以外の場合は、指定した位置を基準にして繰り返される。

初期値	値の継承	適用対象
`0% 0%`	しない	全要素

主な値
指定できる値	説明
実数 + 単位	実数に単位を付けて指定 (要素の左上が基準)
パーセンテージ	要素の大きさと画像の大きさに対する割合をパーセンテージで指定 (要素の左上が基準)
キーワード	水平方向 `left` (`0%`と同じ) `center` (`50%`と同じ) `right` (`100%`と同じ) 垂直方向 `top` (`0%`と同じ) `center` (`50%`と同じ) `bottom` (`100%`と同じ)

`background-position`プロパティを
使ってみよう

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「style.css」をテキストエディタで開く
「h1」要素の背景の位置を指定する

chapter03/background/style.css

body {
  background-image: url(images/star.png);
}

h1 {
  background-color: #03A9F4;
  background-image: url(images/hart.png);
  background-repeat: no-repeat;
  background-position: 98% center;
}

.bg1 {
  background-color: #eee;
}

.bg2 {
  background-color: rgba(0, 0, 0, 0.3);
}

上書き保存
「css-lessons」 › 「chapter03」› 「background」フォルダ内の「index.html」をダブルクリック。
背景の位置が変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

背景画像の固定 `background-attachment` プロパティ

background(バックグラウンド)-attachment(アタッチメント)は、背景画像を固定するかどうかを指定するプロパティ。
「fixed」にした場合、背景が表示される領域は、ウインドウの表示領域全体になる。

初期値	値の継承	適用対象
`scroll`	しない	全要素

主な値
指定できる値	説明
`scroll`	コンテンツと一緒にスクロールする
`fixed`	ウインドウ上に固定する (ウインドウ表示領域全体)

`background-attachment`プロパティを
使ってみよう

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「style.css」をテキストエディタで開く
「body 要素」の背景画像を固定する

chapter03/background/style.css

body {
  background-image: url(images/star.png);
  background-attachment: fixed;
}

h1 {
  background-color: #03A9F4;
  background-image: url(images/hart.png);
  background-repeat: no-repeat;
  background-position: 98% center;
}

.bg1 {
  background-color: #eee;
}

.bg2 {
  background-color: rgba(0, 0, 0, 0.3);
}

上書き保存
「css-lessons」 › 「chapter03」› 「background」フォルダ内の「index.html」をダブルクリック。
背景画像が固定されたことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

背景画像の大きさ `background-size` プロパティ CSS3 新

background(バックグラウンド)-size(サイズ)は、背景画像の表示サイズを指定するプロパティ。
「cover」や「contain」は単独で指定するが゙、
それ以外の場合は、幅、高さの順で値を2つ指定する。
値を1つしか指定しなかった場合は幅への指定となり、高さは「auto」を指定した状態になる。
なおこのプロパティはCSS3の為、「IE8」以下の環境では使えない。

初期値	値の継承	適用対象
`auto auto`	しない	ブロック

主な値
指定できる値	説明
実数 + 単位	実数に単位を付けて指定 (例:`100px` など)
パーセンテージ	要素の大きさに対する割合をパーセンテージで指定 (例:`50%` など)
`auto`	幅と高さの両方が「auto」の場合は元サイズ、どちらか一方にしてした場合は、画像の縦横比を保つサイズ
`cover`	縦横比を保ったまま、背景表示領域を覆うサイズ
`contain`	縦横比を保ったまま、表示領域に背景画像全体が表示されるサイズ

`background-size`プロパティを
使ってみよう

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「index.html」をテキストエディタで開く
「body 要素」の背景画像のサイズを変更する

chapter03/background/style.css

body {
  background-image: url(images/star.png);
  background-attachment: fixed;
  background-size: 24px 24px;
}

h1 {
  background-color: #03A9F4;
  background-image: url(images/hart.png);
  background-repeat: no-repeat;
  background-position: 98% center;
}

.bg1 {
  background-color: #eee;
}

.bg2 {
  background-color: rgba(0, 0, 0, 0.3);
}

上書き保存
「css-lessons」 › 「chapter03」› 「background」フォルダ内の「index.html」をダブルクリック。
背景画像の大きさが変更されていることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

背景一括設定 `background` プロパティ CSS3 改

background(バックグラウンド)は、背景関連のプロパティを一括で指定するプロパティ。
指定したいプロパティの値を半角スペース区切りで指定する。
ただし省略したプロパティは、「初期値」にリセットされる。
なお、「background-size」の指定は、
「background-position」の後に「/ (スラッシュ)」を付けてから指定する。
ただ、「background-size」に非対応なブラウザは解釈できないので、
現状は「background-size」だけ別途指定する方が無難。

初期値	値の継承	適用対象
各プロパティに準ずる	しない	全要素

主な値
指定できる値	説明
`background-color` の値	`background-color`に指定できる値
`background-image` の値	`background-image`に指定できる値
`background-repeat` の値	`background-repeat`に指定できる値
`background-position` の値	`background-position`に指定できる値
`background-attachment` の値	`background-attachment`に指定できる値
`background-size` の値	`background-size`に指定できる値

`background`プロパティを
使ってみよう

「css-lessons」 › 「chapter03」 › 「background」フォルダ内の「style.css」をテキストエディタで開く
「body要素」とh1要素」の背景関連のプロパティを一括設定に変更

chapter03/background/style.css

body {
  /*
  background-image: url(images/star.png);
  background-attachment: fixed;
  background-size: 24px 24px;
  */

  background: url(images/star.png) 24px 24px fixed;
}

h1 {
  /*
  background-color: #03A9F4;
  background-image: url(images/hart.png);
  background-repeat: no-repeat;
  background-position: 98% center;
  */

  background: #03A9F4 url(images/hart.png) no-repeat 98% center;
}

.bg1 {
  background-color: #eee;
}

.bg2 {
  background-color: rgba(0, 0, 0, 0.3);
}

上書き保存
「css-lessons」 › 「chapter03」› 「background」フォルダ内の「index.html」をダブルクリック。
背景に変更がないことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter03」 › 「training」フォルダ内に「style.css」を作成し、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

chapter03」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： style.css
上記で作成したCSSファイルを、「training」フォルダ内にある「index.html」にリンクして下さい。

body要素に以下のスタイルを設定して下さい。

プロパティ	値
文字の書体	「游明朝」なければ、「ヒラギノ明朝 ProN W3」なければ、「HG明朝E」なければ、明朝系
行間	`1.5`
背景画像	「images」フォルダ内の「bg-washi.png」
文字の色	`#333333`

class名「heading」に以下のスタイルを設定して下さい。

プロパティ	値
背景画像	「images」フォルダ内の「bg-moyou.png」
背景画像の繰り返し	繰り返さない
背景画像の位置	水平方向: `5%` 垂直方向: 上

class名「theme-white」に以下のスタイルを設定して下さい。

プロパティ	値
背景色	`#FFFFFF`

class名「theme-dark」に以下のスタイルを設定して下さい。

プロパティ	値
背景色	`#333333`
文字の色	`#FFFFFF`

解答例

chapter03/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>架空温泉 だみい屋</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>架空温泉 だみい屋</h1>
    <nav>
      <h2>サイト内メニュー</h2>
      <ul>
        <li><a href="#">お部屋</a></li>
        <li><a href="#">お食事</a></li>
        <li><a href="#">お風呂</a></li>
        <li><a href="#">施設案内</a></li>
        <li><a href="#">よくある質問</a></li>
        <li><a href="#">ご宿泊プラン・予約</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2 class="heading">大切な人と「ゆったり」過ごすお部屋。<br>ワンちゃんと「たっぷり」遊ぶお部屋。</h2>
      <p>
        だみい屋はビジネスや家族連れのお客様におすすめなスタンダードタイプのお部屋はもちろん、 カップルにおすすめの
        <em>離れ</em>や、わんちゃん連れにおすすめな<em>ドッグラン付き</em>のお部屋をご用意致しております。
      </p>
      <section class="theme-white">
        <h3>ビジネスにおすすめ<br>スタンダード10畳</h3>
        <p>一番多い部屋数があるスタンダードの10畳のお部屋です。</p>
        <p><a href="#">スタンダード10畳の詳細を見る</a></p>
      </section>
      <section class="theme-white">
        <h3>カップルにおすすめ<br>離れ</h3>
        <p>プライベートな空間でゆったりできる、家族風呂付きの離れのお部屋です。</p>
        <p><a href="#">離れの詳細を見る</a></p>
      </section>
      <section class="theme-white">
        <h3>ワンちゃんにおすすめ<br>ドッグラン付き客室</h3>
        <p>ワンちゃんと一緒に旅行を楽しめる。ドッグラン付きのお部屋です。</p>
        <p><a href="#">ドッグラン付き客室の詳細を見る</a></p>
      </section>
    </section>

    <section>
      <h2>お客様の声</h2>
      <p>だみい屋に寄せられた「お客様の声」の一部をご紹介します。</p>
      <article class="theme-white">
        <h3>抜群のコストパフォーマンス！</h3>
        <p>部屋が広いくて料理もおいしい。繁華街からも近くてこの値段なら文句もないですね。</p>
        <footer>
          <p>S・Y さん</p>
        </footer>
      </article>
      <article class="theme-white">
        <h3>ドッグラン付きがうれしい！</h3>
        <p>
          温泉旅館で、ドッグランがついてる部屋があるのが嬉しいです。 ただ、畳は少し凸凹してました。ワンちゃんがお部屋の中で走ってるからかな？ まぁ私にとっては大満足な旅館でした。
        </p>
        <footer>
          <p>山田 さん</p>
        </footer>
      </article>
    </section>
  </main>

  <footer class="theme-dark">
    <address>
      架空温泉 だみい屋<br>
      〒56X-00XX<br>
      大阪府架空市架空区架空1-1-1
    </address>
    <p><small>&copy; 2018 架空温泉 だみい屋.</small></p>
  </footer>
</body>
</html>

chapter03/training/style.css

body {
  font: 1em/1.5 游明朝, "ヒラギノ明朝 ProN W3", HG明朝E, serif;
  background-image: url(images/bg-washi.png);
  color: #333;
}

.heading {
  background: url(images/bg-moyou.png) no-repeat 5% top;
}
.theme-white {
  background-color: #fff;
}

.theme-dark {
  background-color: #333;
  color: #fff;
}

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ文字色は`color`
背景関連は`background`

文字の色はcolorプロパティを使い、
背景に関することは、backgroundを使う。

文字の色はcolorプロパティを使う
背景関連はbackgroundプロパティを使う

Chapter03 色と背景

colorプロパティを使ってみよう。

background-colorプロパティを使ってみよう

background-imageプロパティを使ってみよう

background-repeatプロパティを使ってみよう

background-positionプロパティを使ってみよう

background-attachmentプロパティを使ってみよう

background-sizeプロパティを使ってみよう

backgroundプロパティを使ってみよう

`color`プロパティを
使ってみよう。

`background-color`プロパティを
使ってみよう

`background-image`プロパティを
使ってみよう

`background-repeat`プロパティを
使ってみよう

`background-position`プロパティを
使ってみよう

`background-attachment`プロパティを
使ってみよう

`background-size`プロパティを
使ってみよう

`background`プロパティを
使ってみよう