CSS3のbox-shadowでボックス要素に立体的な影をつける方法

Web制作

2016年06月22日

CSS3プロパティの連載記事

CSSの使い方について解説する連載です。今回はCSS3で追加されたプロパティ、box-shadowです。ボックス要素に立体的な影をつけることができるので、表現の幅を広げることができます。

box-shadowの指定方法

box-shadowを指定するには、下のように記述します。

box-shadow: 横方向の距離 縦方向の距離 (ぼかし) (広がり) (影の色) (影の向き)

必須なのは「横方向の距離」と「縦方向の距離」の2つで、他の値は省略することができます。

box-shadowの具体例

box-shadowを使った例を見ていきましょう。

縦横の距離のみ指定

「横方向の距離」と「縦方向の距離」、必須の2つだけを指定した場合です。

box-shadow: 10px 10px;

01

上の例では、影が右方向と下方向にできていました。左方向や上方向に影をつくりたい場合は、マイナスの値を指定してください。

ぼかし

上記に加えて、「ぼかし」も使った場合です。

box-shadow: 10px 10px 10px;

02

縦横の距離を0pxにした場合は、下のようになります。

box-shadow: 0px 0px 10px;

03

広がり

広がりを指定した場合です。

box-shadow: 5px 5px 0px 5px;

04

「広がり」だけを指定した場合は、下のように四方向に広がります。

box-shadow: 0px 0px 0px 5px;

05

影の色

影の色を変更することも可能です。指定しない場合は、黒でつくられます。

box-shadow: 0px 0px 0px 5px #0000ff;

06

RGBaを使うことで、透明度(アルファ値)を指定することも可能です。

影の向き(inset)

デフォルトでは影はボックスの外側にできますが、「影の向き」を指定するとボックスの内側に影がつくれます。

box-shadow: 0px 0px 0px 5px #111 inset;

07

外側にも内側にも影を作りたい場合は、半角カンマで区切って下のように指定します。

box-shadow: 0px 0px 0px 5px #111, 0px 0px 0px 5px #111 inset;

08

あとがき

CSS3のbox-shadowプロパティの使い方についてご紹介しました。CSSのデザインの幅が広がるので、上手く利用していきましょう。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。