スポンサーリンク

CSSを使って影をつける

2019年2月2日HTML・CSS

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

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

スポンサーリンク

box-shadowを使う

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

セレクタ { box-shadow: (上下)  (左右)  (ぼかし)  (広がり)  (色) ; }

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

きらり
きらり
?もっと具体的にどう指定したらいいか教えて~!
結耶
結耶
そうだよね!ちゃんと説明するからね~。

上下・左右の指定

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

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

上と左を指定

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

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

影の色を変える

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

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

影をぼかす

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

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

色をつけてぼかす

.kage-sample
.kage-sample {
    box-shadow:5px 5px 5px orange;
}
きらり
きらり
ぼかした方がやわらかい感じがするね。
結耶
結耶
ぼかしを入れない場合は影がはっきりしていてそれはそれでいいけど、ぼかした方が確かにやわらかい印象にはなるね。

影を広げる

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

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

上下左右に広げる

.kage-sample
.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』はいろんな要素に使えますので、覚えておくと便利だと思います。

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

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。