知識を取り込み、そして発信する
ここでは、要素の背景や枠線に関するCSSを扱います。
文字そのものを整えるテキスト装飾に対して、背景や枠線は要素の領域をどのように見せるかを調整するためのプロパティです。
背景色や画像、角の丸みや影を使うことで、情報のまとまりや視線の流れを視覚的に伝えられるようになります。
なお、これらのプロパティは要素の表示形式によって見た目が変わる場合があります。
以降のコード例では、ブロック要素を使って確認します。
background-imageは要素の背景に画像を表示するプロパティです。
装飾的な模様を敷いたり、ヒーローエリアのように印象的なビジュアルを配置したりと、デザインの幅を大きく広げることができます。
構文
セレクタ{
background-image:url(画像のURL);
}
background-imageではurlを使って画像ファイルの場所を指定します。
1つの画像だけでなく、カンマ区切りで複数の画像を重ねて指定することもできます。
コード例
<p class="image01">背景</p>
<p class="image02">背景</p>.image01{
background-image: url(../img/flower.png);
}
.image02{
background-image: url(../img/flower.png);
width: 32px;
height: 29px;
font-weight: bold;
color: #ff0000;
text-align: center;
line-height: 29px;
}出力例
背景
背景
出力例の1つ目はbackground-imageのみを指定した場合です。
要素の高さが文字サイズ分しかないため、背景画像がその範囲内で繰り返し表示されています。
一方で 2つ目はbackground-imageのみではなく、文字に対するプロパティや値を指定した場合です。
画像サイズと同じサイズを指定しているため、単一の画像のみが配置されています。
さらに背景画像を指定しても文字は活かされるため、文字に対するプロパティも反映されます。
background-imageは「画像を置く」ものではなく、「要素の背景として敷く」ものです。 そのため、background-imageは要素のサイズに依存して表示されます。 要素のサイズを指定しない場合は文字サイズ分しか高さを持たず、 widthやheightを指定すると、そのサイズに合わせて背景画像が表示されます。
背景画像は、そのまま指定すると繰り返し表示されたり、要素に対して不自然な大きさになることがあります。
そこで意図した表示をさせるためにbackground-repeatとbackground-sizeを使用します。
背景画像をどのように並べ、どの大きさで表示するかを制御するためのプロパティです。
background-repeatプロパティは画像の繰り返しに関する指定を値によって制御します。
構文
セレクタ{
background-repeat:値;
}
値は代表的な3つのみ紹介します。
no-repeatで繰り返さずに1回のみ使用、repeat-xで横方向に繰り返し、repeat-yで縦方向に繰り返しをさせる値となります。
コード例
<p class="norepeat">背景画像を繰り返しません。</p>
<p class="repeatx">背景画像を横方向のみに繰り返します。</p>
<p class="repeaty">背景画像を縦方向のみに繰り返します。</p>.norepeat{
background-image: url(../img/flower.png);
background-repeat: no-repeat;
}
.repeatx{
background-image: url(../img/flower.png);
background-repeat: repeat-x;
width: 100%;
}
.repeaty{
background-image: url(../img/flower.png);
background-repeat: repeat-y;
height: 4rem;
}出力例
背景画像を繰り返しません。
背景画像を横方向のみに繰り返します。
背景画像を縦方向のみに繰り返します。
このように背景画像の繰り返しを制御することができます。
可変要素であればrepeat-xやrepeat-yが役立つと思います。
background-sizeプロパティは画像のサイズに関する指定を値で行います。
構文
セレクタ{
background-size:値;
}
値は代表的な2つのみ紹介します。
containで幅と高さの両方が背景配置領域内に収まるように、縦または横比を維持しながら、イメージを最大サイズまで拡大し、coverで幅と高さの両方が背景配置領域を完全に覆うように、組み込みの縦横比を維持しながら、イメージを最小サイズまで縮小します。
コード例
<p class="contain">背景画像の拡大</p>
<p class="cover">背景画像の縮小<p>.contain{
background-image: url(../img/flower.png);
background-size: contain;
}
.cover{
background-image: url(../img/flower.png);
background-size: cover;
}出力例
背景画像の拡大
背景画像の縮小
このようにbackground-sizeを使うことで、背景画像を要素の大きさに合わせて拡大・縮小できます。
backgroundは、背景に関する複数のプロパティを1行でまとめて指定できるショートハンドプロパティです。
構文
セレクタ{
background:値;
}backgroundの値には、background-color・background-image・background-repeat・background-position・background-sizeなど、複数のプロパティを1行でまとめて指定できます。
コード例
<p class="background1">背景色と画像を繰り返しなしで位置を指定します。</p>
<p class="background2">背景色をいったん指定して、改めて画像を繰り返しなしで位置を指定します。.background1{
background: #faaafb url(../img/flower.png) center no-repeat;
width: 200px;
padding: 10px;
}
.background2{
background-color: #faaafb;
width: 200px;
padding: 10px;
}
.background2{
background: url(../img/flower.png) center no-repeat;
}出力例
背景色と画像と位置を指定します。
背景色をいったん指定して、改めて画像を繰り返しなしで位置を指定します。
出力例の1つ目はbackgroundで、色・画像・場所・繰り返しなしを指定しました。
2つ目は同じ結果を導こうと、一度背景色を指定して、再度不足していた値をbackgroundで指定しました。
ところが背景色がなくなってしまい、backgroundで指定したものだけ反映されました。
backgroundのショートハンドを使うと、指定していない背景関連の値は初期値に戻ります。
そのため、背景色を使いたい場合は、後から指定したセレクタのbackgroundに含める必要があります。
border-radiusは、要素の角を丸くするプロパティです。
構文
セレクタ{
border-radius:値;
}border-radiusの値は数値を大きくするほど、角の丸みが強くなります。
コード例
<p class="border-radius1">枠線なしで角を丸くします。</p>
<p class="border-radius2">枠線込みで角を丸くします。</p>.border-radius1{
background-color: #faaafb;
width: 200px;
padding: 5px;
box-sizing: border-box;
border-radius: 10px;
}
.border-radius2{
background-color: #faaafb;
width: 200px;
padding: 5px;
box-sizing: border-box;
border: 3px solid #ff0000;
border-radius: 10px;
}出力例
枠線なしで角を丸くします。
枠線込みで角を丸くします。
出力例の1つ目は枠線がない状態で角丸にしました。
2つ目は枠線がある状態で角丸にしました。
プロパティ名にはborderと銘打たれてますが、実際はborderがなくとも要素に角丸を作ることができます。
ボタンやカードUIなどでよく使われ、柔らかい印象を与えたい場合に効果的です。
box-shadowは、要素全体に影を付けるプロパティです。
構文
セレクタ{
box-shadow: 横方向（値） 縦方向（値） ぼかし半径（値） 色;
}
box-shadowの値には、影の位置やぼかし、色を指定します。
また、影は複数指定することもできますが、ここでは基本的な使い方を確認します。
コード例
<p class="box-shadow1">右下に向かって影を付けます。</p>
<p class="box-shadow2">左上に向かって影を付けます。</p>.box-shadow1{
background-color: #faaafb;
width: 200px;
padding: 5px;
box-sizing: border-box;
box-shadow: 5px 5px 5px #0000ff;
}
.box-shadow2{
width: 200px;
padding: 5px;
box-sizing: border-box;
border: 3px solid #ff0000;
border-radius: 10px;
box-shadow: -5px -5px 5px #0000ff;
}出力例
右下に向かって影を付けます。
左上に向かって影を付けます。
1つ目は右に5px、下に5pxずらした場所に5pxのぼかしを付けた影を追加しました。
2つ目は負の数値を使って、左に5px、上に5pxずらした場所に5pxのぼかしを付けた影を追加しました。
ぼかしの値は大きくすればぼかしが強くなり、小さくすればぼかしが弱くなります。
このように影の位置・ぼかし・色を指定することで、要素に立体感や奥行きを与えられます。
また、text-shadowと違い、要素そのものに影が付く点が大きな違いです。
clip-pathは、要素の表示される範囲を指定した形状で切り抜くためのCSSプロパティです。
border-radiusが四角形をベースに角を丸めるのに対し、clip-pathは円形や四角形など、より自由な形で要素の見た目を加工できます。
なお、clip-pathは要素の配置や回り込みには影響せず、見た目のみを変更する装飾用のプロパティです。
構文
セレクタ{
clip-path: 形状関数（値）;
}clip-path には、切り抜く形状を指定する関数を指定します。
| 値 | 形状 | 補足 | 使用頻度 |
|---|---|---|---|
| circle() | 円形に切り抜く | 画像を丸く見せたい場合によく使われ、指定方法もシンプル | 高 |
| inset() | 四角形を内側から切り抜く | 余白指定の感覚で扱えるため、最も理解しやすい | 高 |
| ellipse() | 楕円形に切り抜く | circle の応用だが、実務では使用場面は限定的 | 中 |
| polygon() | 多角形で自由な形状を指定 | 細かい座標指定が必要で、難易度が高い | 低 |
| path() | SVGパスによる切り抜き | SVGの知識が前提となり、特殊用途向け | 低 |
形状には円形や四角形などがあり、用途に応じて使い分けます。
ここでは、実務でよく使われるcircle()とinset()を確認します。
コード例
<p class="circle"></p>
<p class="inset"></p>.circle{
background-color: #faaafb;
width: 100px;
clip-path: circle(50%);
}
.inset{
background-color: #faaafb;
width: 100px;
clip-path: inset(10px 20px);
}出力例
1つ目はcircle(50%)を指定し、要素を円形に切り抜いています。
2つ目はinset(10px 20px)を使い、上下から10px、左右から20pxの距離を指定して四角形に切り抜いています。
このようにclip-pathを使うことで、画像や要素の形状を自由に加工できます。
border-radiusでは対応できない形状を扱える点が、clip-pathの大きな特徴です。
また、要素自体のサイズが変わるわけではなく、表示されない部分が切り取られるだけという点にも注意が必要です。