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

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

   

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

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

ウェブマガジンサイトのコンテンツをレイアウトする方法を解説しています。
ここでは、clearプロパティを使ってfloatを適切に解除します。



この動画で学べること

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



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

サイドバーや新着記事の部分のレイアウトを組んでいきましょう。
まずはHTMLの記述をしていきます。
ランキングの下に新しく<div>ボックスを作成し、それぞれのid名前を「top_left」「top_rigth」としておきます。



<div id="top_left"></div>
<div id="top_right"></div>



次にCSSを書いていきましょう。
#top_leftのボックスに横幅と縦幅、背景色を指定します。



#top_left {
width: 280px;
height: 280px;
background-color: red;
}



一度保存してブラウザで見てみます。
指定したボックスが表示されません。
これは、ピックアップ記事とランキング記事の部分のfloatを解除していないからです。
HTMLファイルにこの2つの部分をくるむ<div>class名cfを新たに記述して、float解除をしましょう。
リセットCSSの下の方にすでに.cfに対するスタイルが書いてありますので、新たにスタイルを書く必要はありません。
では、HTMLの記述ができたら再度保存して、ブラウザで見てみましょう。
赤いボックスを表示することができました。