WebデザイナーのためのCSS3実践講座

ボックスへの影効果

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「box_shadow」を使って、ボックスに影の効果を付ける方法について、解説致します。
講師:
04:48

字幕

このレッスンでは box-shadow という CSS プロパーティーを使って― ボックスに影の効果を付ける 方法について解説していきます まずはダウンロードしてきた こちらの box-shadow ― というフォルダの中に入っている この index.html ファイルと― style.css ファイルを エディタで開いて下さい そして これがそれらの ファイルを開いた状態です そして こちらの右側にはこちらの index.html をブラウザで― 開いた状態を表示しています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらの index.html ファイルからみていきます こちらの index.html ファイルには― 二組の div タグがあります そして それぞれに class ="styleA" と― class ="styleB" を 付けています そして 中にはテキストで 一つは外側に影 そして 一つは内側に影 といった テキストを記載しています そして これらそれぞれに対応するのが こちらのブラウザのこの部分となります 上が styleA の部分 そして 下が styleB の部分となります このように styleA の部分に関しては 外側に影が付いていますね そして styleB の方に関しては 内側に影が付いています 今回はこの影の効果を CSS で 付ける為の方法について― 解説していきたいと思います それでは ここまで確認できたら こちらの style.css ファイルの方を― 見てみたいと思います そして 注目して頂きたい部分は こちらの部分ですね まずは上の方から見ていきましょう こちらは div.styleA に対する スタイルシートですね こちらの部分では box-shadow というプロパーティーを使っています そして その後に 2px 2px 10px 0px そして カラーコードの #000― と付けていますね この box-shadow という CSS プロパーティーを使うことによって― ボックスに対して影の効果を 付けることができます そして この後の値ですが 左から順番に 影の横方向のずれ そして 縦方向のずれ― そして 影のぼかし範囲 そして 影の広がり範囲 そして 最後に― 影の色という形になっています こちらの styleA では まず 横方向に 2 ピクセルずれます こちらの部分ですね そして 縦方向に 2 ピクセルずれます こちらの部分です そして ぼかしの範囲を 10 ピクセルとしています このように影がぼやけていますね そして 影の広がり範囲を 0 ピクセルとして 影の色を #000 ― 要するに黒にしています このようにすることでこういった形で右下に 影が表示されてくるといった形になります 因みに ぼかしの範囲も 10 ピクセルと 設定しているので こちらの左上の部分ですね こちらの部分にも影がうっすらと はみ出ているのが分かります では 次に こちらの styleB の方を見てみましょう こちらも同様に box-shadow と書いて 2px 2px 10px 0px ― そして カラーコードを #000 ここまでは一緒ですね 但し この後に inset と いう文字を追加しています この inset を付けることによって 影をボックスの内側に付けることができます ここで見てみますと まず 横方向に 2 ピクセル そして― 縦方向に 2 ピクセルずれている そして 影のぼかし範囲を― 10 ピクセルとして 広がり範囲を 0 ピクセル そして 影の色を黒色と設定していますね それがこのように内側に 表示されてきている状態となっています このように box-shadow という プロパーティーを使うことによって― 今まででは 画像作成ソフトでしか 作成できなかった― ドロップシャドーのような効果を このようにCSS だけで表現することが― 可能となっています このプロパーティーの使い方によっては 様々な表現を行うことが出来ますので― しっかりと覚えておくと良いでしょう 以上でレッスンは終了です 今回は box-shadow を使って ボックスに影の効果を付ける方法について― 解説致しました 以降のレッスンでは この box-shadow を使って― 写真の縁取りを複数の線を使って 作成する方法について― 解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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