背景と枠線

CSS の background プロパティは、このレッスンで説明する多くの個別指定プロパティ(longhand property)を一度に指定する一括指定プロパティ(shorthand property)です。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。

.box {
  background:
    linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}

一括指定の仕方については後ほど改めて扱います。まずは背景に対して CSS で何ができるのかを知るために、ひとつひとつのプロパティを見ていきましょう。

background-color プロパティは、要素の背景色を定義します。このプロパティは、有効な<color>値を受け入れます。background-colorは、要素の Content box, Padding box の範囲でコンテンツの下に広がります。

次の例では、さまざまな色の値を使用して、ボックス(.box)、見出し(h2)、および <span> 要素に背景色を指定しています。

利用可能な <color> を使ってみましょう。

background-image プロパティは、要素の背景に表示する画像を指定します。次の例には、2 個のボックスがあります。片方のボックスでは背景画像がボックスより大きく、他方のボックスの背景画像は小さな星の画像です。

この例は、背景画像に関する 2 つのことを示しています。 デフォルトでは、大きな画像はボックスに収まるように縮小されず、一部分のみが表示されます。いっぽう、小さな画像はボックスの内側いっぱいまで繰り返されます。この場合、実際の画像は星 1 個のみです。

背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。上記の例にbackground-colorプロパティを追加して、動作を確認してみましょう。

背景画像の繰り返しの指定

background-repeat プロパティは、画像の繰り返し表示の動作を制御するために使用されます。使用可能な値には次のものがあります:

• no-repeat — 背景画像が繰り返されるのを完全に防ぎます。
• repeat-x — 水平方向に繰り返します。
• repeat-y — 垂直方向に繰り返します。
• repeat — デフォルト; 両方の方向に繰り返します

以下の例でこれらの値を試してみましょう。値をno-repeatに設定したため、星が 1 つだけ表示されます。異なる値(repeat-xやrepeat-y)に変えてみて、その効果を確認してみましょう。

背景画像のサイズ指定

先ほどの例では、背景を設定したい要素より画像のほうが大きいため画像の一部しか表示されませんでした。 background-size プロパティを使用して、背景内に収まるように画像のサイズを調整できます。

background-sizeプロパティは、<length> または <percentage> の値をとることができます。

また、次のキーワードを使うこともできます：

• cover —ブラウザーは、アスペクト比を維持したままボックスの領域を完全に覆うように画像の大きさを調整します。 この場合、画像の一部が箱の外に出る可能性があります。
• contain —ブラウザーは、画像がボックス内にちょうど収まるように画像の大きさを調整します。 この場合、画像とボックスのアスペクト比が異なる場合、画像の左右または上下に隙間ができる可能性があります。

次の例では、**<length>**値を使用して先ほどの大きな画像がボックス内におさまる大きさに変更しました。結果として、画像が歪んでいることがわかります。

以下を試してみましょう。

• 背景のサイズをあらわす**<length>**値を変更します。
• **<length>**値を削除し、background-size: coverやbackground-size: containを使うとどうなるかを確認します。
• 画像がボックスより小さい場合は、background-repeatの値を変更して画像を繰り返すことができます。

背景画像の位置の指定

background-position プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。このプロパティでは、ボックスの左上隅を(0, 0)として、水平方向の座標軸(horisontal axis)をx軸(x axis, 複数形は axes）、垂直方向の座標軸(vertical axis)をy軸(y axis)とする座標系にそって画像を配置します。

最も一般的なbackground-positionの値は、2 個の値をとります—水平方向、垂直方向の順で値を指定します。

topやrightなどのキーワードを使用できます (詳しくはbackground-imageページを参照):

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

そして、 <length>および<percentage>を使用できます:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

次のように、キーワードの値を<length>や<percentage>の値と混在させてもかまいません。

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

最後に、4 つの値をとる構文を使って、ボックスのいずれかの端からの距離を示すこともできます。この場合の長さは、その直前の値で指定した位置からの距離（オフセット, offset）です。下の CSS では、背景を上(top)から20px、右(right)から10pxに配置しています。

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

次の例を使い、プロパティの値を変えてボックス内で星を動かしてみましょう。

グラデーション(gradient, 勾配(こうばい) )は、背景に使用する場合には画像と同じようにふるまいます。グラデーションはbackground-imageプロパティを使用して設定されます。

<gradient>データ型の MDN ページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。Web で数多く提供されている CSS グラデーションジェネレーター(例えば "CSS Gradient")を使用して、グラデーションを楽しく試せます。この Web サービスでは、グラデーションを作成したのち、グラデーションを生成するソースコードをコピー&ペーストできます。

以下の例でいろいろなグラデーションを試してみましょう。 1 つめのボックスには、ボックス全体に広がる線形グラデーション(linear gradient)を指定しています。2 つめのボックスには、サイズを設定して(そのために繰り返されている)放射状グラデーション(radial gradinet)を指定しています。

background-imageプロパティにコンマ区切りで複数の画像を指定することで、複数の背景画像を使用することもできます。

これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。

他のbackground-*プロパティも、background-imageと同じ方法でコンマ区切りの値を持つことができます:

background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

プロパティに指定した複数のプロパティ値は、他のプロパティの同じ位置にある値と対応します。上の例で、image1のbackground-repeat値はno-repeatです。では、プロパティごとに値の個数が異なるとどうなるでしょうか？答えは、個数が少ない値が繰り返し使われる、ということです。上の例では、4 つの背景画像がありますが、2 つの background-position の値しかありません。最初の 2 つの位置の値は対応する位置の画像に適用され、その後は繰り返されます。つまり、image3には 1 番目、image4には 2 番目の値がふたたび使われます。

実際に試してみましょう。以下の例には 2 つの画像があります。重ね合わせの順序を確かめるために、どの背景画像を先にするかを変えてみてください。また、他のプロパティを操作して、位置、サイズ、繰り返し方法を変えてみてください。

背景に使用できるもうひとつのオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは, background-attachment プロパティを使用して制御され、次の値を取ることができます:

• scroll: ページ全体のスクロールに応じて要素の背景を移動します。要素のコンテンツがスクロールされた場合には、背景は移動しません。 実際には背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。
• fixed: 要素の背景をビューポート(viewport)に固定します。ページや要素のコンテンツがスクロールされても移動せず、画面上の同じ位置にとどまります。
• local: 要素の背景をその要素自身に対して固定します。要素のコンテンツをスクロールした場合にもそれにあわせて背景が移動します。 local値は、多くの場合にscroll値の挙動が期待どおりではないことから新しく追加されました（他の値は Internet Explorer 4 以降でサポートされますが、localは IE 9 以降のみでサポートされます）。

background-attachment プロパティはスクロールするコンテンツがある場合にのみ効果があります。3 つの値の違いを示すデモ（background-attachment.html）を作成したのでご覧ください（ソースコードも公開しています）。

このレッスンの冒頭で、 background プロパティを使って背景が指定されている場合についてふれました。この一括指定プロパティを使うと、複数のプロパティを一度に設定できます。

複数の背景を使用する場合は、最初の背景に対するプロパティをすべて指定してから、カンマで区切って次の背景を追加します。以下の例では、サイズと位置を伴ったグラデーション、no-repeatと位置指定を伴った背景画像、最後に背景色を指定しています。

背景画像に関する一括指定を書くとき、いくつかのルールを守る必要があります。例えば：

• background-color は最後のコンマの後にのみ指定できます。
• background-sizeの値は、center / 80％のように、background-positionの値の直後に/文字を挟んだ位置でのみ使うことができます。

すべての注意点を確認するには、 background の MDN ページをご覧ください。

テキストを背景画像や背景色の上に配置する際には、閲覧者がテキストを読み取れるだけの十分なコントラストを確保するよう注意する必要があります。画像の上にテキストを配置する場合は、画像が読み込まれない場合でもテキストが読み取れるような背景色も指定する必要があります。

スクリーンリーダーは背景画像を解析できないため、画像は装飾としての役割のみを担うべきです。重要なコンテンツはすべて HTML ページのなかで表現するべきで、背景画像のなかに含めるべきではありません。

ボックスモデルについて学習するとき、枠線(border)がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、枠線をクリエイティブに活用する方法を見ていきます。

通常、CSS で要素に枠線を追加するときは、CSS の 1 行で枠線の色、幅、スタイルを指定する一括指定プロパティを使います。

border:を使用して、ボックスの 4 辺すべてに枠線を設定できます。

.box {
  border: 1px solid black;
}

または、次のように、ボックスの 1 つの辺を対象にすることができます。:

.box {
  border-top: 1px solid black;
}

一括指定で指定した個々のプロパティは次のとおりです：

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

一辺ごとの個別指定については次のようになります：

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

枠線にはさまざまなスタイルを指定できます。以下の例では、ボックスの 4 辺にそれぞれ異なる枠線スタイルを使用しています。枠線の色、幅、スタイルを試して、枠線の動作を確認しましょう。

border-radius一括指定プロパティと、各々の角に対応した個別指定プロパティを使用して、ボックスの角の丸みを実現できます。各プロパティは 2 個の<length>または<percentage>を値として使用できます。最初の値は水平方向の半径(radius)を定義し、2 番目の値は垂直方向の半径を定義します。多くの場合、1 つの値のみを指定して両方向に適用します。

例えば、ボックスの 4 つの角すべてに半径 10px の丸みを持たせるには:

.box {
  border-radius: 10px;
}

または、右上角の水平方向の半径を 1em、垂直方向の半径を 10％ にするには:

.box {
  border-top-right-radius: 1em 10%;
}

以下の例では、はじめに 4 つの角すべてについて角の丸みを設定したのち、右上角を他と異なる値に変更しました。値を変えて試してみましょう。使用できる構文はborder-radius プロパティのページを見て確認してください。

学んだ知識を試すために、背景と枠線を使って次のものを作成してみてください。コード例を出発点として使ってください:

1. ボックスに幅が 5px の黒い実線の境界線を付け、角に半径が 10px の丸みをつけてください。
2. 背景画像を追加し（URL balloons.jpgを使用）、ボックスを覆うようにサイズを変更してください。
3. <h2>に半透明の黒い背景色を指定し、テキストを白にしてください。

このレッスンではかなり多くのことを説明してきましたが、そのなかで背景や枠線をボックスに追加する方法がたくさんあることがわかりました。これまでに説明した機能について詳しく知りたくなったら、各プロパティの MDN ページに目を通してみましょう。これらのページには知識を活用したり強化したりするための使用例が書かれています。

次のレッスンでは、ドキュメントの書字モードが CSS とどのように相互作用するかを説明します。テキストが左から右以外の方向に流れる場合に何が起こるのでしょうか？

• 前のページ
• Overview: Building blocks
• 次のページ