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

第5回:floatで2カラムレイアウトを組んでみよう

   

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

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

floatプロパティを利用して、2カラムレイアウトを作る方法を初心者向けに解説しています。
clearfixを利用して、floatを解除する方法も合わせて解説しています。



この動画で学べること

・floatを使って2カラムのレイアウトにしよう



floatを使って2カラムのレイアウトにしよう

今はまだ全てのボックスが縦に並んだ状態ですので、floatをかけて2カラムにしていきたいと思います。
まずは<div>id名leftとrightにfloatをかけていきます。



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


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



保存してブラウザで見てみましょう。
ボックスを横並びにすることができましが、フッターが迷って変な所に配置されてしまいました。
なので、floatを解除する必要があります。
HTMLファイルの<div>id名rightの下に新しく<div>タグを追加してください。



<div id="clearfix"></div>



そして、float解除のためのCSSを書いていきます。



div#clearfix{
clear:both;
}



保存してブラウザで見てみましょう。
floatが解除され、フッターが正しい位置にもどりました。