CSSスキル - 第6章 Lesson3

Webサイトを2カラムレイアウトにする方法

   

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

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

ボックスは、何も指定しないと縦に並んでいきます。横並び(2カラム)にしたい場合は、floatというcssプロパティを利用しなければいけません。
ここでは、floatプロパティの基本的な使い方と書き方を、初心者向けに解説しています。



この動画で学べること

・ボックスを横並びにするプロパティfloatの使い方



ボックスを横並びにするプロパティfloatの使い方

今回は、ボックスを横並びにする方法を見ていきましょう。
ボックスを横並びにするためには、プロパティfloatを使います。
値を「left」にすれば左寄せに、「right」にすれば右寄せになります。
では実際に<div>タグのid名「left_side」にfloat:left:をかけてみます。



div#left_side {
width: 200px;
height: auto;
background-color: pink;
float: left;
}



一度、保存してブラウザで見てみましょう。
コンテンツ部分がサイドバーの下に潜り込んでしまいました。
これは、floatがただ指定した方向に流れるだけでなく、浮いた状態になっているためです。
では、次に<div>タグのid名「right_side」にfloat: right;をかけてみましょう。



div#right_side {
width: 660px;
height: auto;
background-color: green;
float: right;
}



保存してブラウザで見てみましょう。
今度は上手く横並びになりましたが、フッターの位置がおかしくなってしまいました。
これは、「left_side」と「right_side」にfloatをかけたことによって、2つのコンテンツを囲んでいた<div>タグ「wrapper」が、コンテンツには何も入っていないと勘違いしてしまい、自動で高さを0pxにしたためです。
この問題は、clearというプロパティを指定してfloatを解除することによって解決できます。
では実際に、<div>タグ「right_side」の次に「clear」という空のボックスを作って、floatを解除をしてみましょう。
今回は、左右両方にfloatをかけているので、どちらの流れもとめる「both」を書いてください。


div.clear {
clear: both;
}



保存してブラウザで見てみましょう。
wrapperの高さが戻り、フッターも正しい位置に配置されました。