Pocket
LINEで送る

[HTMLとCSSの悩みどころ] リストタグとフロート

floating

コンテンツ

[Experiment] float: left; makes <ul> <li> list horizontal

When I wrote HTML/CSS code,
creating a horizontal list had repeatedly bothered me.

Which <li> tag should I use “float: left;” on?

When is the right time to use “clear: both;”?

So I check the effect after using these CSS codes on <li> tag. [13 ways]
Thank you for reading!

<ul><li>タグとfloat: left;の関係にいつも悩んでいた

ウェブサイトを構築する時にお馴染みのHTMLとCSS。
その中で以前から、
横並びのリストを作成する際の
<ul><li>とfloat: left;の取り扱いにもやもやしてきました。

float: left;による回り込みの解除をclear: both;で行うタイミングも

どの要素にまでfloat: left;をあてれば良いのか

どこでfloatを解除すれば良いのか(clear: both;使用)

そこで、これからのサイト運営の為にも
ここで両者の関係をはっきりとさせる事にしました。

実験ルール

黒点「・」を消す為に
あらかじめulタグにlist-style: none;を設定。

実験で使用する
一郎・二郎・三郎イラストは同サイズ。
(145×210px・枠線含まず)

基本ソースコード

1
2
3
4
5
6
7
<ul style="list-style: none;">
    <li><img src=""></li>
 
    <li><img src=""></li>
 
    <li><img src=""></li>
</ul>

1.全くfloat: left;をあてていない状態

  • ichirou
  • jirou
  • saburou

箇条書きの形になります。
一番シンプルな状態です。

[Case #1]
一郎 → float: left; ×
二郎 → float: left; ×
三郎 → float: left; ×

2.一郎にのみfloat: left;をあてている状態

  • ichirou
  • jirou
  • saburou

二郎が一郎の右側に回り込んでいる事がわかります。

[Case #2]
一郎 → float: left; ○
二郎 → float: left; ×
三郎 → float: left; ×

3.二郎にのみfloat: left;をあてている状態

  • ichirou
  • jirou
  • saburou

三郎が二郎の右側に回り込んでいる事がわかります。

[Case #3]
一郎 → float: left; ×
二郎 → float: left; ○
三郎 → float: left; ×

4.三郎にのみfloat: left;をあてている状態

  • ichirou
  • jirou
  • saburou

この本文自体(pタグ)が
三郎の右側に回り込んでいる
事がわかります。
続く見出し(hタグ)はfloatをclear: both;で解除しています。

[Case #4]
一郎 → float: left; ×
二郎 → float: left; ×
三郎 → float: left; ○

5.一郎と二郎にfloat: left;をあてている状態

  • ichirou
  • jirou
  • saburou

二郎が一郎の右側に回り込んでいる事がわかります。
三郎が二郎の右側に回り込んでいる事がわかります。
その結果、横並びになる事がわかります。

[Case #5]
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

6.一郎と二郎にfloat: left;をあて、三郎を1/2サイズにした状態

  • ichirou
  • jirou
  • saburou

上記5.の実験結果に加えて
なんと、この本文自体(pタグ)が
余白スペースに流れ込んで
います。
続く見出し(hタグ)はfloatをclear: both;で解除しています。

[Case #6]
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; × 1/2 size

7.一郎にのみfloat: left;をあて、二郎と三郎を1/2サイズにした状態

  • ichirou
  • jirou
  • saburou

二郎が一郎の右側に回り込んでいる事がわかります。
そして三郎が余白スペースに流れ込んでいます。

[Case #7]
一郎 → float: left; ○
二郎 → float: left; × 1/2 size
三郎 → float: left; × 1/2 size

8.一郎にのみfloat: left;をあて、二郎と三郎を1/4サイズにした状態

  • ichirou
  • jirou
  • saburou

上記7.の実験結果に加えて
この本文自体(pタグ)が余白スペースに流れ込んでいます。
続く見出し(hタグ)はfloatをclear: both;で解除しています。

[Case #8]
一郎 → float: left; ○
二郎 → float: left; × 1/4 size
三郎 → float: left; × 1/4 size

9.上記の8.の状態に、二郎にclear: both;をあてている状態

  • ichirou
  • jirou
  • saburou

箇条書きの形になります。

[Case #9]
一郎 → float: left; ○
二郎 → float: left; × 1/4 size clear: both;
三郎 → float: left; × 1/4 size

10.上記の8.の状態に、三郎にclear: both;をあてている状態

  • ichirou
  • jirou
  • saburou

三郎が余白スペースに流れ込む事態を防いでいます。

[Case #10]
一郎 → float: left; ○
二郎 → float: left; × 1/4 size
三郎 → float: left; × 1/4 size clear: both;

11.一郎と三郎にfloat: left;をあてている状態

  • ichirou
  • jirou
  • saburou

二郎が一郎の右側に回り込んでいる事がわかります。
そしてこの本文自体(pタグ)が
三郎の右側に回り込んでいる事がわかります。
続く見出し(hタグ)はfloatをclear: both;で解除しています。

[Case #11]
一郎 → float: left; ○
二郎 → float: left; ×
三郎 → float: left; ○

12.二郎と三郎にfloat: left;をあてている状態

  • ichirou
  • jirou
  • saburou

三郎が二郎の右側に
回り込んでいる事がわかります。
そしてこの本文自体(pタグ)が
三郎の右側に
回り込んでいる事がわかります。
続く見出し(hタグ)はfloatを
clear: both;で解除しています。

[Case #12]
一郎 → float: left; ×
二郎 → float: left; ○
三郎 → float: left; ○

13.一郎・二郎・三郎にfloat: left;をあてている状態

  • ichirou
  • jirou
  • saburou

二郎が
一郎の右側に
回り込んでいる
事がわかります。
三郎が
二郎の右側に
回り込んでいる
事がわかります。
その結果、
横並びになる事がわかります。
そしてこの本文自体(pタグ)が
三郎の右側に回り込んでいる事がわかります。
続く見出し(hタグ)は
floatをclear: both;で解除しています。

[Case #13]
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ○

記事まとめ [<ul><li>タグとfloat: left;の関係ハッキリ]

もう何も自分の右側に回り込ませたくない時は
float: left;をあてない事

clear: both;でしっかりとfloatを解除しておく事が
予期しない回り込みを防ぎたい時に有効

<ul><li>とfloat: left;の使用方法の勘所が分かった事は、
これからのウェブサイトの運営・改善に向けて非常に大きな収穫でした!

画像の引用元 (Flickr・イラストAC)

ラフティング写真
作品名 floating
thejesse 様

一郎イラスト
作品名 アビシニアン(猫)
OOtsuki。 様

二郎イラスト
作品名 マンクス(猫
OOtsuki。 様

三郎イラスト
作品名 エキゾチック(猫)
OOtsuki。 様

ブログ次回更新日のお知らせ

3/8(土)前後にUP予定です。
HTMLとCSSの周辺知識について
頻出プロパティを一つ取り上げて
もう少し書いていきたいと考えています。(変更あり)

ライフハックお悩み解決製品・サービスの情報をまとめました↓

製品・サービスの公式ページを見る こんな製品・サービスです
ウェブキャンプ :Webスキルのパーソナルジム・いつでも質問 & 豊富な回答・オーダーメイドカリキュラムがおすすめポイント。自分でWebサイトを作れるようになりたいがプログラミング・デザインをどうやって学んでいったらよいか悩んでいる方におすすめです。
コードキャンプ :実務で通用するスキル全般を短期間で習得・上場企業や有力ベンチャーのエンジニアが講師を担当・受講生が本気でエンジニア就職・転職を実現できるよう より現場評価いただける教育がおすすめポイント。現役エンジニアによるプログラミングの個別指導サービスを探していて悩んでいる方におすすめです。
東京での就業と住まいを同時提供のTokyoDive
:東京での新生活をスムーズに始める・住居探しと仕事探しをする手間が省ける・何かとお金がかかる東京の生活で初期費用を抑えるがおすすめポイント。東京で新生活を始めたい・シェアハウスに興味がある・東京に飛び出したいが不安で一歩が踏み出せないと悩んでいる方におすすめです。
リツアンSTCは、エンジニアに特化した人材紹介会社(派遣・業務委託・正社員紹介)です!
:漫画も面白い(同じ大学の研究室で学び、派遣エンジニアという職についた2人が10年ぶりに再開するところからスタートするストーリー)・社員の平均年収585万円!業界トップクラスの給与水準・自信があるからこそマージン率を公開がおすすめポイント。現在の勤め先に悩んでいて転職を考えている方におすすめです。
こんなに簡単!店舗向けホームページがすぐ始められる「グーペ」
:飲食店、美容院、ネイルサロンなどのお店だけではなく 塾、事務所、個人事業主、クリエイター、アイドルまで、 様々な業種のホームページが簡単に作れる・4,000通りものデザインパターン・初心者だけでなく、中・上級者の方も満足がおすすめポイント。ブログ感覚で手軽にお店のホームページを作成したいと考えているが、その方法が分からない!と悩んでいる方におすすめです。
Pocket
LINEで送る

比較表:説明

はみ出し情報

コメント欄

この記事はこんな人が書いています!

  • サイト管理人紹介
  • 管理人が現在気になっている青汁が
  • サンスター 粉末青汁 やわたのおいしい青汁 です。
  • 記事に間違いがありましたら、是非お知らせ下さい。
  • 確認の上、直ちに修正します。
  • またコメントも募集中です。

サイトご利用にあたって

  • 当サイトで公開している記事に掲載されている情報は
  • 自己責任でご活用下さい。
  • 特に医療・健康に関する情報は、ある人には最適(今現在)でも
  • あなたに最適とは限りません。
  • 必ずご自身の状態と照らし合わせて
  • 自分に最適だと判断してから掲載情報をご活用下さい。

スポンサーリンク

  • 「これは使ってみてあまり良くなかった」という
  • 製品・サービスがありましたら、是非お知らせ下さい。
  • 確認の上、お悩み解決製品・サービス一覧表への
  • 今後の掲載の継続を再度検討します。
  • また「これは使ってみてとても良かった」という
  • 製品・サービスがありましたら、こちらも是非お知らせ下さい。
サイトご利用にあたって

関連記事を見る