実践コーディングスキル - 第4章 Lesson9

第17回:影のついたメイン画像を作成してみよう

   

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

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

影のついたメイン画像を作成する方法について解説しています。
ここでは、box-shadowプロパティを利用して自然な影をCSSで表現します。



この動画で学べること

・影のついたメイン画像を作成する方法



box-shadowプロパティを使って影のついたメイン画像を作成しよう

今回は、影のついたメイン画像を作成していきましょう。
<div>id名mainimageの中に、メイン画像に表示させるコードを書いていきます。
alt属性も忘れないようにしましょう。



<div id="mainimage" class="box_shadow">
<img src="images/mainimage.jpg" alt="メインイメージ" height="290" width="950">
</div>



画像が表示できたら、まず白い5pxの境界線をつけてきます。
しかしこのままでは、メイン画像部分のボックスにちゃんと横幅や縦幅を指定していないため、いらない余白がついてしまいます。
なので画像ぴったりになるように、ボックスのサイズを指定しましょう。



#mainimage {
width: 950px;
height: 290px;
border: 5px solid #fff;
margin-bottom: 20px;
}



最後に、box-shadowプロパティを使ってボックスに影をつけたいと思います。
影の距離とぼかしを設定し、不透明度を調整できる rgba()で色の指定をしてください。



#mainimage {
width: 950px;
height: 290px;
border: 5px solid #fff;
margin-bottom: 20px;
box-shadow: 0 2px 7px rgba(83,78,61,0.3);
}



ここまでできたら、保存してブラウザで見てみましょう。
影のついたメイン画像の作成ができました。