実践コーディングスキル - 第3章 Lesson7

第7回:marginを使ってサイト全体の余白を調節しよう

   

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

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

marginを使ってサイト全体の余白を調節する方法について、解説しています。
ここでは、サイト全体の余白の調整の他にも、サイト全体をセンタリングさせます。



この動画で学べること

・余白をとってレイアウトを完成させる方法
・ページを真ん中に寄せる方法



余白をとってレイアウトを完成させよう

前回までに作ったレイアウトのボックスに余白をかけてレイアウトを完成させましょう。
では、まずメイン画像の部分にmarginをかけていきます。



#mainimage {
width: 960px;
height: 300px;
background-color: yellow;
margin: 20px 0 20px 0;
}



保存していブラウザで見てみると、メイン画像のボックスの上下に20pxの余白をあけることができました。
では次にコンテンツの左側のボックスに右の余白、フッターに上の余白を書いていきましょう。



div#left {
width: 575px;
height: 198px;
background-color: pink;
float: left;
margin-right: 20px;
}

footer {
width: 100%;
height: 58px;
background-color: black;
margin-top: 20px;
}



保存してブラウザで見てみると、コンテンツ部分は余白があき、横幅ぴったりになりました。
また、フッターの上にも20pxの余白をとることができ、レイアウトが完成しました。




ページを真ん中寄せにする方法

では、完成したレイアウトをページの真ん中に寄せていきましょう。
真ん中に寄せるするためには、真ん中寄せにしたい部分、つまりヘッダーからコンテンツ部分までを囲むボックスを新た作る必要があります。
HTMLに、<div>id名wrapperを書き、CSSを記述していきます。



div#wrapper{
width: 960px;
margin: 0 auto;
}



横幅を指定し、左右均等に余白をとるという指定をしてみました。
保存してブラウザで見てみましょう。
ページが真ん中に寄せることができましたね。