知識を取り込み、そして発信する
floatは、かつてWebページのレイアウトを組むために多用されてきました。
その影響から、現在では「古いレイアウト手法」「もう使わないもの」と捉えられることも少なくありません。
しかし、floatは本来レイアウトを構成するためのプロパティではなく、要素の周囲にほかの要素を回り込ませるための仕組みです。
flexやgridが登場したことで、配置や整列の役割はそれらに譲りましたが、回り込みという用途においてfloatは今でも有効です。
ここでは、floatをレイアウト手法として扱うのではなく、回り込みを制御するためのプロパティとして整理し、正しい役割を解説します。
floatは、要素そのものを配置するためのプロパティではありません。
要素を基準に、後続の内容をどのように回り込ませるかを制御するための仕組みです。
かつてはレイアウト目的で多用されていましたが、現在では回り込みという本来の役割に限定して使うのが適切です。
セレクタ{
float:値;
}
floatを指定すると、要素は通常の文書の流れから外れ、指定した側に寄せられます。
その結果、後続の内容は空いた領域に回り込んで表示されます。
leftは左寄せ、rightは右寄せ、noneは初期状態で、回り込みは発生しません。
コード例
<div>
<img src="../img/animal-01.png">
<p>
ネズミは哺乳類に分類される小型の動物で、鋭い嗅覚と高い繁殖力を持つのが特徴です。<br>
自然界では種子や昆虫を食べることで生態系の一部を担う一方、人の生活圏では食べ物や建物に被害を与えることもあります。<br>
警戒心が強く狭い隙間にも入り込めるため、身近でありながら完全に姿を見かけることは少なく、その行動力と適応力の高さがネズミの大きな特徴と言えます。
</p>
</div>div {
background-color: #eeeeee;
width: 300px;
height: 350px;
}
img {
float: left;
margin-right: 16px;
border: 1px solid #000000;
box-sizing: border-box;
}出力例
ネズミは哺乳類に分類される小型の動物で、鋭い嗅覚と高い繁殖力を持つのが特徴です。
自然界では種子や昆虫を食べることで生態系の一部を担う一方、人の生活圏では食べ物や建物に被害を与えることもあります。
警戒心が強く狭い隙間にも入り込めるため、身近でありながら完全に姿を見かけることは少なく、その行動力と適応力の高さがネズミの大きな特徴と言えます。
画像が左側に寄せられ、テキストがその右側に回り込んで表示されます。
このように画像の周りにテキストが回り込んで配置できるのはfloatのみです。
親要素の高さが崩れることがあるため、そのままではレイアウトに影響が出る場合があります。
floatによる回り込みは便利ですが、意図しない位置まで影響が及ぶことがあります。
clearは、その回り込みをどこで止めるかを指定するためのプロパティです。
セレクタ{
clear:値;
}
clearは、指定した側にfloat要素が存在する場合、その下に配置されるようにします。
leftを指定すると左、rightを指定すると右、bothを指定すると、左右どちらの回り込みも解除されます。
コード例
<div>
<img src="../img/animal-01.png">
<p>
ネズミは哺乳類に分類される小型の動物で、鋭い嗅覚と高い繁殖力を持つのが特徴です。<br>
自然界では種子や昆虫を食べることで生態系の一部を担う一方、人の生活圏では食べ物や建物に被害を与えることもあります。<br>
警戒心が強く狭い隙間にも入り込めるため、身近でありながら完全に姿を見かけることは少なく、その行動力と適応力の高さがネズミの大きな特徴と言えます。
</p>
<p id="clear">ここからは回り込みを解除する</p>
</div>div {
background-color: #eeeeee;
height: 180px;
}
img {
float: left;
margin-right: 16px;
border: 1px solid #000000;
box-sizing: border-box;
}
#clear {
clear: both;
}出力例
ネズミは哺乳類に分類される小型の動物で、鋭い嗅覚と高い繁殖力を持つのが特徴です。
自然界では種子や昆虫を食べることで生態系の一部を担う一方、人の生活圏では食べ物や建物に被害を与えることもあります。
警戒心が強く狭い隙間にも入り込めるため、身近でありながら完全に姿を見かけることは少なく、その行動力と適応力の高さがネズミの大きな特徴と言えます。
ここからは回り込みを解除する
最後のpの前で回り込みが解除され、要素はfloatされた要素の下に配置されます。
回り込みの影響範囲を明示的に区切りたい場合に有効です。
なお、clearで指定した値はfloatの値と同じものにする必要はなく、多くの場合はbothを指定しておけば問題ありません。
floatは要素を左や右に寄せ、後続の要素をその周囲に回り込ませるためのプロパティです。
一方、clearはその回り込みを解除し、以降の要素を通常の配置に戻す役割を持ちます。
ただし、出力結果だけを見ると「どこで float の影響が発生し、どこで解除すべきなのか」が分かりにくい場合があります。
これは、floatの影響が自動では終わらないという性質によるものです。
clearを指定しない場合、図のように後続の要素は次々と float した要素の横に回り込み続けます。
floatは指定した要素だけに効くのではなく、その後に続く要素すべてに影響するため、回り込みは明示的に解除しない限り続きます。
回り込みを終わらせたい場合は、floatの影響を止めたい位置にある要素へ clearを指定します。
図のようにclearを指定した要素はfloatした要素の下に配置され、そこで回り込みが解除されます。
このようにclearは、レイアウトを整えるためのプロパティではなく、floatによる回り込みの終点を明示するためのプロパティと考えると理解しやすくなります。
なお、floatを指定した要素は親要素の高さ計算に含まれないため、レイアウト全体に影響を及ぼすことがあります。
floatを使うと、親要素が子要素の高さを認識できなくなることがあります。
clearfixは、この問題を解消するための実装パターンです。
構文
セレクタ::after {
content: "";
display: block;
clear: both;
}
新たなプロパティや値ではありませんが、このように書くことが定型です。
疑似要素を使って回り込みを解除することで、親要素が正しく高さを持つようになります。
clearfix自体はプロパティではなく、実務で定着した書き方です。
コード例
<div>
<img src="../img/animal-01.png">
<p>
ネズミは哺乳類に分類される小型の動物で、鋭い嗅覚と高い繁殖力を持つのが特徴です。<br>
自然界では種子や昆虫を食べることで生態系の一部を担う一方、人の生活圏では食べ物や建物に被害を与えることもあります。<br>
警戒心が強く狭い隙間にも入り込めるため、身近でありながら完全に姿を見かけることは少なく、その行動力と適応力の高さがネズミの大きな特徴と言えます。
</p>
<img src="../img/animal-02.png">
<p>
ウシは哺乳類に分類される大型の家畜で、主に肉や乳を得るために人と深く関わってきた動物です。<br>
草を主食とする反芻動物で、複数の胃を使って効率よく栄養を吸収します。<br>
温厚な性格と高い適応力を持ち、農業や食文化を支える存在として、世界中で重要な役割を果たしています。
</p>
</div>div {
background-color: #eeeeee;
width: 300px;
}
img {
float: left;
margin-right: 16px;
border: 1px solid #000000;
box-sizing: border-box;
}
p::after {
content: "";
display: block;
clear: both;
}出力例
ネズミは哺乳類に分類される小型の動物で、鋭い嗅覚と高い繁殖力を持つのが特徴です。
自然界では種子や昆虫を食べることで生態系の一部を担う一方、人の生活圏では食べ物や建物に被害を与えることもあります。
警戒心が強く狭い隙間にも入り込めるため、身近でありながら完全に姿を見かけることは少なく、その行動力と適応力の高さがネズミの大きな特徴と言えます。
ウシは哺乳類に分類される大型の家畜で、主に肉や乳を得るために人と深く関わってきた動物です。
草を主食とする反芻動物で、複数の胃を使って効率よく栄養を吸収します。
温厚な性格と高い適応力を持ち、農業や食文化を支える存在として、世界中で重要な役割を果たしています。
ここでの例にはheightを指定していませんが、floatされた子要素を含んだまま、親要素の高さが保持されます。
clear単体では親要素の高さを補正できないため、回り込みの解除にはこちらを使用することをお勧めします。
通常のfloatでは、回り込みは要素の外枠に沿って発生します。
shape-outsideを使うと、回り込みの形そのものを指定できます。
構文
セレクタ{
shape-outside:値;
}
shape-outsideは、floatされた要素に対してのみ有効です。
回り込みの基準となる形を指定することで、テキストの流れを変えられます。
| 値 | 形状・役割 | 補足 | 使用頻度 |
|---|---|---|---|
| none | 回り込み形状を指定しない | デフォルト。解除用としても使用 | 高 |
| margin-box | マージンを含む矩形 | box系指定の基本 | 中 |
| border-box | 枠線まで含む矩形 | 特定条件でのみ使用 | 低 |
| padding-box | padding までの矩形 | 使用場面は限定的 | 低 |
| content-box | 内容領域のみの矩形 | 実務で使うことは稀 | 低 |
| circle() | 円形 | 回り込み指定で最も多い | 高 |
| ellipse() | 楕円形 | 円で足りない場合 | 中 |
| inset() | 四角形（内側指定） | 調整しやすく実務向き | 高 |
| polygon() | 任意の多角形 | 管理コストが高い | 低 |
| url() | 画像参照 | 対応・運用ともに難しい | 低 |
一覧表の中でも頻度が高いcircle()・inset()を扱います。
コード例
<h4 id="shape-circle">circle()</h4>
<div>
<p>float要素</p>
<p>後続要素はfloat要素の円に沿った形でテキストが配置されます。わかりにくいですが文頭が円に沿っています。このように特殊な回り込みも可能です。</p>
</div>
<h4 id="shape-inset">inset()</h4>
<div>
<p>float要素</p>
<p>後続要素はfloat要素の四角に沿った形でテキストが配置されます。topの値を25pxにしたことにより、四角形の上から回り込んでいます。このように特殊な回り込みも可能です。</p>
</div>div {
width: 300px;
border: 1px solid #000000;
box-sizing: border-box;
}
#shape-circle + div p:last-child::after, #shape-inset + div p:last-child::after {
content: "";
display: block;
clear: both;
}
#shape-circle + div p:first-child {
float: left;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
shape-outside: circle(50%);
clip-path: circle(50%);
background-color: #fefdc4;
}
#shape-inset + div p:first-child {
float: left;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #fefdc4;
clip-path: inset(25px 10px 20px 0);
shape-outside: inset(25px 10px 20px 0);
}出力例
float要素
後続要素はfloat要素の円に沿った形でテキストが配置されます。わかりにくいですが文頭が円に沿っています。このように特殊な回り込みも可能です。
float要素
後続要素はfloat要素の四角に沿った形でテキストが配置されます。topの値を25pxにしたことにより、四角形の上から回り込んでいます。このように特殊な回り込みも可能です。
出力例で説明した通りに回り込みがされています。
効果を確認するには、幅と高さが明示されている必要があります。
複雑な形状も指定できますが、基本的な理解としては円形や四角形に留めるのが現実的です。