ywork2020.com

Title

包含ブロックを横並びにする

目次 (INDEX)

floatとは

float とは次の語句からなるCSSのプロパティです。
float
読み: フロート
意味: 浮かぶ、浮動する

目次に戻る

floatプロパティの概要

このプロパティは要素に含まれるブロックを左右どちらかに並行移動するとともに、次の要素を並列表示させることができます。

インライン要素は終了タグの後に改行を自動で生成しないので、このプロパティを使用するケースは少ないかもしれませんが、 ブロックレベル要素は終了タグの後に自動的に改行が行われるため、スタイルの指定がない場合は、次の要素は下方に配置されます。 このブロックレベル要素の自動改行をコントロールすることができるプロパティでもあります。

またブロックレベル要素の次の要素にインライン要素を配置した場合には、インラインのテキストをブロックレベル要素の周囲に回り込みさせることもできます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{float: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルで使用する要素は以下の2つです。divやspanは特別なマークアップとしての意味を持たないコンテナー要素であり、 デザインやコンテンツの視認性をよくするためのスタイル寄りの要素です。

目次に戻る

初期値: none

このプロパティの初期値はnoneです。 noneは「無い」という意味ですので、要素は浮動しません。

「浮動」の部分に関しては、次の項目で説明していますので、そちらを見ていただくと理解しやすいと思います。 ここでは要素が縦方向にならんで表示されているというところに着目していただいて、次項をみていだだきたいと思います。

また、最後のdiv要素には、 class属性 を付けて、その属性値に対してCSSのスタイル設定をしています。 これは、要素名で指定したセレクターにスタイルを指定するよりも、後に記述したclass属性名のセレクターのスタイル指定が有効化されるので 、結果としてdiv要素でスタイル指定した効果をclass属性名で指定したスタイルで上書きして設定値を変更しているということになります。

div要素1
span要素1
div要素2
span要素2
div要素3 class="clsClear" (ここでfloatプロパティを無効にします。)

div{float: none;}
span{float: none;}
.clsClear{clear: both;}

目次に戻る

キーワード値: left

このプロパティにleftキーワードを指定した場合、要素は左側に浮動した状態となり、次の要素の間には改行が発生しません。

サンプルを見ていただくと分かると思いますが、前項では縦並びなっていた要素が横並びになっていると思います。 これは、プロパティのleftキーワードが適用された要素が、左側に浮いたような状態となり、改行コードが生成されないために 次の要素が右側に回り込みをしている状態です。

div要素1
span要素1
div要素2
span要素2
div要素3 class="clsClear" (ここでfloatプロパティを無効にします。)

div{float: left;}
span{float: left;}
.clsClear{clear: both;}

目次に戻る

キーワード値: right

このプロパティにrightキーワードを指定した場合、要素は右側に浮動した状態となり、次の要素の間には改行が発生しません。

これは、プロパティのrightキーワードが適用された要素が、右側に浮いたような状態となり、改行コードが生成されないために 次の要素が左側に回り込みをしている状態です。

div要素1
span要素1
div要素2
span要素2
div要素3 class="clsClear" (ここでfloatプロパティを無効にします。)

div{float: right;}
span{float: right;}
.clsClear{clear: both;}

目次に戻る

要素の回り込みについて: インラインからブロックに変化

このプロパティの効果がインライン要素に適用されると、その要素はブロックレベル要素と同じ性質を持つことになります。 そのことについて実際のサンプルで見ていきたいと思います。

次のサンプルはspan要素に長文のテキストを記述した例です。 span要素にはfloatはnoneにしています。

div要素
span要素 サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキストサンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト
div要素 class="clsClear" (ここでfloatプロパティを無効にします。)

div{float: left;}
span{
	float: none;
	width: 50%;
}
.clsClear{clear: both;}

span要素はインライン要素です。つまり、行のラインでコンテンツを表示するための要素ですので、前の要素の横にテキストが回り込みをしても 回り込み領域を過ぎると前の要素の下方にテキストは折り返されていきます。また、インライン要素に width プロパティは効きませんので要素の幅を設定できていません。

それではspan要素にもfloatを効かせた場合のサンプルを見てみましょう。

div要素
span要素 サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキストサンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト
div要素 class="clsClear" (ここでfloatプロパティを無効にします。)

div{float: left;}
span{
	float: left;
	width: 50%;
}
.clsClear{clear: both;}

サンプルを見るとインライン要素であるspan要素が、ブロックレベル要素と同じように一つのブロックとして回り込みをしています。 また、インライン要素に効かないwidthプロパティも効いています。

以上のことからインライン要素もfloatプロパティを効かせるとブロックとして扱われるということが分かります。

目次に戻る

グローバル値

floatプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のnoneに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{float: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能ですが、displayプロパティの値がnoneの場合には効果はありません。
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

float: none;

float: left;

float: right;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る