【CSS入門】 文字や要素に影を付ける方法

各要素には、box-shadowやtext-shadowを利用して影をつけることができます。

影をつけることで、Webサイトにほんのりとした立体感をもたせることができます。

要素の周囲に影をつける (box-shadow)

box-shadowプロパティを用いると、要素の周囲に対して影をつけることができます。

See the Pen css shadow by Totori (@souki202) on CodePen.

このプロパティは、書き方に種類があります。

p {
    box-shadow: none; /* 影なし */

    box-shadow: 8px 8px 6px 4px #000; /* x軸のずれ y軸のずれ スプレッドの大きさ ぼかしサイズ 色 */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); /* x軸のずれ y軸のずれ ぼかしサイズ 色 */
    box-shadow: 0 0 rgba(0, 0, 0, 0.25); /* 左右の位置 上下の位置 色 */

    box-shadow: 0 0 rgba(0, 0, 0, 0.25), 8px 8px 4px #000; /* 1個目の影, 2個目の影 */

    box-shadow: 0 0 rgba(0, 0, 0, 0.25) inset; /* 最後にinsetを付けると, 要素の中に影ができる */
}

例えば、ぼかしを0にし、スプレッドだけを大きくすると、まるで境界線のようなくっきりした見た目になります。

また、borderと違い、ボックスの大きさに影響を与えません。(borderではそのままだと要素の大きさに影響が出る)

このサイトでも、記事の表示領域の外側などにうっすらと影がついています。濃くしすぎないというのが影を使う点で重要です。

文字に影を付ける (text-shadow)

box-shadowはボックスに対して影を付けましたが、text-shadowはテキストに対して影をつけます。

See the Pen css text-shadow by Totori (@souki202) on CodePen.

プロパティの指定はbox-shadowとほぼ同じですが、insetとスプレッドの指定ができません。

また、色を指定しなかった場合、テキストの色と同じ色の影ができます。

まとめ

影を付けることで、リッチな表現ができるようになります。特にマテリアルデザインでは、影を利用した立体感を付けることが重要となるため、特に多用します。コンテンツの色等に応じた適度な影を見つけてみましょう!