要素のフローティング(float)プロパティの仕様と使い方
カテゴリ:CSS編
floatプロパティの概要
floatプロパティは要素を浮遊(フローティング)させる場合に使用します。
主にページや要素内のレイアウトの設定に用いられます。
floatプロパティに指定可能なキーワード
floatプロパティに指定可能なキーワードは草稿段階のものも含めて以下となります。
block-start、block-end、inline-start、inline-end、snap-block、snap-inline、left、right、top、bottom、none
但しGoogle Chrome、Microsoft Edge、Apple Safari、Mozilla Firefoxなどの主要なすべてのブラウザでサポートされているキーワードはleft、right、noneのみとなります。それ以外のキーワードは参考程度にお考えください。
inline-start
float-referenceのline-startの外側の端に浮かぶボックスを生成します。
コンテンツはボックスのline-end側に浮かびます。
Notefloat-referenceプロパティはfloatプロパティが配置されているエンティティを指します。floatはfloat-referenceで指定されたfloat参照の開始位置または終了位置に合わせます。float-referenceには、フロートアンカーの行ボックスであるinline、column、region、pageを指定できます。
注意2019年7月7日の時点でfloat: inline-startに対応しているWebブラウザはFireFox 55以降のみです。それ以外のWebブラウザでは反映されません。
例).sample_box {
float: inline-start;
float-reference: column;
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
inline-end
float-referenceのline-endの外側の端に浮かぶボックスを生成します。
コンテンツはボックスのline-start側に浮かびます。
注意2019年7月7日の時点でfloat: inline-endに対応しているWebブラウザはFireFox 55以降のみです。それ以外のWebブラウザでは反映されません。
例).sample_box {
float: inline-end;
float-reference: column;
}
インライン要素の場合:
<div>
<span class="sample_box">インライン要素1</span>
<span>インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
block-start
float-referenceがラインボックスの場合:
block-startはinline-startのように動作します。
float-referenceがラインボックスではない場合:
要素はfloat-referenceのblock-startとline-startの外側の端に浮かぶボックスを生成します。
floatのインラインサイズを参照するmax-widthまたはmax-heightプロパティの初期値は '100%'となります。
コンテンツはボックスのblock-end側に浮かびます。
注意2019年7月7日の時点でfloat: block-startに対応しているWebブラウザはありません。
例).sample_box {
float: block-start;
float-reference: column;
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
block-end
float-referenceがラインボックスの場合:
block-endはinline-endのように動作します。
float-referenceがラインボックスではない場合:
要素は浮動小数点参照のblock-endとline-startの外側の端に浮かぶボックスを生成します。
floatのインラインサイズを参照するmax-widthまたはmax-heightプロパティの初期値は '100%'となります。
コンテンツはボックスのblock-start側に浮かびます。
注意2019年7月7日の時点でfloat: block-endに対応しているWebブラウザはありません。
例).sample_box {
float: block-end;
float-reference: column;
}
インライン要素の場合:
<div>
<span class="sample_box">インライン要素1</span>
<span>インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
left
float-referenceがラインボックスの場合:
float-referenceのline-leftに対応するinline-startまたはinline-endのように動作します。
それ以外の場合:
ブロックの方向と書き込みモードを含むfloatに応じて、block-end、inline-start、またはinline-endのように動作します。
例)
.sample_box {
float: left;
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
right
float-referenceがラインボックスの場合:
float-referenceのline-rightに対応するinline-startまたはinline-endのように動作します。
それ以外の場合:
ブロックの方向と書き込みモードを含むfloatに応じて、block-start、inline-start、またはinline-endのように動作します。
例)
.sample_box {
float: right;
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
top
ブロックの方向と書き込みモードを含むfloatに応じて、block-startまたはinline-startのように振る舞います。
例)
注意2019年7月7日の時点でfloat: topに対応しているWebブラウザはありません。
.sample_box {
float: top;
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
bottom
ブロックの方向と書き込みモードを含むfloatに応じて、block-endまたはinline-endのように動作します。
例)
注意2019年7月7日の時点でfloat: bottomに対応しているWebブラウザはありません。
.sample_box {
float: bottom;
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
snap-block(<長さ> [, start | end | near ]?)
要素がどちらか一方から一定の距離内に自然に現れる場合は、要素をブロックの先頭または末尾に移動させます。
長さの値は、浮遊する要素が入るべきstart/endからの最大距離を指定します。
長さの値が1つの場合はstartとendの両方からの距離を指し、長さの値が2つの場合はそれぞれstartとendからの距離を指します。
オプションのキーワード値は、要素をどの位置に移動させるかを指定します。
start、end、またはその2つのうちの最も近い方となります。
初期値はnearです。
nearが有効で、要素がstartとendの両方から指定された距離内にある場合、endが勝ちます。
指定された距離内に要素が表示されなくても、要素がsnap-block値を持つ場合、その要素はfloatと見なされます。
このようにして、文書をレイアウトせずに要素がfloatかどうかを判断できます。
例)
注意2019年7月7日の時点でfloat: snap-blockに対応しているWebブラウザはありません。
.sample_box {
float: snap-block(2.5em);
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
snap-block
snap-block(2em, near)と同じです。
snap-inline(<長さ> [, left | right | near ]?)
要素が行頭または行末から一定の距離内に自然に出現する場合は、要素を行頭または行末に移動させます。
長さの値は、浮遊する要素が入るべきstart/endからの最大距離を指定します。
長さの値が1つの場合はstartとendの両方からの距離を指し、長さの値が2つの場合はそれぞれstartとendからの距離を指します。
オプションのキーワード値は、要素をどこに移動させるかを指定します。
つまり、行頭、行末、またはその2つのうち最も近い行となります。
初期値はnearです。
nearが有効で、要素がstartとendの両方から指定された距離内にある場合、endが勝ちます。
指定された距離内に要素が表示されなくても、要素がsnap-inline値を持つ場合、その要素はfloatと見なされます。
このようにして、文書をレイアウトせずに要素がfloatかどうかを判断できます。
注意2019年7月7日の時点でfloat: snap-inlineに対応しているWebブラウザはありません。
例).sample_box {
float: snap-inline(2.5em);
}
インライン要素の場合:
<div>
<span>インライン要素1</span>
<span class="sample_box">インライン要素2</span>
</div>
ブロック要素の場合:
<div>
<div>ブロック要素1</div>
<div class="sample_box">ブロック要素2</div>
</div>
snap-inline
snap-inline(2em, near)と同じです。
none
ボックスは浮遊しません。
さいごに
本記事では今後の対応のために、CSS3でまだ草稿段階のキーワードについても記述していますが、見てきたように、2019年7月7日の時点では、殆どのWebブラウザがサポートしているfloatプロパティのキーワードはleft、right、noneのみです。そのため現時点ではこれ以外のキーワードを使用することは避けた方が無難でしょう。
以上、要素のフローティングプロパティについて解説いたしました。
公開日時:2019年07月07日 15:27:20