Webデザイン

[CSS]floatプロパティの具体的な4つの使用方法、解除のやり方と注意点

CSSのfloatプロパティの使い方について解説していきます。

CSSにおいてfloatプロパティはかなり重要で、デザインをコントロールしていくうえで欠かすことはできないのですが、使い方を一歩間違えれば全体的なデザインが崩れてしまう可能性もある、やや癖のあるプロパティでもあります。

しかし、しっかりと使い方を理解しておけば思うようにレイアウトを構築できるようになりますので、きちんと抑えておきたいですね。

floatプロパティとは

英語のfloatとは[浮く・漂う]という意味になりますが、CSSの世界では浮くというよりか、「漂う」という意味合いが強いように思います。

floatプロパティでは、指定した要素(セレクタ)を指定した方向に振る事ができます。また、その後に続く要素に「回り込み」を発生させます。要素を振るだけなら問題ないのですが、この回り込みの仕様がやっかない事を招く事があります。

プロパティの値には、[left][right][none]が使用できます。

HTML構造は、基本的に左に回り込んでいく仕様になっていますので、float[left]はあまり必要ないと思われるかもしれませんが、場合によっては必要になります。

[none]は、float設定をなしにしますので、設定を解除したい場合、特にPCサイトをスマホ対応のレスポンシブ仕様にする際などに使っていきます。

no image
ホームページをスマホ対応のレスポンシブ設定にする方法【ホームページ制作入門講座】

続きを見る

floatプロパティ使用での注意点

floatプロパティには、その後に続く要素に、引き続き回り込みをさせる効果があります。

例えば以下のようなHTML場合には、下のようになります。

<div style="background: red;">FLOAT1</div>
<div style="background: yellow;">FLOAT2</div>
<div style="background: cyan;">FLOAT3</div>

実装例

FLOAT1
FLOAT2
FLOAT3

上記全て[div]でありますので、ブロック要素です。

しかし、[FLOAT2]に[float: right;]を以下のように当てると、下のようになります。

<div style="background: red;">FLOAT3</div>
<div style="background: yellow; float: right;">FLOAT2</div>
<div style="background: cyan;">FLOAT3</div>

実装例

FLOAT3
FLOAT2
FLOAT3

この時、本来なら黄色の[FLOAT2]より一段下がっているはずの[FLOAT3]が、左に回り込んで[FLOAT1]の直下にきています。

構造的にこれで問題なければいいのですが、問題がある事も多々あります。

そんな時には、floatを解除する処理が必要になります。

float解除の処理をすると以下のようになります。

<div style="background: red;">FLOAT1</div>
<div style="background: yellow; float: right;">FLOAT2</div>
<div style="background: cyan; clear: both;">FLOAT3</div>

実装例A

FLOAT1
FLOAT2
FLOAT3

floatの解除処理は、場合によっては不要な時もあるかもしれません。しかし、最初はレイアウトが正常に見えていたけれども、なんらかのタイミングで別要素が引っかかってしまい原因不明の悪さをする可能性もあります。ですので、私の場合は、どんな状況でもfloatを設定したタイミングでfloatの解除設定を同時に設置するようにしています。

floatの解除処理方法

それでは、具体的にfloatの解除処理の方法をご説明致します。

1.直後の要素に[clear: both;]を当てる

上記の実装例Aでは、特に親要素があったり、他の要素にfloatがかけられている要素もありませんのでfloatをかけた要素の直後に[clear: both;]を当てると解除する事ができます。

2.擬似要素afterを使う

親要素があったり、他の要素にfloatがかかっている場合、その他とにかく解除できない場合には、まとめて親要素に解除処理を当てる方法があります。個人的にはこちらの方がよく使います。

floatプロパティを当てた要素の親要素[xxx]に対して以下のCSS設定を行います。

<div class="xxx" style="background: red;">//親要素
<div style="background: yellow; float: left; width: 30%;">FLOAT2</div>
<div style="background: cyan; float: right; width: 30%;">FLOAT3</div>
</div>

xxx:after{
display: block;
content: "";
clear: both;
}

実装例

FLOAT2
FLOAT3

上記を日本語で説明すると、[xxx]の親要素の直後をブロック要素にし、擬似要素afterの設定ペアである[content]には[""]と何もいれず(空白)にし、[clear: both;]でfloat設定を解除します。という意味合いになります。

なかなかイメージしにくいかもしれませんが、これはこの形で覚えるという事で問題ないと思いますので、floatをかければこの設定をするという具合で覚えておきましょう。

擬似要素の[:after]に関しては、以下の記事よりご確認ください。

no image
[CSS]擬似要素と擬似クラスの意味や注意点、メリットデメリットなどを解説します!【ホームページ制作入門講座】

続きを見る

clearfixを使った解除方法

floatプロパティは結構頻繁に使いますので、上記のような擬似要素設定を毎回のように書くのはやや手間です。

そんな時によく使われるのが、[clearfix]と呼ばれるテクニックで、[clearfix]というオリジナルクラス名を1個だけ用意しておき、必要がある度にHTMLに直接インラインでクラスを追記していく方法で、以下のような形になります。

clearfix:after{
display: block;
content: "";
clear: both;
}

<div class="xxx clearfix" style="background: red;">
<div style="background: yellow; float: left; width: 30%;">FLOAT2</div>
<div style="background: cyan; float: right; width: 30%;">FLOAT3</div>
</div>

HTMLの基本

[div class="xxx clearfix"]の[xxx]と[clearfix]の間には半角スペースを入れておきましょう。半角スペースを入れる事でクラスを追加する事ができます。

ポイント

[clearfix]は任意のクラス名なのでなんでもいいのですが、慣例的に[clearfix][clear]などのクラス名が当てられている事が多いですね。[wrapper][container]のようなニュアンスです。

具体的なfloatプロパティの使用方法

floatプロパティの使用方法は大きく分けて4つになります。

1.ブロック要素を横並びにする

ブロックを横並びにする場合は、要素をインラインブロックにする方法もありますが、その方法だと左詰めでブロックが構築されていきますので、両端を揃えるのに若干直感的な操作が劣ります。

とは言っても、全然問題なく利用できる構築方法ですので、場合によっては使っていきましょう。私の場合は、ブロックが2個の場合はfloat、それ以上の場合はインラインブロック化して対応するようにしています。

<div class="clearfix" style="background: red;">
<div style="background: yellow; float: left; width: 30%;">FLOAT2</div>
<div style="background: cyan; float: right; width: 30%;">FLOAT3</div>
</div>

実装例

FLOAT2
FLOAT3

 

注意ポイント

この場合は、両要素共にfloatをかけていますので、[clearfix]をつけるクラスは、括っている親要素になります

2.要素を単純に右寄せにする

要素(以下の例では「NO.1」)を単純に右寄せにする場合があります。

例えば以下のようなHTML構造の場合は、「記事の見出し」の横に「NO.1」が続く形になります。

<div>記事の見出し<span>NO.1</span></div>

実装例

記事の見出しNO.1

「NO.1」がブロック要素だと[text-align: right;]で対応可能なのですが、[span]には文字の領域が確保されていませんので、要素自体を振る必要があります

では、最初からブロック要素の[div]や[p]で構築すれば?となりますが、そもそもブロック要素だと「記事の見出し」の横にはくる事ができません

その際に使用するのがfloatになります。

<div class="clearfix">記事の見出し<span style="float: right;">NO.1</span></div>

実装例

記事の見出しNO.1

3.ネガティブマージンの設定

ネガティブマージンを設定する際にもfloatは役立ちます。

ネガティブマージンの事に関してまとめた記事を用意しておりますので、詳しくはそちらからご確認お願い致します。

[CSS]ネガティブマージンの4つの具体的な使い方と効かない時の対応方法

続きを見る

4.文字を回り込みさせる

あえて文字の回り込みを利用する場合もあります。

Yahoo!ニュースなどでは多様されているテクニックではありますが、一般的なブログ記事などでは写真が小さくなることや、回り込みの処理がやっかい、そもそも古いテクニックなのであまり多用されないように思います。

<div class="clearfix"><img src="https://designerbrg.com/blog/wp-content/uploads/2019/09/thumb_none.jpg" style="float: right;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>

実装例

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ポイント

上記のようにする場合は、[img]を必ずテキストの前に持ってくるようにしないと、うまく回り込みは発生しませんので意識しましょう。また、その後の解除設定もきっちりしておきましょう。

まとめ

いかがでしたでしょうか?

CSSで利用するfloatプロパティは、サイト構築する上でかなり重要な要素となりますが、回り込みの仕様により意図しない挙動になったりもしますので、使い方は要注意です。

floatを指定した要素には一般的に[clearfix]と呼ばれる回り込みの解除がほぼ必要になりますので、「float設定=解除の設定もする!」と覚えておきましょう。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.