こんにちは。いつか100メートル泳げるようになりたいサイトウです。
たくさんに人に見てもらうサイトを作るため、CSSを学んでいる方も多いことと思います。CSSを使うと華やかさが加わって、素敵なホームページになりますよね。
そんなCSSのひとつ「box-shadow」プロパティをご存じですか？要素に影をつけ、立体的に見せるというプロパティです。影をつけるなんて、なかなか使えそうな装飾ですよね。
大丈夫です。少し練習すれば簡単にコツをつかめますよ！
今回は、【box-shadow】の
・応用的な使い方
について説明します。CSSを学び始めたばかりの方や、オリジナルなかっこいい装飾をしたい方は是非読んでみてください。おすすめの強力な助っ人ツールもご紹介しますので、安心してくださいね。
目次
【box-shadow】とは
【box-shadow】の読み方
「ボックスシャドウ」と読みます。皆さんご存じの通り「box」は箱、「shadow」は影という意味です。
実は、boxには「箱型に仕切られているもの」という意味もあります。box-shadowプロパティではこちらの意図で使われているようですね。
【box-shadow】の説明
要素全体に影をつけて立体感をだし、要素そのものが浮き上がったり凹んだりしているように見せることができます。美術のデッサンで影をつけるのと同じです。
影の方向やぼかし具合、色などを組み合わせて、影を自由にカスタマイズすることができます。初期値はnoneです。
【box-shadow】で利用できる値
【box-shadow】では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| offset-x | 水平方向の影の距離を表します。数値にpxやremなどの単位をつけて指定します。必須項目です。 |
| offset-y | 垂直方向の影の距離を表します。数値にpxやremなどの単位をつけて指定します。必須項目です。 |
| blur-radius | 影のぼかし具合を表します。数値にpxやremなどの単位をつけて指定します。指定は任意です。 |
| spread-radius | 影を拡張させることができます。指定は任意です。 |
| color | カラーコードやカラーネーム、rgbで色の指定をします。指定は任意です。 |
| inset | 影をボックスの内側（要素の内側）につけることができます。指定は任意です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 3.5～対応 |
| Internet Explorer | 9～対応 |
| Opera | 11.5～対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
【box-shadow】の基本的な使い方
【box-shadow】の使い方
コードの書き方は以下の通りです。
|
1 2 3 |
h1 { box-shadow:3px 3px 5px -2px blue; } |
CSSの基本どおり、「セレクタ・プロパティ・値」の順に書きます。値の部分に数値がずらりと並んでいてわかりにくいですね。
の順に書かれています。影を内側にしたいときは最後にinsetと記入すればOKです。では、ひとつずつ見ていきましょう。
プロパティのすぐ後ろの２つの数値が、offset-xとoffset-yの値です。offset-xは横、offset-yは縦の影の距離を表します。数学のグラフ「x軸とy軸」をイメージすると覚えやすいですよ。
offset-xに正の値が指定された場合、影は要素の右側に表示されます。負の値の場合は、影は左方向に延びます。
offset-yに正の値が指定された場合、影は要素の下側に表示されます。負の値の場合は、影は上方向に延びます。
See the Pen
QWKMvWM by F Saito (@kero23)
on CodePen.
See the Pen
qBaXmBG by F Saito (@kero23)
on CodePen.
また、どちらも数値が大きくなるほど影が要素から遠くなります。影を要素から遠くに表示させると、ぽっかり空中に浮いたように見えます。
See the Pen
ExgvmaG by F Saito (@kero23)
on CodePen.
逆に影を要素付近に表示させると、画面に張り付いているように見えます。
See the Pen
BaLdRNp by F Saito (@kero23)
on CodePen.
値が大きくなるほど、影の面積は広くなりぼかしが大きくなります。また影の色も薄くなります。
負の値は指定できません。値が指定されていない場合は影の縁にぼかしが入らないため、くっきりとした影が入ります。
See the Pen
eYdEWNj by F Saito (@kero23)
on CodePen.
カラーコードやカラーネーム、rgbで色の指定をします。サイトのキーカラーや雰囲気に合わせて色を決めましょう。
insetを指定すると、影が要素の内側に入ります。そのため、要素が凹んだように見えます。浮き上がったように見せたいときにはinsetを指定する必要はありません。
「コードを書いてみたが、思っていたのと違う・・・」「どれくらい影をぼかしたら良いかよくわからない」と困ってしまった時は、box-shadowジェネレーターがおすすめです。影の装飾をする際の助っ人ツールとして、多くの人に使われています。
ブラウザで検索するといくつかbox-shadowジェネレーターがヒットするので、自分が使いやすいものをさがしてみましょう。カラーピッカーのように数値を変化させて、影の状態を目で確認することができるので、とても便利ですよ！お守り代わりに覚えておいてくださいね。
【box-shadow】と類似する要素との違い
box-shadowと類似したものに「drop-shadow」があります。どちらも同じように要素に影をつけることができるのですが、
- box-shadow・・・要素全体の背後に長方形の影を作る
- drop-shadow・・・画像そのものの形に合った影を作る
という違いがあります。状況にあわせて使い分けてください。詳しく知りたい方はぜひ調べてみましょう。
【box-shadow】の応用的な使い方
実は、影はひとつしか表示できないわけではありません。複数の影をつけることが可能です。
See the Pen
rNMzmVZ by F Saito (@kero23)
on CodePen.
このように色とぼかし具合の違う影を同時につけることができます。あえていくつも影を表示させてみるという表現もおもしろいですよね。
まとめ
いかがでしたか？今回はbox-shadowプロパティをご紹介しました。
影の方向やぼかし具合といった複数の要因を組み合わせることで、表現の幅がぐんと広がります！最初はよくわからなくても、試しているうちになんとなくコツがつかめてくるはずです。焦らずに少しずつ前に進んでいきましょう。
この記事が少しでもお役に立てたらうれしいです。
参考文献：2019年 SBクリエイティブ株式会社｜1冊ですべて身につくHTML&CSSとWebデザイン入門講座【著】Mana
