CSS3の基本 - レベルアップCSS

ボックスのドロップシャドウ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスにドロップシャドウを指定するには、box-shadowプロパティを使います。ここでは、box-shadowプロパティの使い方について紹介します。
講師:
05:14

字幕

ボックスにドロップシャドウを指定するときはbox-shadow プロパティを使います。このレッスンでは box-shadow プロパティの使い方について紹介します。box-shadow プロパティでは指定する値が多いため実際に CSS を書きながらチェックしてみましょう。画面には左側に HTML と CSS を編集する画面。右側にその結果を表示するウェブブラウザを表示しています。またウェブページの上部には背景にエメラルドグリーンが適用されたheader 要素が表示されています。ここではこの header 要素に対してドロップシャドウを指定してみましょう。実際に CSS を記述していきます。ドロップシャドウを指定するには box-shadowプロパティを使います。box-shadow プロパティは多数のプロパティを指定しますので順に紹介していきます。1つ目は水平方向におけるシャドウ、影のオフセットを示します。例えばここでは 5px を指定してみましょう。これで水平方向に 5px 分のオフセット移動が行われ正の値はボックスの右側に影が表示されることになります。なお値にはマイナスの値も指定することができマイナスの値の場合は左側へのオフセットになります。 2番目の値は同じように垂直方向におけるオフセットを示します。こちらも 5px を指定します。垂直方向におけるオフセットでは正の値は下方向に、マイナス負の値は上方向に影がオフセット移動されます。3つ目の値はドロップシャドウのブラー・ぼかしの値です。値が大きければ大きいほど影の輪郭がぼかされます。ここではマイナスの値は使いません。値が 0 の場合はシャドウのエッジがくっきり表示されます。ここでは少し多めにぼかして8px を指定しましょう。4つ目の値はスプレッドの指定です。スプレッドとはドロップシャドウ全体を大きくするための指定です。プラスの値が指定された場合その分だけシャドウの長さがすべての方向に対して拡大されます。マイナスの値が指定された場合は逆にすべての方向に対し影が収縮・小さくなります。ここでは特にスプレッドを指定しないため0 を指定しましょう。そして最後に影の色を指定します。ここでは黒を指定したいのですが真っ黒を指定するとかなり濃い影になりますので少し薄め、不透明度を付けて薄めの影を作りましょう。rgba 関数を使って、黒に対して不透明度が 0.330% の影を付けました。ウェブブラウザを見ると header 要素の右下側に薄く影が付いているのが分かります。 ブラーの値を変えてみたり、色の値を変えてみたりするとさまざまなブラーの効果が得られます。なお box-shadow プロパティには inset というキーワードも用意されています。inset キーワードを入力すると影がボックスの外側ではなく内側に表示されるようになります。また inset キーワードがないときに水平方向と垂直方向のオフセットをそれぞれ0 に指定して適当な色を設定してみます。そしてブラーの値も多少調整しましょう。するとドロップシャドウではなくグロー・光彩のような効果を得ることもできます。また影は複数付けることもできます。最初に指定したドロップシャドウこちらを入力した後に最後にカンマを付けてそしてもう一度始めからボックスシャドウのプロパティをもう一度指定すると2つ影を作ることもできます。ここでは反対方向に影を付けてみましょう。rgba ここでは赤を指定します。このように右下のドロップシャドウと左上のドロップシャドウを1つの box-shadow プロパティで2の値を指定してシャドウを付けることができます。このレッスンではボックスにドロップシャドウを指定するbox-shadow プロパティの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。