実践コーディングスキル - 第5章 Lesson5

第22回:class名を利用してボックスに影をつけよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

class名を利用してボックスに影をつける方法を解説しています。
class名の特徴とルールを理解し、他にも同じCSSをかけているところをclass名化し、CSSを節約します。



この動画で学べること

・box-shadowでバナーに影をつける方法



box-shadowでバナーに影つけよう

今回は、前回作ったバナーに、影をつけていきたいと思います。
メイン画像や新着記事にかかっていたbox-shadowをバナーにもかけたいと思うのですが、
このように、何度も同じCSSをかけたいときにはclass名を追加するのが便利ですので、class名.box_shadowを追加します。
また、メイン画像や新着記事の<div>ボックスにも同じようにclass名.box_shadowを書いておいてください。



<div id="right_link">
<ul>
<li class="box_shadow"><a href="#" id="contact">ご予約・お問い合わせ</a></li>
<li class="box_shadow"><a href="#" id="blog">スタイリストブログ</a></li>
</ul>
</div>



ではCSSもメイン画像や新着情報にかかっていたbox-shadowを消して、新たにclass名box_shadowを書き、影の設定をしましょう。



.box_shadow {
box-shadow: 0 2px 7px rgba(83,78,61,0.3);
}



では保存してブラウザで見てみましょう。
メイン画像、新着情報、バナーのボックスに影をかけることができました。




もう一つのバナーも作っていこう


同じ手順でもう一つのバナーも作成していきましょう。
まずHTMLをコピーしてid名を#blogにし、中身の文字も変更します。
そしてCSSで画像のパスを指定していきましょう。
バナーは2つありますが、共通のCSSはまとめて書き、必要のない部分は消すようにしましょう。



div#right ul li a#contact {
background: url(images/contact.jpg) no-repeat;
width: 365px ;
height: 60px;
display: block;
}

#contact {background: url(images/contact.jpg) no-repeat;}
#blog {background: url(images/blog.jpg) no-repeat;}