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

第6回:marginでサイト全体を中央に寄せてみよう

   

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

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

marginプロパティを利用して、サイト全体を中央に寄せる方法を、初心者向けに解説しています。



この動画で学べること

・marginでサイト全体を真ん中に寄せる方法



marginでサイト全体を真ん中に寄せよう

今回は、サイトの余白を指定していきましょう。
まず、サイドのバナーとお知らせの間に余白がありますので、Photoshopで測ってみます。
余白は30pxだとわかりました。
では、CSSでこの余白の記述をしていきましょう。
今回は<div>id名leftの方に、右に余白をとるという指定をしてみます。



div#left {
width: 280px;
height: 300px;
background-color: gray;
float: left;
margin-right: 30px;
}



保存してブラウザで見てみましょう。
余白ができて、コンテンツ部分の横幅がサイトの横幅ぴったりになりました。
では次に、それぞれのボックスの下に30pxの余白をとるように指定していきます。



div#mainimage {
width: 960px;
height: 300px;
background-color: skyblue;
margin-bottom: 30px;
}


footer {
width: 100%;
height: 79px;
background-color: blue;
margin-top: 30px;
}



保存してブラウザで見てみましょう。
余白をあけることによって、よりサイトのレイアウトがハッキリしてきました。
今のままでは左側に寄ってしまっているので、最後にサイト全体をページの真ん中に寄せましょう。
<header>の前に<div>id名wrapperのCSSを記述していきます。
サイトの横幅と縦幅、そして左右対称に余白をとるという命令文を書きます。



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



保存してブラウザで見てみましょう。
サイトを真ん中に寄せることができました。