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

第6回:横幅100%のフッターを作成しよう

   

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

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

フッターを作成する方法について解説しています。
ここでは、2カラムレイアウトのためのfloatをfooter部分で解除します。



この動画で学べること

・フッターのレイアウトを組む方法
・コンテンツを横並びにする方法



フッターのレイアウトを組む方法

今回は、ブラウザの横幅いっぱいに広がるのフッターを作成しましょう。
今までのレイアウトでは横幅の大きさが決まっていたのでpxで指定していましたが、今回はブラウザいっぱいに広がる横幅を指定したいので%を使って書きます。
ではまず最初に、すでに書いているHTMLをコピーしてフッターのレイアウトを組んでいきましょう。



<!-- フッターここから -->
<footer>
</footer>
<!-- フッターここまで -->



CSSも、コピーして書き換えていきます。
フッターはブラウザの横幅いっぱいに広がるようにしたいので、widthに100%を指定しましょう。



footer {
width: 100%;
height: 58px;
background-color: black;
}



では保存してブラウザで見てみてみましょう。
フッターの部分は横幅が画面いっぱいになりました。



コンテンツを横並びにする方法

次にコンテンツ、#leftと#rightを横並びにしたいと思います。
横並びにするためのプロパティはfloatでしたね。
それぞれのボックスにfloatをかけていきましょう。



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

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



保存してブラウザで見てみてみましょう。
コンテンツが横並びになりましたが、floatを解除していないためフッターが迷ってしまっています。
なのでfloatを解除させていきましょう。
まずはHTMLの#rightの次に<div class="clear"></div>を書き足します。
そして、floatを解除のためのCSSを書いていきましょう。



div.clear{
clear: both;
}



では、再度保存してブラウザで見てみてみましょう。
floatを解除をしたため、フッターの流れを止めることができました。