column-count を利用した段組み表示 - CSS
column-count を利用して段組み表示をするコードを紹介します。
概要
ページを段組み表示する方法には、floatを利用する方法やFlexBoxを利用する方法、Grid Layoutを利用する方法がありますが、
column-countを利用する方法もあります。この記事では、column-countを利用してページの段組み表示をするコードを紹介します。
書式
記述例
.ContentsFrame {
column-count: 3;
}
実装例
コード
以下のHTML, CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="column-count-simple.css" />
</head>
<body>
<h1>column-count による段組みのデモ</h1>
<div class="Container">
<div class="ContentFrame">
<p>枠1です。</p>
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>EEEEE</li>
</ul>
</div>
<div class="ContentFrame">
<p>枠2です。</p>
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>EEEEE</li>
<li>FFFFF</li>
</ul>
</div>
<div class="ContentFrame">
<p>枠3です。</p>
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>EEEEE</li>
</ul>
</div>
<div class="ContentFrame">
<p>枠4です。</p>
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>EEEEE</li>
<li>FFFFF</li>
</ul>
</div>
</div>
</body>
</html>
.Container {
border: 1px solid #0062a9;
column-count: 4
}
.ContentFrame {
border:1px solid #008912;
}
解説
以下の記述により、Containerクラスの枠では、4列の段組みで表示します。
.Container {
border: 1px solid #0062a9;
column-count: 4
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ウィンドウ幅を狭めた場合の表示です。ページ幅に合わせてコンテンツ枠の幅も狭まります。
なお、それぞれの枠のコンテンツの長さに大きな差がある場合には下図の表示になります。
枠の途中で次の段にコンテンツが表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
