CSS floatを初心者向けに図で解説 抑えるべき注意点とは?

web開発

2016/12/06

web開発

CSSのfloatプロパティについて、HTML/CSS初心者向けに解説します。

floatプロパティを使えば、要素を横並びにすることができます。よく使うプロパティの1つなので、ぜひこの記事でCSS floatプロパティの基礎をマスターしておきましょう!

具体的なコードと見やすい図でわかりやすく解説しているので、HTML/CSS初心者にもやさしい内容です。ぜひ最後までご覧ください。

 

CSS floatプロパティとは?

まずは、CSS floatプロパティとは何かについて解説します。

例えば、以下のようなHTMLがあるとき、floatプロパティを指定しなければ、要素が縦に並びます。

【結果】

floatプロパティを指定しない場合の結果

しかし、floatプロパティを使えば、以下のように要素を横に並べることができます。

要素が横並びになった例

以上がCSS floatプロパティのイメージです。次の章からは、floatプロパティの書き方について解説します。

 

CSS floatプロパティの書き方

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

※CSSの書き方があまり理解できていない人は、CSSについて解説した記事をご覧ください。

横並びにしたい要素に対して

のように指定することで、floatプロパティによる横並びを実現できます。

floatの値には、

1:left(要素を左寄せにする)

2:right(要素を右寄せにする)

3:none(初期値。配置を指定しない)

の3つがあります。3:noneを使う機会はほぼないので、1と2だけ覚えておきましょう。

CSS floatプロパティの書き方は以上です。

 

CSS floatプロパティを書いてみよう!

では、実際にfloatプロパティを使ってみましょう。

まずは、以下のようなHTMLにCSSを適用します。

【HTML】

※div classがあまり理解できていない人は、div classとは何かについて解説した記事をご覧ください。

【CSS】

※background-colorプロパティを詳しく学習したい人は、background-colorについて解説した記事をご覧ください。

以上のHTMLとCSSを、ブラウザで確認すると、以下のようになります。

HTML/CSSの適応結果

今のままではfloatプロパティを指定していないので、要素が縦並びになっていますね。

では、この3つの要素にfloatプロパティを適用して、横並びにしてみます。

CSSにfloatプロパティを追加しましょう。

【結果】

floatプロパティの適応結果

要素が横並びになりましたね。

今回は、横並びにしたい要素が3つなので、3つの要素すべてに「float: left;」を適応しています。

値が「left」なので、左寄せになっていることにも注目してください。以上がCSS floatプロパティの使い方の例です。

次の章では、floatプロパティを使うことによる問題点とその解消法を解説していきます。

 

CSS floatプロパティによる回り込みを防ぐには?

CSS floatプロパティは非常に便利なプロパティですが、1つ注意点があります。

先ほどのCSSにおける、pinkクラスに適応していた「float: left;」の記述を削除してみましょう。

そして、もう一度結果を見てみます。

【結果】

float:leftの削除結果

どこに問題があるか気づきましたか?

ピンク色の要素には「float:left;」を指定していないにも関わらず、横並びになっています。

しかも、ピンク色の要素に「float:left;」を指定した時と比べて、幅の長さも変わっています。

float:leftを指定している時と指定していない時の比較

floatプロパティを適応した要素は、イメージとして、画面から「浮いてしまう」ような状態になってしまいます。

なので、画面とfloatプロパティを適応した要素の間に「すき間」ができてしまい、その「すき間」にfloatプロパティを適応していない要素が入りこんでしまいます。

floatによる回り込み

 

floatによる回り込みを解除するには?

以上のように、floatによる回り込みを解除するには、回り込む要素に対してclearプロパティを使います。

上記の例のように、ピンク色のブロックに対して

を指定すると、「float: left」を指定している黄色と緑色の空いたすき間に回り込まなくなります。

では、CSSを以下のように記述しましょう。

【結果】

clear:leftの指定結果

floatによる回り込みを解除できましたね。clearプロパティはfloatプロパティと共にとく使われるので覚えておきましょう!

CSS floatプロパティを使うときの注意点(回り込み)と回り込みを解除する方法の解説は以上です。

 

いかがでしたか?CSS floatプロパティの解説は以上になります。

繰り返しになりますが、CSS floatプロパティはよく使うプロパティの1つなので、ぜひ使えるようにしておきましょう!

  

体系的にCSSを習得したい方にはこちらの動画がおすすめです

CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター

CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター

70以上のレッスン、7時間以上のレッスンでCSSをマスターするコースです。最新のCSS3に関する内容も充実しています。

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事