column-count を利用した段組みで、途中で次の列に分割表示されないようにする - CSS
column-count を利用した段組みで、途中で次の列に分割表示されないようにするコードを紹介します。
概要
column-count を利用して段組みされた表示ができますが、枠の途中で次の列に分割されて表示されてしまう場合があります。
この記事では、枠の途中で次の列に分割されないようにするコードを紹介します。
書式
枠の途中で分割されないようにするには break-inside プロパティを設定します。
プロパティの値には以下が指定できます。
| 値 | 意味 |
|---|
| avoid | 途中の改ページ、段落区切り、領域区切りいずれも禁止します。 |
| avoid-page | 途中の改ページを禁止します。 |
| avoid-column | 途中の段区切りを禁止します。 |
| avoid-region | 途中の領域区切りを禁止します。 |
| auto | 途中での分割を許容します。 |
実装例
コード
以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="column-count-simple-avoid-break.css" />
</head>
<body>
<h1>column-count による段組みのデモ (break-inside:avoid)</h1>
<div class="Container">
<div class="ContentFrame">
<p>枠1です。</p>
<p>枠1のサブキャプションです。<br />あいうえお</p>
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
</ul>
</div>
<div class="ContentFrame">
<p>枠2です。</p>
</div>
<div class="ContentFrame">
<p>枠3です。</p>
<p>枠3のサブキャプションです。<br />あいうえお</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>枠4です。</p>
<p>枠4のサブキャプションです。<br />あいうえお</p>
</div>
<div class="ContentFrame">
<p>枠5です。</p>
<p>枠5のサブキャプションです。<br />あいうえお</p>
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>EEEEE</li>
</ul>
</div>
<div class="ContentFrame">
<p>枠6です。</p>
<p>枠6のサブキャプションです。<br />あいうえお</p>
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>EEEEE</li>
<li>FFFFF</li>
<li>GGGGG</li>
<li>HHHHH</li>
<li>IIIII</li>
<li>JJJJJ</li>
</ul>
</div>
</div>
</body>
</html>
.Container {
border: 1px solid #0062a9;
column-count: 4;
}
.ContentFrame {
border: 1px solid #008912;
break-inside:avoid;
}
解説
column-count: 4;の指定により、枠内を4段組みで表示します。
.Container {
border: 1px solid #0062a9;
column-count: 4;
}
内部の枠に
break-inside:avoid; を指定して、枠が分割表示されないようにします。
.ContentFrame {
border: 1px solid #008912;
break-inside:avoid;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。枠の途中で分割されて次の列に表示されなくなりました。
break-inside:auto; の場合は下図の表示になります。枠の途中で分割され、次の列に表示されていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
