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

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

   

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

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

ウェブマガジンのレイアウトを組む方法を解説しています。
ここでは、ヘッダーにCSSをかけて真ん中に寄せたり余白の調整をしたりします。



この動画で学べること

・ヘッダーを真ん中寄せにする方法



ヘッダーを真ん中寄せにする方法

前回の続きで、ヘッダー部分の作成をしていきたいと思います。
ヘッダーを真ん中に寄せたいので<header>タグの中に<div>id名header_innerを書いていきます。
HTMLファイルに記述ができたら、ボックスの大きさなどをCSSに書いていきましょう。



<body>
<header>
<div id="header_inner">
</div>
</header>
</body>



div#header_inner{
width:960px;
height: 52px;
background-color: red;
}




では一度保存してブラウザで見てみましょう。
header_innerが赤いボックスで表示されました。
今は左上に寄った状態なので、真ん中に寄せていきたいと思います。
margin: 0 auto;と書いて、左右対称に余白をとるという指定をしていきましょう。



header #header_inner {
width: 960px;
height: 52px;
background-color: red;
margin: 0 auto;
}<span></span>



では次に、ヘッダーの内側の余白をとっていきましょう。
paddingをかけていきますが、paddingをかけるとボックスの要素自体が大きくなってしまいますので、縦幅を調整してサイズが変わらないようにします。



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



では保存してブラウザで見てみましょう。
ヘッダーが真ん中により、サイズも見本と同じになりました。