実践コーディングスキル - 第9章 Lesson8

第12回:floatでコンテンツのレイアウトを組もう(2)

   

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

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

ウェブマガジンサイトのコンテンツをレイアウトする方法を解説しています。
ここでは、floatを使って2カラムレイアウトを組んでいきます。



この動画で学べること

・floatをかけてコンテンツのレイアウトを組む方法



floatをかけてコンテンツのレイアウトを組んでいこう

前回の続きで、コンテンツ部分のレイアウトを組んでいきましょう。
ピックアップ記事やランキング記事の部分と同じで、コンテンツにもfloatを書けてレイアウトを組んでいくので、floatを解除することが必要になりますので、前回と同じ要領で<div>id名top_leftとtop_rigthをくるむ<div>ボックスを作り、class名cfをつけておきましょう。
それができたら、<div>id名top_rigthにスタイルをかけていきます。



div#top_right {
width: 650px;
height: 650px;
background-color: yellow;
}



一度保存してブラウザで見てみます。
赤いボックスの下に黄色いボックスが表示されました。
では、この2つのボックスにfloatをかけて横並びにしていきたいと思います。
また、ボックスの上に余白をとりたいのでmargin-topをかけましょう。



div#top_left {
width: 280px;
height: 280px;
background-color: red;
float: left;
margin-top: 30px;
}

div#top_right {
width: 650px;
height: 650px;
background-color: yellow;
float: left;
margin-top: 30px;
}



保存してブラウザで見てみましょう。
ボックスが横並びになり、上の余白をあけることができました。
これで、コンテンツ部分のレイアウトは完成です。