ITコラム

colmun_main5780

ITコラム

2017.05.31

CSS【 float 】 ~ 浮かせて並べる

floatプロパティは、HTML要素を左側または右側に寄せて配置する際に使用するプロパティです。floatプロパティを指定した要素の後に続く内容は、floatプロパティで指定した要素が配置されていない右側または左側に表示されます。
今回は、段組みなどのレイアウトで重要な役割を担うfloatプロパティについてまとめたいと思います。

目次

 1.floatプロパティ
 2.floatの解除

1.floatプロパティ

通常、HTML要素は縦方向に順次表示されますが、画像の横に文章が表示されたり、ナビゲーションとコンテンツが左右に並んでいるwebサイトを見たことがあると思います。
このようなレイアウトを実現する際によく使用されるのがfloatプロパティです。

floatプロパティの値は、次の通りです。

none デフォルト値
配置を指定しない
left 指定した要素を左側に寄せて配置(後続の内容は右側に回り込む)
right 指定した要素を右側に寄せて配置(後続の内容は左側に回り込む)

floatプロパティの値は、継承されません。
また、floatプロパティは、positionプロパティにstatic以外の値が指定されている要素を除き、全要素に使用できます。

 

float: left

画像とテキストとを順次記述すると、通常は次のように表示されます。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

 
上の例で、画像を表示する要素のfloatプロパティにleftを指定すると、次のようになります。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

 

float: right

上の例で、画像を表示する要素のfloatプロパティにrightを指定すると、次のようになります。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
div#sample p {margin:0;}
.smpbox {width:180px; height:180px; margin:5px 10px 10px 0; float:right; /* またはfloat:left; */}

(HTML)
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
    <p>
      彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。
    </p>
  </div>
</div>

▲目次へ戻る

2.floatの解除

2つの要素にそれぞれfloat:leftの指定をすると、左側から横並びに表示されます。
次に、横並びの2つの要素の下に表示させたい要素を記述する場合、次のような表示になることがよくあります。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。
2つの要素の下に表示させたい要素(float指定なし)

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
.smpbox {width:100px; height:100px; margin:5px 10px 10px 0; background:#6CF; float:left;}
.smpbox2 {width:100px; height:200px; margin:5px 10px 10px 0; background:#FF9696; float:left;}
.smpbox3 {width:300px; height:300px; margin:5px 10px 10px 0; background:#31A9EE;}

(HTML)
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
  <div class="smpbox2">
    <small>彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。</small>
  </div>
  <div class="smpbox3">2つの要素の下に表示させたい要素(float指定なし)</div>
</div>

 
この現象は、floatプロパティの特徴に原因があります。
floatプロパティは、float(浮動する)の言葉通り、要素を浮かせて移動させる指定をします。

上の例では、float:leftを指定した画像要素とテキスト要素を、浮かせて左側に移動させています。
この2つの要素は浮いた状態にあるという認識のため、浮いたことによって空いた地上スペースに、次の要素(フロート指定のない水色領域)が入っているという状態です。

このようなfloatプロパティの特徴を踏まえて、当初の意図通りの表示を実現するためには、clearプロパティを使用します。

clearプロパティは、floatプロパティによって左寄せ(または右寄せ)指定された要素の、次の要素に対する回り込みの指定を解除するプロパティです。

clearプロパティの値は、left、right、both、の3つです。
leftとrightは、それぞれfloat:left、float:rightを解除するもので、bothは両方を解除します。
解除もれ防止のためにも、特に問題がなければclear:bothを指定します。

clear:bothを指定すると、テキストが回り込まず、水色領域が下に表示されます。

彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。
2つの要素の下に表示させたい要素(float指定なし)

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
.smpbox {width:100px; height:100px; margin:5px 10px 10px 0; background:#6CF; float:left;}
.smpbox2 {width:100px; height:200px; margin:5px 10px 10px 0; background:#FF9696; float:left;}
.smpbox3 {width:300px; height:300px; margin:5px 10px 10px 0; background:#31A9EE; clear:both;}

(HTML)
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
  <div class="smpbox2">
    <small>彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。</small>
  </div>
  <div class="smpbox3">2つの要素の下に表示させたい要素(float指定なし)</div>
</div>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.