CSSスキル - 第6章 Lesson4

floatを利用した横並びのナビゲーションを作ってみよう

   

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

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

floatプロパティの概念と書き方を学んだ上で、実際のWebサイトを作って練習してみましょう。
ここでは、横並びのナビゲーションを作成する方法を解説しています。



この動画で学べること

・floatを使って横並びのナビゲーションを作る方法
・clearfixでfloatを解除する方法



floatを使って横並びのナビゲーションを作ろう

floatを使って横並びのナビゲーションを作っていきましょう。
まず、<header>の<h1>にfloat: left;を、<header>の<nav>にfloat: right;をかけていきます。



header h1 {
float: left;
}


header nav{
float: right;
}



一度、保存してブラウザで見てみましょう。
ヘッダーの高さが小さくなってしまいました。
これは、前回も学んだように、floatによって要素が浮いた状態になってしまっているからです。
なので、プロパティclearを使ってfloatを解除していく必要がありますが、前回すでにこのCSSを書いているので、HTMLに<div class="clear"></div>と記述するだけで大丈夫です。


次に、縦に並んでいるリストにfloatをかけて横並びにしましょう。
リスト同士が窮屈になってしまうので、marginをかけて余白をとりましょう。




header nav ul li {
float: left;
margin-left: 20px;
margin-top: 10px;
}




保存してブラウザで見てみましょう。
うまくリストが横並びになりました。
このリストも最後にfloatを解除する必要がありますが、今回はclearfixという方法でやってみたいと思います。



clearfixでfloatを解除する方法


clearfixは、親要素つまり<ul>に対してかけます。
まずはHTMLファイルの<ul>にclass名「clearfix」をつけてみましょう
そして、こちらの親要素にfloat解除をかけるCSSをスタイルシートに貼り付けてください。



.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}



保存してブラウザで見てください。
見かけ上の変化はありませんが、ffloatの解除がきちんと定義されています。
最後に、背景の色をなくして、Webサイトのレイアウトが完成です。