統計データマーケティングお役立ちレポート全てのカテゴリを見るferret記事をさがすCMS・Webサイト制作CSSbox-shadowはもう古い?CSS新時代の「影の落とし方」box-shadowはもう古い?CSS新時代の「影の落とし方」2019年01月29日CSSプログラミングスキル会員登録する長い間Webデザイナーが愛してやまないものの1つに「box-shadow」があります。Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。そこで本稿では、CSS新時代の影の落とし方について、考えてみることにしましょう。資料を無料ダウンロードいろんなところで活躍した「box-shadow」box-shadowプロパティは、ボックスに1つ、または複数の影を付ける際に使用するもので、画像処理ソフトを使ってスライスを作らなくても、コードだけで影を落とすことができるので、頻繁に活用している方もいるでしょう。ここで、box-shadowの使い方をおさらいしておきましょう。このプロパティでは、例えば以下のように影を指定します。inset;通常、影は2~4つの長さで定義されます。任意で色やinsetキーワードを追加することもできます。insetを指定すると、影がボックスの外側ではなく、内側で落とすことができるようになります。長さの指定は省略すると0となり、色の指定は省略するとブラウザの規定値となります。複数の影を指定する場合には、カンマ区切りで影をリスト形式で並べます。四角形はOK!そのほかの図形には影を上手く落とせない?box-shadowは短いコードで影を生成することができるので便利ですが、いくつか予期せぬ問題点も発生しています。透過PNGにbox-shadowで影を落とす場合です。box-shadowはあくまでもボックス要素に影を落とすためのプロパティなので、以下のように、画像の周りに上手く影が付きません。SVGの登場で、Web環境にベクターデータを持ち込むことも、次第に増えてきました。こちらも同様に、四角形であればボックス要素とぴったり当てはまることも多いので、そのままbox-shadowで影を落とせばよいのでしょうが丸や三角形といった、そのほかの図形には四角い影が付いてしまうのです。drop-shadow()です。filterプロパティのdrop-shadow()は、W3Cが勧告したフィルターエフェクトモジュールのうちの1つで、一見するとbox-shadowプロパティに似ています。実際にはbox-shadowとdrop-shadow()には注目すべき違いがあります。場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選|ferretまずは、基本的な使い方について確認していきましょう。drop-shadow()の指定は基本的にはbox-shadowと同じように使ってあげればOKです。括弧の中に指定する値は、box-shadowと同じです。以下のように指定していきます。rgba(0,0,0,0.6));ただし、insetキーワードはこのフィルターでは指定できないことに留意しておく必要があります。drop-shadow()は、PNG画像の透過性やSVG図形にも対応しているので、オブジェクトの形に沿って影を落とすことができます。Explorerを除く最新ブラウザのほぼ全てでCSSフィルターを使えるようになっています(カバー率は2017年11月現在90.38%)。drop-shadow()は、似て非なるものです。ぼかしの長さの計算方法や、insetキーワードの使用可否、影の見え方などが異なりますので、ブラウザを使いながら見え方を確認してみるといいでしょう。drop-shadow()をご紹介しましたが、CSSフィルターはPhotoshopを使わずとも実に様々な効果を演出することができます。複数のフィルターを組み合わせる場合のほとんどはフィルターの順序が問われることはありませんが、基本的にフィルターはCSSの行番号の順番に適用されるので、中には他のフィルターを上書きしてしまうものもあります。フィルターはアニメーションにも対応しています。アニメーションを上手に使いこなせば、非常に面白い効果を演出することができます。キーフレーム50%のところで影を付けたり、写真をセピア調に変えてドラマチックに演出したりすることも可能です。drop-shadow()を覚えておけば、状況に応じて使いわけることができるようになります。実際のところ、前者と後者では役割が違います。適材適所で使いこなすことができれば、よりリッチな表現を演出することができるでしょう。CSSフィルターは、影だけではなく、明度や彩度も気軽に変えられることのできる注目技術です。この機会にぜひマスターしてみてはいかがでしょうか。Consortiumの略称で、ダブリュー・スリー・シーと呼ばれています。WWWコンソーシアム、またはワールドワイドウェブコンソーシアムと表記されることが多く、国際的な非営利団体です。WWWと呼ばれるウェブ上で利用される技術の標準化を進めています。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Consortiumの略称で、ダブリュー・スリー・シーと呼ばれています。WWWコンソーシアム、またはワールドワイドウェブコンソーシアムと表記されることが多く、国際的な非営利団体です。WWWと呼ばれるウェブ上で利用される技術の標準化を進めています。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るCMS・Webサイト制作CSSプログラミングプログラミングスキル会員登録するおすすめ記事ADグロースハックソフトバンクグループのサイバー大学がチャットコマース「ジールス」を導入。ノーリスクでリード獲得件数を増加させた3つの施策とはグロースハックADビジネスビジネスチャットだけでは限界かも......。会社の“成長期”に改めて考えたい情報共有の仕組みビジネスADマーケティングオートメーション(MA)「Pardotユーザー会」運営リーダーが語る。国内最大級のMAユーザー会を維持・拡大する秘訣とはマーケティングオートメーション(MA)BtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。涼ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ケーススタディで学ぶ。PIECE』を超える異例の売上。ビジネスチャットだけでは限界かも......。PIECE』を超える異例の売上。意外な掛け合わせでビジネス再生!復活した斜陽産業まとめケーススタディで学ぶ。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。