コピペで簡単 CSS で影をつけるボックスシャドウの使用方法

コピペで簡単 CSS で影をつけるボックスシャドウの使用方法

コピペで簡単 CSS で影をつけるボックスシャドウの使用方法を紹介します。
例えば、CSS だけでドロップシャドウ的に影をつけたいときに便利な方法です。

  1. ボックスシャドウをつける方法
    1. ブラウザの対応状況
    2. filter の drop-shadow じゃだめなの?

ボックスシャドウをつける方法

CSS で特定の要素にボックスシャドウをつける方法を紹介します。
ボックスシャドウをつけるには CSS セレクタの box-shadow を使用します。
実際の見た目はこんな感じです。

ボックスシャドウ

ベースの HTML は次の通りです。

<div class="boxshadow">ボックスシャドウ</div>

CSS はこちら。

.boxshadow {
position: relative;
width: 240px;
margin: 0 auto;
padding: 15px;
font-size: 16px;
line-height: 1.3;
text-align: center;
letter-spacing: 0.05em;
background-color: #fff;
border-radius: 8px;
box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

ボックスシャドウだけの記述はこちら。

.dropshadow {
box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

指定している各数値は左から、影の水平方向垂直方向ぼかしの具合ぼかしの広がり(色+透明度)を指定できます。
box-shadow ( 水平 垂直 ぼかしの具合 ぼかしの広がり 色(色+透明度) );

ブラウザの対応状況

CSS セレクタの box-shadow は大体どのブラウザーも対応しているようです。
対応状況はこちらで確認できます。

filter の drop-shadow じゃだめなの?

CSS で影を付ける方法は他にもあります、たとえば filter プロパティの関数 drop-shadow でも影を付けることができます。
こちらは擬似要素を含めて影を付けることができるので、吹き出しのようなデザインに影をつけたい場合は、こちらを選択してもよいかもしれません。
ただ、box-shadow で指定できる inset(外側の影を内側に変更)とぼかしの広がり具合を指定できないのが難点です。
例えば、擬似要素を使った場合に、親要素に box-shadow を使うとこんな感じ。

ボックスシャドウ

そしてこちらが drop-shadow の場合。

ドロップシャドウ

吹き出し下の三角形(擬似要素)に影がついていませんね。
なので、box-shadow で擬似要素にも影をつけたい場合は、三角形に ::before を、影には ::after を使って表現する必要があります。
ちなみに、三角形の作り方はコピペで簡単 CSS で三角形を作る方法で、
吹き出しの作り方はコピペで簡単 CSS で吹き出しを作る方法で紹介しています。

まとめ

コピペで簡単 CSS で影をつけるボックスシャドウの使用方法を紹介しました。
ドロップシャドウで影をつける場合はコピペで簡単 CSS でドロップシャドウをつける方法をご覧ください。

スポンサーリンク

私が続けて読みたい関連記事