背景と境界線
このレッスンでは、CSS の背景および境界モジュールの機能を使ったクリエイティブな表現方法をいくつか見ていきます。グラデーション、背景画像、角の丸めを加えることを通じて、CSS を使ったスタイル設定の多様な課題に対する解答が得られるでしょう。
| 前提知識: | HTML の基本（ 基本的な HTML の構文を学んでいること）、CSS の値と単位、CSS におけるサイズ設定。 |
|---|---|
| 学習成果: |
|
背景色
background-color プロパティは、要素の背景色を定義します。このプロパティは、有効な <color> 値を受け入れます。 background-color は、要素のコンテンツおよびパディングボックスの下に広がります。
次の例では、さまざまな色の値を使用して、ボックス、見出し、 <span> 要素に背景色を指定しています。
例を編集し、指定された色を、利用可能な <color> の値に置き換えてみてください。
<div class="box">
<h2>背景色</h2>
<p>背景の<span>色</span>を変更してみてください。</p>
</div>
.box {
padding: 0.3em;
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}
span {
background-color: rgb(255 255 255 / 50%);
}
背景画像
background-image プロパティにより、要素の背景に画像を表示することができます。下記の例では、 2 種類のボックスがあります。 1 つはボックスよりも大きな背景画像 (balloons.jpg) があり、もう一方は単一の星の小さな画像 (star.png) があります。
この例は、背景画像に関する 2 つのことを示しています。既定では、大きな画像はボックスに収まるように縮小されず、一部分のみが表示されます。いっぽう、小さな画像はボックスの内側いっぱいまで繰り返されます。この場合、実際の画像は星 1 個のみです。
<div class="wrapper">
<div class="box a"></div>
<div class="box b"></div>
</div>
.wrapper {
display: flex;
}
.box {
width: 200px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.a {
background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
}
.b {
background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
}
背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。
上記の例に background-color プロパティを追加して、動作を確認してみましょう。
背景画像の反復の指定
background-repeat プロパティは、画像の反復表示の動作を制御するために使用されます。使用可能な値には次のものがあります:
no-repeat— 背景画像が反復されるのを完全に防ぎます。repeat-x— 水平方向に反復します。repeat-y— 垂直方向に反復します。repeat— 既定値です。両方の方向に反復します。space— 可能な限り何度も反復し、利用できる空間があれば、画像と画像の間に空間を加えます。round—spaceに似ていますが、余分な空間を埋めるように画像を伸ばします。
以下の例でこれらの値を試してみましょう。値を no-repeat に設定したため、星が 1 つだけ表示されます。異なる値に変えてみて、その効果を確認してみましょう。
<div class="box"></div>
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
}
背景画像のサイズ指定
最初の背景画像の例で使用した balloons.jpg の画像は、背景となる要素よりも大きいためにトリミングされた大きな画像です。この場合、background-size プロパティを使用することで、画像を背景内に収まるようにサイズ調整することができます。
background-size では、画像の水平方向および垂直方向のサイズを指定するために、2 つの <length> または <percentage> 値、あるいは以下のキーワードを指定することができます。
cover— ブラウザーは、アスペクト比を維持したままボックスの領域を完全に覆うように画像の大きさを調整します。 この場合、画像の一部が箱の外に出る可能性があります。contain— ブラウザーは、画像がボックス内にちょうど収まるように画像の大きさを調整します。この場合、画像とボックスのアスペクト比が異なる場合、画像の左右または上下に隙間ができる可能性があります。
background-size の実践
下記の例では、 balloons.jpg の画像を長さの単位と共に使用して、ボックス内に収まるサイズにしました。これにより、画像が歪んでいるのがわかります。
以下を試してみましょう。
- 背景のサイズをあらわす長さの単位を変更しましょう。
- 長さの単位を削除し、
background-size: coverやbackground-size: containを使うとどうなるかを確認しましょう。 - 画像のサイズをボックスより小さくし、
background-repeatの値を変更して画像を繰り返し表示するようにしてください。
<div class="box"></div>
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
background-repeat: no-repeat;
background-size: 80px 10em;
}
背景画像の位置の指定
background-position プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。これは、ボックスの左上端を (0,0) とし、ボックスを水平軸 (x) と垂直軸 (y) に沿って位置指定する座標系を使用します。
メモ:
既定の background-position の値は (0,0) です。
最も一般的な background-position の値は、2 個の値をとります—水平方向、垂直方向の順で値を指定します。top や right などのキーワードが使用できます（詳しくは background-position ページを参照）。
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: top center;
}
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 20px 10%;
}
キーワード値を長さやパーセント値と混在させて指定することも可能です。その場合、最初の値は水平方向の位置を、2 つ目のは垂直方向の位置を参照します。例を示します。
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 20px top;
}
最後に、4 つの値からなる構文を使用して、ボックスの特定の辺から離す距離を示すこともできます。それぞれの値のペアは、オフセット元のボックスの辺と、その辺からのオフセットのサイズを表します。下記コード例では、背景を top から 20px、right から 10px の位置に指定しています。
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: top 20px right 10px;
}
background-position の実践
次の例を使い、プロパティの値を変えてボックス内で星を動かしてみましょう。
<div class="box"></div>
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
background-position: 120px 1em;
}
メモ:
一括指定の background-position を background-position-x および background-position-y の代わりに使用して、それぞれの座標軸の方向の位置を個別に設定することができます。
グラデーションの背景
グラデーション (gradient) は、背景に使用する場合には画像と同じようにふるまいます。グラデーションは background-image プロパティを使用して設定されます。
<gradient> データ型の MDN ページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。
以下の例でいろいろなグラデーションを試してみましょう。 1 つ目のボックスには、ボックス全体に広がる線形グラデーション (linear gradient) を指定しています。2 つ目のボックスには、サイズを設定して（そのため繰り返されている）放射グラデーション (radial gradient) を指定しています。
<div class="wrapper">
<div class="box a"></div>
<div class="box b"></div>
</div>
.wrapper {
display: flex;
}
.box {
width: 400px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.a {
background-image: linear-gradient(
105deg,
rgb(0 249 255 / 100%) 39%,
rgb(51 56 57 / 100%) 96%
);
}
.b {
background-image: radial-gradient(
circle,
rgb(0 249 255 / 100%) 39%,
rgb(51 56 57 / 100%) 96%
);
background-size: 100px 50px;
}
メモ: グラデーションを楽しむ方法の一つとして、CSSGradient.io など、ウェブ上で利用できる数多くの CSS グラデーションジェネレーターを使用するのがおすすめです。グラデーションを作成し、それを生成するソースコードをコピーして貼り付けることができます。
複数の背景画像
1 つの宣言で同時に複数の背景画像を指定することもできます。これを行うには、カンマで区切って複数の background-image 値を指定します。
これを行うと、背景画像が重なり合うことがあります。背景は、最後に記載されている背景画像が積み重ねの最下層となり、その上にコードで前の画像が順に積み重ねられます。
メモ: グラデーションを通常の背景画像と同じように重ね合わせることができます。
他の background-* プロパティも、 background-image と同じ方法でカンマ区切りの値を持つことができます。
background-image:
url("image1.png"), url("image2.png"), url("image3.png"), url("image4.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-*プロパティを追加して、画像の位置、サイズ、反復値を変更してください。 - 3 つ目の
background-imageとしてグラデーションを追加してみてください。
<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {
display: flex;
}
.box {
width: 500px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.box {
background-image:
url("https://mdn.github.io/shared-assets/images/examples/star.png"),
url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
}
スクロール時の背景画像の固定
背景に使用できるもうひとつのオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは、 background-attachment プロパティを使用して制御され、次の値を取ることができます。
scroll: ページ全体のスクロールに応じて要素の背景を移動します。要素のコンテンツがスクロールされた場合には、背景は移動しません。 実際には背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。fixed: 要素の背景をビューポート (viewport) に固定します。ページや要素のコンテンツがスクロールされても移動せず、画面上の同じ位置にとどまります。local: 要素の背景をその要素自身に対して固定します。要素のコンテンツをスクロールした場合にもそれにあわせて背景が移動します。
background-attachment プロパティは、スクロールするコンテンツがある場合にのみ効果を保有するので、3つの値の違いを示すデモを作成しました。3 つの値の違いを示すデモを作成しました。 background-attachment.html（ソースコードはこちら）。
background 一括指定プロパティの使用
このレッスンの冒頭で、 background プロパティを使って背景が指定されている場合についてふれました。この一括指定プロパティを使うと、複数のプロパティを一度に設定できます。
複数の背景を使用する場合は、最初の背景に対するプロパティをすべて指定してから、カンマで区切って次の背景を追加します。以下の例では、サイズと位置を伴ったグラデーション、no-repeatと位置指定を伴った画像の背景、そして背景色を指定しています。
背景画像に関する一括指定を書くとき、いくつかのルールを守る必要があります。例を挙げます。
background-colorは最後のカンマの後にのみ指定できます。background-sizeの値は、background-positionの値の直後に/文字で区切ってのみ、center/80%のように指定できます。
すべての注意点を確認するには、 background の MDN ページを参照してください。
<div class="box"></div>
.box {
width: 500px;
height: 300px;
padding: 0.5em;
background:
linear-gradient(
105deg,
rgb(255 255 255 / 20%) 39%,
rgb(51 56 57 / 100%) 96%
)
center center / 400px 200px no-repeat,
url("https://mdn.github.io/shared-assets/images/examples/big-star.png")
center no-repeat,
rebeccapurple;
}
背景についてのアクセシビリティの考慮
テキストを背景画像や背景色の上に配置する際には、閲覧者がテキストを読み取れるだけの十分なコントラストを確保するよう注意する必要があります。画像の上にテキストを表示させる場合は、画像が読み込まれなかった場合でもテキストが読み取れるように、background-color も同時に指定してください。
スクリーンリーダーは背景画像を解釈できないため、画像は装飾としての役割のみを担うべきです。重要なコンテンツはすべて HTML ページの中で表現するべきで、背景画像の中に含めるべきではありません。
境界線
ボックスモデルについて学習するとき、境界線 (border) がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、境界線をクリエイティブに活用する方法を見ていきます。
通常、CSS で要素に境界線を追加するときは、CSS の 1 行で境界線の色、幅、スタイルを指定する一括指定プロパティを使います。
.box {
border: 1px solid black;
}
または、次のように、ボックスの 1 つの辺を対象にすることができます。
.box {
border-top: 1px solid black;
}
個々のプロパティには一括指定の border-width、border-style、border-color プロパティがあります。
.box {
border-width: 1px;
border-style: solid;
border-color: black;
}
4 つの辺それぞれに幅、スタイル、色の個別指定プロパティもあります。
.box {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
}
メモ: top, right, bottom, left の各方向の境界線を指定するプロパティには、HTML 文書の書字方向 (writing mode) と結びついた論理的プロパティが割り当てられています（書字方向は、左から右、右から左、上から下といったテキストの方向を制御するものです）。これらについては、様々なテキスト方向の扱いをご覧ください。
境界線の実践
境界線にはさまざまなスタイルを指定できます。以下の例では、ボックスの 4 辺にそれぞれ異なる境界線スタイルを使用しています。境界線の色、幅、スタイルを試して、境界線の動作を確認しましょう。
<div class="box">
<h2>境界線</h2>
<p>境界線を変更してみましょう。</p>
</div>
* {
padding: 0.2em;
}
.box {
width: 500px;
background-color: #567895;
border: 5px solid #0b385f;
border-bottom-style: dashed;
color: white;
}
h2 {
border-top: 2px dotted rebeccapurple;
border-bottom: 1em double rgb(24 163 78);
}
角の丸め
border-radius プロパティと、ボックスのそれぞれの角に関連付けられた個別指定プロパティを使用することで、ボックスに角の丸みを追加することができます。各プロパティは 2 個の長さまたはパーセント値を値として使用できます。最初の値は水平方向の半径 (radius) を定義し、2 番目の値は垂直方向の半径を定義します。多くの場合、1 つの値のみを指定して両方向に適用します。
例えば、ボックスの 4 つの角すべてに半径 10px の丸みを持たせるには次のようにします。
.box {
border-radius: 10px;
}
または、右上角の水平方向の半径を 1em、垂直方向の半径を 10% にするには次のようにします。
.box {
border-top-right-radius: 1em 10%;
}
メモ: 上記の境界線プロパティと同様に、これらの border-radius プロパティも割り当てられた論理的 border-radius プロパティもあります。
角丸の実践
以下の例では、はじめに 4 つの角すべてについて角の丸みを設定したのち、右上角を他と異なる値に変更しました。値を変えて試してみましょう。使用できる構文は border-radius プロパティのページを見て確認してください。境界角丸ジェネレーターを使用して、角丸値を出力することができます。
<div class="box">
<h2>境界線</h2>
<p>境界線を変更してみましょう。</p>
</div>
.box {
width: 500px;
height: 110px;
padding: 0.5em;
border: 10px solid rebeccapurple;
border-radius: 1em;
border-top-right-radius: 10% 30%;
}
まとめ
ここでかなり多くのことを取り上げましたが、ボックスに背景や境界線を追加するにはかなり多くのことがあることがお分かりいただけたと思います。ここで説明した機能についてもっと知りたければ、さまざまなプロパティのページを探してみてください。 MDN でほとんどすべてのページに、知識を深めるために試してみる例があります。
次の記事では、背景や境界線のスタイル設定について解説した情報を、どの程度理解し、身につけることができたかを調べるためのテストをいくつかご紹介します。