実践コーディングスキル - 第8章 Lesson3

第3回:ヘッダーのレイアウトを組もう(1)

   

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

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

ウェブマガジンのレイアウトを組む方法を解説しています。
ここでは、ヘッダーのレイアウトの組み方を見ていきたいと思います。



この動画で学べること

・ヘッダーのレイアウトを組む方法



ヘッダーのレイアウトを組もう

ヘッダーのボックスの下にオレンジの境界線を引きたいと思います。
border-bottomプロパティを使って前回書いたヘッダー部分のCSSの続きに書いていきます。



header{
width: 100%;
height: 102px;
background-color:green;
border-bottom: 3px solid #f6ac4d;
}



保存してブラウザで見てみると、オレンジの線が表示されました。
では、次にボックスの下の影をつけていきたいと思います。
box-shadowプロパティを使いますが、box-shadow: [左右にずらす距離] [上下にずらす距離] [ぼかし] [色]; この順番で数値を入力していきましょう。
また、影の色はrgba()で不透明度を下げると自然になるので、Photoshopで調べて色コードを書いてください。



header{
width: 100%;
height: 102px;
background-color:green;
border-bottom: 3px solid #f6ac4d;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}



保存してブラウザで見てみましょう。
ヘッダーの下に自然な影をつけることができました。