CSSを使って影をつける
よくページの装飾やサイトのカスタマイズなどで『影』をつけたりすると思います。
ボックスや見出し、画像などに影をつけられるので覚えるとさまざまなところで使えます。
なので今回はボックスや画像などに影をつける方法をご紹介します。
[toc]
box-shadowを使う
ボックスや画像などに影をつけるには『box-shadow』を使います。
※値は半角スペースで区切る
きらり
結耶
上下・左右の指定
|
1 2 3 |
.kage-sample { box-shadow:5px 5px; } |
上記のように値を二つ指定すると下と右に黒い影が入ります。
上と左を指定
|
1 2 3 |
.kage-sample { box-shadow:-5px -5px; } |
※最初の値に「 – (マイナス)」をつけると上、2つ目の値に「 – 」をつけると左に影が表示されます。
影の色を変える
|
1 2 3 |
.kage-sample { box-shadow:5px 5px orange; } |
影の位置とカラー名(または#6ケタのカラーコード)を指定すると影の色を変えることができます。
影をぼかす
|
1 2 3 |
.kage-sample { box-shadow:5px 5px 5px; } |
※3つ目の値が影をぼかす指定になります。(下右 5pxの影に 5pxのぼかしが入ります。)
色をつけてぼかす
|
1 2 3 |
.kage-sample { box-shadow:5px 5px 5px orange; } |
きらり
結耶
影を広げる
|
1 2 3 |
.kage-sample { box-shadow:5px 5px 0 5px; } |
※4つ目の値を指定すると影が広がります。
(下と右の影に、ぼかし0(なし)にして、4つ目 5pxと指定して影を広げています。)
上下左右に広げる
|
1 2 3 |
.kage-sample { box-shadow:0 0 0 5px; } |
※上下・左右・ぼかしを「0」にして、4つ目の値を指定すると上下左右に影をつけることができます。
きらり
結耶
使用例
ステッチ風
当サイトのサイドバーの見出しでも使っていますが、 こんな感じの見出しを見たことあると思います。
box-shadowを使うとこんなステッチ風にすることができます。
|
1 2 3 4 5 6 7 8 9 10 |
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; /*文字色*/ } |
角を丸くする
角を丸くする場合は『border-radius』を追加してください。
https://kirari-yums.net/2018/12/19/cssを使って画像を丸く表示...※上記記事では『border-radius』の指定方法について解説しています。
『border-radius』は画像だけではなくボックスや見出しなどでも使えますので参考にしてください。
最後に
今回は影をつける『box-shadow』について書いてみました。
みなさんもサイトのカスタマイズや見出し、画像などに「影をつけたい」「色やぼかしを入れたいけどどこを変えればいいかわからない」という人もいると思います。
『box-shadow』はいろんな要素に使えますので、覚えておくと便利だと思います。
ぜひこの記事を参考に自分のサイトや記事に影をつけてみてくださいね。
結耶(ゆうや)
2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています！
多発性硬化症(MS)という難病と闘っています。