Life is Tech! Lesson
オリジナル制作サンプル集
くっきりした影をつける
難易度：
プロパティ：box-shadow
関連レッスン：Chapter 1 レッスン 3
できあがりイメージ
つくりかた
Step1
影をつけたい要素をHTMLから探す
HTML
<section class="photo">
<h2 class="title">おすすめのパン</h2>
<div>
<img src="img/cro.jpg" width="240">
<h3>サクサククロワッサン</h3>
</div>
<div>
<img src="img/danish.jpg" width="240">
<h3>レーズンデニッシュ</h3>
</div>
<div>
<img src="img/rye.jpg" width="240">
<h3>こだわりライ麦パン</h3>
</div>
<p>毎日8:00、12:00、15:00に焼きたてのパンをご用意してお待ちしております。</p>
</section>
HTMLの"photo"というクラス名のsectionタグ中にあるimgタグに対し、CSSを反映させていきます。
Step2
影をつけたい要素のCSSセレクタを作る
CSS
.photo img {
}
CSSで クラス名"photo"内の img を指定します。
Step3
影を指定する
box-shadow を追加して、影を指定します。
CSS
.photo img {
box-shadow: 5px 5px 0 #96CDE8;
}
サンプルでは４つの値を指定していて、
1.横の影の長さ (50px)
2.縦の影の長さ (50px)
3.影のぼかしの長さ (0)
4.影の色 (##96CDE8)
の順番で記載します。
値と値の間には半角スペースを空けます。
Step4
コードを書くかコピー＆ペーストする
CSS
box-shadow: 5px 5px 0 #96CDE8;
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
Step5
実際の見え方を確認する
写真にくっきりした影がついていたら完成です
