CSSを使って影をつける

2019年2月2日

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

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

関連記事

 

スポンサーリンク

 

 

box-shadowを使う

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

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

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

きらり

きらり

?もっと具体的にどう指定したらいいか教えて~!
結耶

結耶

そうだよね!ちゃんと説明するからね~。

 

上下・左右の指定

.kage-sample

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

 

上と左を指定

.kage-sample

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

 

影の色を変える

.kage-sample

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

 

影をぼかす

.kage-sample

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

 

色をつけてぼかす

.kage-sample

 

きらり

きらり

ぼかした方がやわらかい感じがするね。
結耶

結耶

ぼかしを入れない場合は影がはっきりしていてそれはそれでいいけど、ぼかした方が確かにやわらかい印象にはなるね。

 

影を広げる

.kage-sample

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

 

上下左右に広げる

.kage-sample

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

 

スポンサーリンク

 

きらり

きらり

「上下左右に影を入れる場合は?」って聞こうと思ってたんだ!こうやるといいんだね!
結耶

結耶

あまり四方に影をつけることはないよね(^^;)「囲み枠」とかで使うことはあるけどね。

 

 

使用例

ステッチ風

これはサンプルです

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

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

 

角を丸くする

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


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

 

最後に

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

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

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

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

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