iPentec.com  /  Doc  /  CSS  /  段組み  /  CSS Float

目次

Floatプロパティを利用したCSSによる2段組みレスポンシブページの実装 - CSS

Floatプロパティを利用したCSSによる2列段組みについて紹介します。

オーソドックスな実装

float:left を用いて段組みする方法です。オーソドックスな実装です。

コード

LRColumnSimple.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
	<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn"><img width="200" src="img/a.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn"><img width="200"src="img/b.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn"><img width="200"src="img/c.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn"><img width="200"src="img/d.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn"><img width="200"src="img/e.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn"><img width="200"src="img/f.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

  </div>
</body>
</html>
LRColumnSimple.css
body {
  background-color:#C0C0C0;
}

.Container {
  background-color:#FFFFFF;
  width:760px;
  margin-left:auto;
    margin-right:auto;
}

.LeftColumn {
  float:left;
  width:360px;
}

.RightColumn {
  float:left;
  width:360px;
}

.EndColumn {
  clear:left;
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の表示結果となります。

補足：画像を枠の中央に表示

画像を枠の中央に表示する場合は、画像がある枠に text-align:center を指定します。
LRColumnSimpleImageCenter.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
	<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="img/a.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn" style="text-align:center;"><img width="200"src="img/b.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn" style="text-align:center;"><img width="200"src="img/c.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn" style="text-align:center;"><img width="200"src="img/d.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn" style="text-align:center;"><img width="200"src="img/e.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn" style="text-align:center;"><img width="200"src="img/f.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

  </div>
</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の表示結果となります。画像が段組みの枠の中央に表示されます。

レスポンシブでの表示について

LRColumnSimpleResponsiveW1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW1.css" />
	<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="img/a.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn" style="text-align:center;"><img width="200"src="img/b.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn" style="text-align:center;"><img width="200"src="img/c.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn" style="text-align:center;"><img width="200"src="img/d.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

    <div class="LeftColumn">説明、説明文です。</div>
    <div class="RightColumn" style="text-align:center;"><img width="200"src="img/e.png" /></div>
    <div class="EndColumn"></div>

    <div class="LeftColumn" style="text-align:center;"><img width="200"src="img/f.png" /></div>
    <div class="RightColumn">説明、説明文です。</div>
    <div class="EndColumn"></div>

  </div>
</body>
</html>
LRColumnSimpleResponsiveW1.css
body {
  background-color:#C0C0C0;
}

.Container {
  background-color:#FFFFFF;
  width:70%;
  margin-left:auto;
    margin-right:auto;
}

.LeftColumn {
  float:left;
  width:360px;
}

.RightColumn {
  float:left;
  width:360px;
}

.EndColumn {
  clear:left;
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の表示となります。


ここで幅を狭くすると、下図の表示に変わります。floatで左詰めしていますが、幅が狭くなったため折り返された表示になります。このとき、画像に対する説明文が画像が右の枠の場合は画像の上に説明文が表示され、画像が左の枠は説明文が画像の下に表示されてしまします。

レスポンシブに対応する例

先のHTMLではウィンドウの幅が狭くなり枠が折り返される場合には説明文の位置が同じ場所にならない問題があります。この現象を回避するコードを紹介します。
LRColumnSimpleResponsiveW2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW2.css" />
	<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="TextColumnA">説明、説明文です。</div>
    <div class="ImageColumnA" style="text-align:center;"><img width="200" src="img/a.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">説明、説明文です。</div>
    <div class="ImageColumnB" style="text-align:center;"><img width="200"src="img/b.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">説明、説明文です。</div>
    <div class="ImageColumnA" style="text-align:center;"><img width="200"src="img/c.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">説明、説明文です。</div>
    <div class="ImageColumnB" style="text-align:center;"><img width="200"src="img/d.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">説明、説明文です。</div>
    <div class="ImageColumnA" style="text-align:center;"><img width="200"src="img/e.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">説明、説明文です。</div>
    <div class="ImageColumnB" style="text-align:center;"><img width="200"src="img/f.png" /></div>
    <div class="EndColumn"></div>

  </div>
</body>
</html>
LRColumnSimpleResponsiveW2.css
body {
  background-color:#C0C0C0;
}

.Container {
  background-color:#FFFFFF;
  width:70%;
  margin-left:auto;
    margin-right:auto;
}


.TextColumnA {
  float:left;
  width:360px;
}
.ImageColumnA {
  float:left;
  width:360px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.TextColumnB {
  float:right;
  width:360px;
}
.ImageColumnB {
  float:right;
  width:360px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;

}

.EndColumn {
  clear:both;
}

解説

左側に説明文、右側に画像を表示する枠ではTextColumnA, ImageColumnA クラスを利用します。これらのクラスはfloat:leftが指定されており、先に記述されている説明文が左に、画像が右に配置されます。 一方、右側に説明文、左側に画像を表示する枠では、TextColumnB,ImageColumnB クラスを利用します。これらのクラスは、float:rightが指定されているため、先に記述されている説明文が右に、画像が左に配置されます。
ウィンドウ幅が狭くなった場合は、float:leftの枠は先に記述されている説明文の枠が先に表示されます。float:rightが指定されている枠でも先に記述されている説明文の配置が先に実行されるため、画像より上に説明文の枠が表示されます。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


Webブラウザの幅を狭くします。枠が折り返されますが、説明文は一律に画像の上に表示されます。

実用的な例

先のコードをもとにより、実用的なコードを紹介します。

コード

LRColumnSimpleResponsive.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsive.css" />
	<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="TextColumnA">説明、説明文です。</div>
    <div class="ImageColumnA" style="text-align:center;"><img src="img/a.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">説明、説明文です。</div>
    <div class="ImageColumnB" style="text-align:center;"><img src="img/b.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">説明、説明文です。</div>
    <div class="ImageColumnA" style="text-align:center;"><img src="img/c.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">説明、説明文です。</div>
    <div class="ImageColumnB" style="text-align:center;"><img src="img/d.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">説明、説明文です。</div>
    <div class="ImageColumnA" style="text-align:center;"><img src="img/e.png" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">説明、説明文です。</div>
    <div class="ImageColumnB" style="text-align:center;"><img src="img/f.png" /></div>
    <div class="EndColumn"></div>

  </div>
</body>
</html>
LRColumnSimpleResponsive.css
body {
  background-color:#C0C0C0;
}

.Container {
  background-color:#FFFFFF;
  width:760px;
  margin-left:auto;
    margin-right:auto;
}


.TextColumnA {
  float:left;
  width:360px;
}
.ImageColumnA {
  float:left;
  width:360px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.ImageColumnA img{
  width:200px;
}

.TextColumnB {
  float:right;
  width:360px;
}
.ImageColumnB {
  float:right;
  width:360px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;

}

.ImageColumnB img{
  width:200px;
}

.EndColumn {
  clear:both;
}

@media screen and (max-width: 760px) {
   .Container {
    width:95%;
  }

  .TextColumnA {
    float:none;
    width:100%;
  }
  .ImageColumnA {
    float:none;
    width:100%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .ImageColumnA img{
    width:80%;
  }
  .TextColumnB {
    width:100%;
  }
  .ImageColumnB {
    width:100%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  } 
  .ImageColumnB img{
    width:80%;
  }
}

解説

先のコードと同じですが、CSSメディアクエリを利用し、ウェブブラウザの幅が760ピクセル以下の場合は、floatをnoneに設定し段組みをキャンセルします。また、画像も画面の幅80%で表示します。この表示により1段組みで表示されます。
CSSメディアクエリの詳細についてはこちらの記事を参照してください。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


ウィンドウの幅が760ピクセル以上の場合は2段組みで表示されます。


ウィンドウの幅が760ピクセル以下になると1段組みになります。画像の幅も横幅80%になります。


著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

最終更新日: 2024-01-06
作成日: 2016-02-19
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.