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

写真の縁取りを複数の線で作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「box_shadow」を使って、写真の縁取りを複数の線を使って作成する方法について、解説致します。
講師:
04:30

字幕

このレッスンでは box-shadow という CSS プロパーティーを使って― 写真の縁取りを複数の線を使って 作成する方法について解説していきます まずはダウンロードしてきたちらの multiple-lines ― というフォルダの中に入っている こちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして こちらがそれらの ファイルを開いた状態です そして こちらの右側には こちらの index.html ファイルを― ブラウザで表示させた状態となています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらのブラウザの 方からみていきましょう このように一枚の写真があって その写真が 白とそして 灰色の線で― 縁取りされています そして この写真の下にあたかも 別の写真が何枚か重なっているような― 効果が付いていますね そして 最後には影が付いていますね 今回はこの表現の仕方を みていきたいと思います それでは まず こちらの index.html ファイルの方を― 見てみましょう この index.html ファイルの方は 至ってシンプルです div タグがあって その div タグの中にはー イメージタグが一つ入っているだけですね そして この div タグには class="style" が付いています この style に対して CSS ファイルの方で― スタイルシートを定義していきます それでは こちらの style.css ファイルを開きます そして 今回注目して頂きたい 部分はこちらの部分ですね それでは 順番にみていきましょう まずは box-shadow の プロパーティーを使っていますね この box-shadow というのは こちらのボックスに対して― 影の効果を付ける為の CSS プロパーティーでしたね そして この box-shadow の値に ずらっと値が設定されています この一行ずつが一つの固まりですね このように box-shadow では 複数の影の効果を同時に付加する事が― できるようになっています 同時に付加する為には このように 一つの固まり毎にカンマ (,) を打って― このように複数行を書いていく形となります それでは この部分を順番に みていきたいと思います まずはこちらの二行です まず こちらの二行では この写真に対して 縁取りを行っています まず こちらの一行目の部分に関しては この写真の周りにある白い部分 そして 次に この二行目の 部分では 一番外側にある― こちらの灰色の枠線を表現しています そして 次に 三行目からこちらの部分まで こちらの部分では この下に 重なっているように表現している部分を― ボックスシャドーで作っています こちらの方を順番にみていきますと こちらの縦の部分のずれですが― 徐々に大きくなっていっているのが分りますね そして 白と灰色が交互に設定されています このようにすることでこの写真の縦方向― 下にこのように徐々に伸びてくるような形で 影を付加することができるようになっています そして 最後にこちらの部分 こちらの部分では― 最後のドロップシャドーの部分を 表現しています このようにボックスシャドーを使って 複数の影の効果を同時に設定する事によって― こういった表現を CSS だけで 実装することが可能となっています 少し使い方が難しいかも知れませんが これを使いこなせるようになると― CSS だけで様々な表現が できるようになりますので― しっかりと覚えておくようにしましょう 以上でレッスンは終了です 今回はボックスシャドーを使って 写真の縁取りを複数の線を使って― 作成する方法について解説致しました 以降のレッスンでは linear gradient ― というものを使って グラデーションを 作成する方法について解説していきますので― そちらも合わせてご覧下さい

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

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

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

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

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

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