CSSスキル - 第6章 チャレンジ

Webサイト2カラムレイアウトを作ってみよう(解説)

Webサイト2カラムレイアウトを作ってみよう

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

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

ボックスをfloatを使って横並びにし、センタリングさせて2カラムのレイアウトを作成する方法を作成する方法について解説します。



チャレンジ内容

・floatを利用してレイアウトを組むことができるかどうか
・float解除について理解しているかどうか
・Webサイトを真ん中寄せにすることができるかどうか




floatをかけて2カラムのレイアウトを組んでみよう


まずはindex.htmlとstyle.cssを開き、サイドバーとコンテンツの横幅を指定したいと思います。
・サイドバー:300px
・コンテンツ:570px
にします。
ブラウザで見たときにわかりやすくするため、背景に色を設定しておきましょう。



div#right {
width: 300px;
height: 600px;
background-color: gray;
}

div#left {
width: 570px;
height: 600px;
background-color: #ccc;
}



次に、サイドバーとコンテンツを横並びにするため、floatをかけていきます。



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

div#left {
width: 570px;
height: 600px;
background-color: #ccc;
float: left;
}



一度保存してブラウザで見てみましょう。
2つのボックスが横並びになりましたが、フッターが変な場所に配置されてしましました。
これは、先ほどfloatをかけたのに、float解除をしていないためです。
なので今回は、フッターにfloat解除のCSSを書いていきます。



footer {
clear: both;
}



再度保存してブラウザで見てみましょう。
先ほど迷ってしまっていたフッターの位置を戻すことができました。


では最後に、サイドバーとコンテンツを真ん中に寄せたいと思います。
この2つのボックスを囲んでいる#wrapperに対して、widthとmarginを設定しましょう。



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



今回、このようにサイドバーとコンテンツのボックスのレイアウトを組むことができました。