
box-shadow(ボックスシャドウ)はもう古い?CSSで「影(シャドウ)」を付ける方法
長い間Webデザイナーが愛してやまないものの1つに「box-shadow(ボックスシャドウ)」があります。
Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。
box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。
しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。
そこで本稿では、CSS新時代の影の落とし方について、考えてみることにしましょう。
いろんなところで活躍した「box-shadow(ボックスシャドウ)」
box-shadowプロパティは、ボックスに1つ、または複数の影を付ける際に使用するもので、画像処理ソフトを使ってスライスを作らなくても、コードだけで影を落とすことができるので、頻繁に活用している方もいるでしょう。
ここで、box-shadowの使い方をおさらいしておきましょう。
このプロパティでは、例えば以下のように影を指定します。
1. box-shadow: 10px 10px;
2. box-shadow: 10px 10px 10px rgba(0,0,0,0.6);
3. box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.6);
4. box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.6) inset;
通常、影は2~4つの長さで定義されます。また、任意で色やinsetキーワードを追加することもできます。
insetを指定すると、影がボックスの外側ではなく、内側で落とすことができるようになります。長さの指定は省略すると0となり、色の指定は省略するとブラウザの規定値となります。複数の影を指定する場合には、カンマ区切りで影をリスト形式で並べます。
四角形はOK!そのほかの図形には影を上手く落とせない?
box-shadowは短いコードで影を生成することができるので便利ですが、いくつか予期せぬ問題点も発生しています。
例えば、透過PNGにbox-shadowで影を落とす場合です。
box-shadowはあくまでもボックス要素に影を落とすためのプロパティなので、以下のように、画像の周りに上手く影が付きません。
また、SVGの登場で、Web環境にベクターデータを持ち込むことも、次第に増えてきました。
こちらも同様に、四角形であればボックス要素とぴったり当てはまることも多いので、そのままbox-shadowで影を落とせばよいのでしょうが丸や三角形といった、そのほかの図形には四角い影が付いてしまうのです。
- W3C
- W3Cは、World Wide Web Consortiumの略称で、ダブリュー・スリー・シーと呼ばれています。WWWコンソーシアム、またはワールドワイドウェブコンソーシアムと表記されることが多く、国際的な非営利団体です。主に、WWWと呼ばれるウェブ上で利用される技術の標準化を進めています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング