実践コーディングスキル - 第3章 Lesson5

第5回:コンテンツのレイアウトを組もう

   

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

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

コンテンツのレイアウトを組む方法について解説しています。
ここでは、floatを使って2カラムのレイアウトを作っていきます。


この動画で学べること

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



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

前回は、ヘッダーのレイアウトが完成しましたので、今回はコンテンツの部分を見ていきましょう。
前回作った、ヘッダーをコメントアウトごとコピーし、ヘッダーのしたに貼りつけてメイン画像のボックスを作っていきます。
タグは<div>id名mainimageに、コメントアウトの部分は「メイン画像ここから(ここまで)」に書き換えておきましょう。



<!-- メイン画像ここから -->
<div id="mainimage">
</div>
<!-- メイン画像ここまで -->



HTMLの記述ができたら、CSSも同じようにヘッダーをコピーして数値を書き換えていきます。



#mainimage {
width: 960px;
height: 300px;
background-color: yellow;
}



保存してブラウザで見てみましょう。
ヘッダーの下に黄色いボックスができました。
このHTMLとCSSをコピー&ペーストして書き換えるという方法で、コンテンツ、部分も作っていきましょう。



div#left {
width: 575px;
height: 198px;
background-color: pink;
}


div#left {
width: 365px;
height: 198px;
background-color: green;
}



保存してブラウザで見てみましょう。
このようにボックスが並んでいればOKです。