CSSを使って影をつける

2019年2月2日2019年12月21日

よくページの装飾やサイトのカスタマイズなどで『影』をつけたりすると思います。
ボックスや見出し、画像などに影をつけられるので覚えるとさまざまなところで使えます。

なので今回はボックスや画像などに影をつける方法をご紹介します。

box-shadowを使う

ボックスや画像などに影をつけるには『box-shadow』を使います。

※値は半角スペースで区切る

上下・左右の指定

.kage-sample {
    box-shadow:5px 5px;
}

上記のように値を二つ指定すると下と右に黒い影が入ります。

上と左を指定

.kage-sample {
    box-shadow:-5px -5px;
}

※最初の値に「 – (マイナス)」をつけると上、2つ目の値に「 – 」をつけると左に影が表示されます。

影の色を変える

.kage-sample {
    box-shadow:5px 5px orange;
}

影の位置とカラー名(または#6ケタのカラーコード)を指定すると影の色を変えることができます。

影をぼかす

.kage-sample {
    box-shadow:5px 5px 5px;
}

※3つ目の値が影をぼかす指定になります。(下右 5pxの影に 5pxのぼかしが入ります。)

色をつけてぼかす

.kage-sample {
    box-shadow:5px 5px 5px orange;
}

影を広げる

.kage-sample {
    box-shadow:5px 5px 0 5px;
}

※4つ目の値を指定すると影が広がります。
(下と右の影に、ぼかし0(なし)にして、4つ目 5pxと指定して影を広げています。)

上下左右に広げる

.kage-sample {
    box-shadow:0 0 0 5px;
}

※上下・左右・ぼかしを「0」にして、4つ目の値を指定すると上下左右に影をつけることができます。

使用例

ステッチ風

当サイトのサイドバーの見出しでも使っていますが、 こんな感じの見出しを見たことあると思います。
box-shadowを使うとこんなステッチ風にすることができます。

h4 {
    margin:20px 0;    /*外側の余白*/
    padding:10px 15px;    /*内側の余白*/
    background:#a61919;    /*背景色*/
    border:2px dashed #ffffff;    /*枠線の太さ 線種 色*/
    box-shadow:0 0 0 5px #a61919;    /*影(上下 左右 ぼかし 広がり 色)*/
    font-size:20px;    /*文字の大きさ*/
    font-weight:bold;    /*太文字*/
    color:white;    /*文字色*/
}

※セレクタに『h4』を指定していますが、あくまで一例です。

角を丸くする

角を丸くする場合は『border-radius』を追加してください。

※上記記事では『border-radius』の指定方法について解説しています。
『border-radius』は画像だけではなくボックスや見出しなどでも使えますので参考にしてください。

最後に

今回は影をつける『box-shadow』について書いてみました。

みなさんもサイトのカスタマイズや見出し、画像などに「影をつけたい」「色やぼかしを入れたいけどどこを変えればいいかわからない」という人もいると思います。
『box-shadow』はいろんな要素に使えますので、覚えておくと便利だと思います。

ぜひこの記事を参考に自分のサイトや記事に影をつけてみてくださいね。