【CSS】box-shadowプロパティ　影のつけ方について

box-shadowプロパティは要素に影をつける際に使用されます。影をつけることで立体的に見せることができ、デザインの幅も広がります。

Content

box-shadowプロパティの使い方

box-shadowプロパティの基本的な使い方は以下の通りです。

(セレクタ) {
box-shadow: 〇〇px(左右の向き) 〇〇px(上下の向き) 〇〇px(ぼかし) 〇〇px(広がり) 色内側;
}

値は全部で6つ設定できます。1つずつ説明していきます。

はじめの2つの値では影が伸びる方向と距離を指定します。この設定は必須なので必ず設定しましょう。左右の向きは正の値を設定すると右方向、負の値を設定すると左方向に影が伸びます。上下では正の値で下方向、負の値で上方向になります。下の例を見てください。

See the Pen
by そーたろう (@soh-files)
on CodePen.

上の赤色の四角では値に「5px 10px」を設定しているため、右方向に5px、下方向に10px影が伸びています。下の青色の四角では値に「-5px -10px」を設定しているため、左方向に5px、上方向に10px影が伸びています。このように影の方向と距離を指定することができます。

box-shadowプロパティで設定する影の色は自由に変更することができます。色はカラーネーム、カラーコード、RGBカラーモデルのいずれかで記述します。色の指定方法については別の記事でくわしく解説していますので、合わせてご覧ください。

See the Pen
box-shadow -2 by そーたろう (@soh-files)
on CodePen.

上の例では影の色を緑色にしています。上下左右の向きは「10px 10px」の指定をしているので、右下の方向に緑色の影ができています。

上下左右に伸びた影はぼかすことも可能です。下の例を見てください。

See the Pen
box-shadow -3 by そーたろう (@soh-files)
on CodePen.

右方向、下方向にそれぞれ10pxずつ伸ばした影に20pxのぼかしをつけています。

左右の向き、上下の向きにそれそれ「0px」を指定して、ぼかしをつけると要素を囲むようにぼかしをつけることができます。

影の広がりを指定することで要素のサイズを変えることなく、影のサイズのみ大きくしたり、小さくしたりすることができます。下の例を見てください。

See the Pen
box-shadow -4 by そーたろう (@soh-files)
on CodePen.

上の四角では左右の向きで「0px」が指定されているため左右には影はできないはずですが、広がりの値を10pxに指定しているため左右に10pxずつ影が伸びています。

下の四角も左右の向きを「0px」に指定していますが、広がりを-10pxに指定しているため左右の影が10pxずつ小さくなっています。

「ぼかしは設定しないけど、広がりは設定したい」というときにぼかしの値を書かずに「10px 10px 20px」というように設定してしまうと最後の20pxはぼかしの値として認識されます。広がりを設定したい場合には、必ず4つの値を記述し、不要な値については「0px」を指定するようにしましょう。

通常要素の影を指定すると、要素の外側に影ができますが、これを内側にすることも可能です。下の例を見てください。

See the Pen
box-shadow -5 by そーたろう (@soh-files)
on CodePen.

どちらの四角も上下左右に10pxのぼかしが入るようにしています。上の四角は通常状態なので要素の外側に広がっています。下の四角では値に「inset」を指定しているため、四角の内側に影が広がっています。

今回はbox-shadowプロパティで要素に影をつける方法を解説しました。影をつけることでボタンなどの要素を立体的に見せたり、浮き上がったように見せることができて、デザインの幅が広がります。いろいろ試しながら覚えていきましょう。