記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【CSS】floatの基礎知識・使い方徹底解説(サンプルコード付き)

CSS「float」「clear」を初心者の方向けに紹介。 基礎知識はもちろんのこと、具体的な方法をサンプルコード付きで詳しく解説。初心者が最初につまずきやすい「要素の横並び」ですが、サンプルコード付きなので実際に手を動かして学ぶ事ができ安心して読み進める事ができます。

カテゴリ: HTML/CSS

こんにちは!
「要素の横並びってどうやるの・・?」「floatが上手くいかない・・・」「float・clearを実践的に使えるようになりたい・・!」

要素の横並びは、初心者web制作者にとって、つまずいてしまう最初のポイントではないでしょうか?

横並びをする事ができなければ、配置を思うようにする事ができません。

今回は初心者の方向けに、「float」「clear」について詳しく解説していきます。

float

floatとは、指定した要素を横並びにできるプロパティです。

意図的な横並びを指定しない限り基本的には、ブロック単位の縦並びで表示されます。
しかしウェブ制作をしていると、横並びにしたい事は数多く出てきます。

floatの書き方

●基本記述
セレクタ{
float:値;
}

セレクタに、横並びにしたい要素を指定します。

指定できる値

内容
left 要素を左寄せにする
right 要素を右寄せにする
none 初期値。横並び解除。

floatを指定

left(左寄せ)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
赤と青の緑の要素を「左寄せ」の横並びにしたいので、横並びにしたい要素「.red」「.blue」「.green」にfloat: left;を指定し横並びにしています。

right(右寄せ)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
赤と青の緑の要素を「右寄せ」の横並びにしたいので、横並びにしたい要素「.red」「.blue」「.green」にfloat: right;を指定し横並びにしています。

none(初期値、横並び解除)

「float: none;」は初期値であり、横並びにしているfloatを解除することもできます。

例えば、PC画面では横並びにしたい、でもスマホ画面では横並びを解除して、縦並びにしたい。
そんな時、スマホに「float: none」を指定することで横並びを解除する事ができます。

文字の回り込み

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
回り込み表示させたい文章を要素直下に記述し、要素に「float」を指定する事で文書を回り込みさせる事ができます。

floatの注意点

ここまでは、簡単に横並びにする事ができましたが、floatには注意点があります。

注意点1(floatの回り込み)

floatの回り込みとは?

floatプロパティは、要素が浮いた状態を作っています。
floatを指定している要素と指定していない要素が混じると、浮いた状態の要素に、
浮いていない(そのまま)の要素が下に周り込むといった現象が起きます。

例えば赤、青、緑の要素3点

赤と青だけに「float」を指定すると、
下記のように緑色が見えなくなりました。
これは赤と青の要素が浮いた下に緑の要素が隠れてしまっている為です。

赤の下に緑が隠れている、これがfloatによる回り込みです。
floatの回り込みを解除する方法があります。

floatの回り込み解除

floatの回り込みを解除するには「clear」プロパティを使用します。

●clearの記述方法
セレクタ{
clear: 値;
}

回り込みを防ぎたい要素をセレクタに指定し、値を指定する事で回り込みを防ぐ事ができます。

指定できる値

内容
both 左右の回り込み解除
left 左寄せの回り込み解除
right 右寄せの回り込み解除

指定できる値は、3点ありますが基本的には、「both」のみを使用します。
片方だけでなく左右に使用でき、left rightどちらの指定にも対応できるからです。

実際に赤、青、緑の3点のうち「赤」「青」の2点だけに「float」を指定し回り込みを解除してみます。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

注意点2(親要素の中に子要素がある場合)

親要素の中に子要素があり(親要素にheightが指定されていない)場合は注意が必要です。

上記状態で、各子要素に「float: left」を指定した場合
本来あるはずの親要素は消えてしまいます。

親要素が消える理由は、親要素の高さは子要素に依存して高さが設定されていました。
ですが子要素が全てfloat(浮いて)しまっている状態なので、依存する高さがなくなり、親要素の形が保てなくなり、親要素が消えてしまいました。

解決方法は2つあります

1.親要素に高さを指定する
親要素に高さを直接記入する事で、親要素自体の高さを指定できます。

2.「overflow」プロパティを使用する
「overflow」プロパティ値「hidden」を指定する事で親要素は子要素の高さを認識する事ができ高さを保て、親要素が隠れてしまう事を防ぐ事ができます。

まとめ

今回は初心者の方向けに、「float」「clear」について解説してきました。

最後にポイントをまとめます。

1.floatとは
指定した要素を横並びにできるプロパティ

2. floatの書き方
セレクタ{
float:値;
}

3.float指定できる値

内容
left 要素を左寄せにする
right 要素を右寄せにする
none 初期値、横並び解除

4.floatの回り込み解除は
「clearfix」プロパティを使用する

5.clearの使用方法
セレクタ{
clearfix: 値;
}

6.clear指定できる値

内容
both 左右の回り込み解除
left 左寄せの回り込み解除
right 右寄せの回り込み解除

いかがだったでしょうか?
「float」「clear」は、多くの初心者web制作者にとって、つまずいてしまう最初のポイントです。少し難しく感じてしまうかもしれませんが、慣れれば簡単に使用することができます。
本記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。