21.
Float
Floatとは
コンテンツを左右に並べる
Floatはブロック内のコンテンツ全体を横並びにし、左右に寄せるプロパティです。コンテンツは幅や高さに合わせて回り込むようになります
通常のBoxコンテンツ
Boxコンテンツ（ブロック要素）は、通常縦方向に並びます。
Floatを使ったBoxコンテンツ
「float: left」で設定すると、Boxコンテンツが横並びになります。
コンテンツの回り込み
コンテンツがウィンドウサイズを超えると回り込むようになります。
回り込みの解除（overflow: hidden）
横並びメニューでは、最後に横並びを解除する必要があります。floatの横並びを解除したいときは「overflow: hidden」を設定します。
overflow: hidden;
メニューの横並び
FloatとFlexbox
コンテンツを横並びにするにはいくつかありますが、大きく2つの方法があります。
- Floatレイアウト
- Flexboxレイアウト
CSS3ではFlexboxが流行
CSS3からFlexboxが追加され、メニュー作成はFlexboxが主流になっています。FlexboxはFloatレイアウトよりも設定しやすいですが、まずFloatレイアウトで作成してみましょう。
メニューリンクの構造
リスト表示で構成
メニューリンクは、ul、liタグでリスト表示するのが一般的です。またメニュー全体はナビゲーションという意味で、navタグで構成します。
HTML
<header>
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
</header>
CSSを設定しない場合
CSSを設定しない場合、リストは縦表示になります。
CSSを設定した場合
FloatやFlexboxなどのCSS設定で、リストを横並びに表示します。
floatプロパティ
「float」は、コンテンツを横並びして左右に寄せるCSSプロパティで、Floatレイアウトで利用します。
float: 設定値;
floatプロパティの設定値
| 設定値 | 説明 |
|---|---|
| left | 要素を左寄せ |
| right | 要素を右寄せ |
| none | 配置を指定しない（デフォルト） |
Floatレイアウト
HTML
sectionタグのコンテンツを複数用意します。
<section class="box color1">
Boxコンテンツ
</section>
<section class="box color2">
Boxコンテンツ
</section>
<section class="box color3">
Boxコンテンツ
</section>
<section class="box color4">
Boxコンテンツ
</section>
CSS
CSSファイルでコンテンツの幅、高さを指定して「float :left」で横並びにします。わかりやすいように、コンテンツの背景色を色分けしておきます。
.box {
height: 100px;
width: 200px;
float: left;
}
.color1 {
background-color: #b79873;
}
.color2 {
background-color: #7bb773;
}
.color3 {
background-color: #4888c0;
}
.color4 {
background-color: #c25e55;
}
結果
コンテンツが左寄せで横並びになりました。
Floatでメニュー作成
メニューをFloatレイアウトで作成してみましょう。
ファイル構成
layout/
├── css/
│ └── menu.css
└── float_menu.html
HTMLの作成
floatを指定してメニューを作成します。また、わかりやすいようにメインコンテンツも用意します。
float_menu.html
<header id="float-menu">
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
</header>
<main>
メインコンテンツ
</main>
CSSの作成
メニューの横並び
メニュー部分のliタグを、float: left で横並びにします。
menu.css
#float-menu ul {
list-style: none;
padding: 0;
}
#float-menu li {
float: left;
background-color: #f0f8ff;
padding: 20px 20px;
}
main {
padding : 20px;
background-color: #d3d3d3;
}
回り込み解除
navタグに「overflow: hidden」を設定して、回り込み解除をします。overflowに関しては別の章で解説します。
menu.css
#float-menu nav {
overflow: hidden;
}
結果
メニューが左から横並びに並びました。画面に収まらないときは回り込みをします。
右寄せ
右寄せにする場合は、float: right にします。
#float-menu li {
float: right;
background-color: #f0f8ff;
padding: 20px 20px;
}
結果
メニューが右から横並びに並びました。
回り込み処理を解除しない場合
メニューで回り込み処理を解除しない場合、その後のコンテンツも横並びになってしまうので注意しましょう。
clearfix
通常「overflow: hidden」で回り込みを解除しますが、昔からの手法で「clearfix: both」でも解除できます。
clear: both;
演習
問題1
コンテンツを横並びにするCSSプロパティの設定はどれですか？
１）overflow: hidden
２）overflow: left
３）float: hidden
４）float: left
問題2
コンテンツを横並びを解除できるCSSプロパティの設定はどれですか？
１）overflow: hidden
２）overflow: left
３）float: hidden
４）float: left