path: root/files/ja/web/css/css_columns/using_multi-column_layouts/index.html

---
title: 段組みレイアウトの使用
slug: Web/CSS/CSS_Columns/Using_multi-column_layouts
tags:
  - Advanced
  - CSS
  - CSS Multi-column Layout
  - Guide
  - Layout
  - Web
translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
---
<div>{{CSSRef}}</div>

<p class="summary"><span class="seoSummary">CSS の<ruby><strong>段組みレイアウト</strong><rp> (</rp><rt>Multi-column Layout</rt><rp>) </rp></ruby>は、<em>ブロックレイアウトモード</em>を拡張して、文章の段組みを定義しやすくするものです。</span>行が長すぎると、文章が読みづらくなるものです。行末から次の行の先頭まで目を移動する距離が長すぎると、どの行を読んでいたか見失ってしまうことがあります。したがって、大きな画面を最大限に活用するためには、新聞のように幅が狭い段を並べた方が適切です。</p>

<p>残念ながら、 CSS と HTML では位置を指定してで段を区切ったり、文章に許されるマークアップを厳重に制限したり、大げさなスクリプトを使用したりしなければ実現できません。この制限は、従来のブロックレイアウトモードを拡張する新しい CSS プロパティを追加することで解決します。</p>

<h2 id="Using_columns" name="Using_columns">段組みの使用</h2>

<h3 id="Column_count_and_width" name="Column_count_and_width">段の数と幅</h3>

<p>2つの CSS プロパティ、 {{cssxref("column-count")}} と {{cssxref("column-width")}} で、段組みをするかどうか、段数をいくつにするかを制御します。</p>

<p><code>column-count</code> プロパティで、段数を特定の数に設定します。例えば以下のようにします。</p>

<h2 id="Example_1" name="Example_1">例1</h2>

<h3 id="HTML">HTML</h3>

<div id="column_count">
<pre class="brush: html notranslate">&lt;div id="col"&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.
  &lt;/p&gt;
  &lt;p&gt;
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  &lt;/p&gt;
  &lt;p&gt;
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.
  &lt;/p&gt;
  &lt;p&gt;
    Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.
  &lt;/p&gt;
&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">#col {
  column-count: 2;
}
</pre>
</div>

<h3 id="Result" name="Result">結果</h3>

<p>コンテンツが（段組み対応のブラウザーを使用していれば）2段で表示されます。</p>

<p>{{EmbedLiveSample("column_count", "100%")}}</p>

<p><code>column-width</code> プロパティは最小限ほしい段の幅を設定します。 <code>column-count</code> の値が一緒に設定されていない場合は、ブラウザーは有効な幅に収まるできるだけ多くの段を自動的に作成します。</p>

<h2 id="Example_2" name="Example_2">例2</h2>

<h3 id="HTML_2">HTML</h3>

<div id="column_width">
<pre class="brush: html notranslate">&lt;div id="wid"&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum
&lt;/div&gt;
</pre>

<h3 id="CSS_2">CSS</h3>

<pre class="brush: css notranslate">#wid {
  column-width: 100px;
}
</pre>
</div>

<h3 id="Result_2" name="Result_2">結果</h3>

<p>{{EmbedLiveSample("column_width", "100%")}}</p>

<p>より厳密な詳細については、 <a class="external" href="https://www.w3.org/TR/css3-multicol/">CSS3 仕様書</a>で説明されています。</p>

<p>段組みをしたブロックでは、コンテンツは必要に応じてある段から次の段に流れます。 HTML、 CSS、 DOM 機能はすべて段組みでの編集や印刷に対応しています。</p>

<h3 id="The_columns_shorthand" name="The_columns_shorthand">一括指定の columns</h3>

<p>たいていの場合、ウェブデザイナーは {{cssxref("column-count")}} と {{cssxref("column-width")}} の2つのうち1つを使用します。これらのプロパティの値は重複しないので、一括指定の {{cssxref("columns")}} を使うのがふつうは便利です。例えば以下のようにします。</p>

<p>CSS 宣言の <code>column-width: 12em</code> は <code>columns: 12em</code> に置き換えることができます。</p>

<h2 id="Example_3" name="Example_3">例3</h2>

<h3 id="HTML_3">HTML</h3>

<div id="column_short">
<pre class="brush: html notranslate">&lt;div id="col_short"&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum
&lt;/div&gt;
</pre>

<h3 id="CSS_3">CSS</h3>

<pre class="brush: css notranslate">#col_short {
  columns: 12em;
}
</pre>
</div>

<p>{{EmbedLiveSample("column_short", "100%")}}</p>

<p>CSS 宣言 の <code>column-count: 4</code> は <code>columns: 4</code> に置き換えられます。</p>

<h2 id="Example_4" name="Example_4">例4</h2>

<h3 id="HTML_4">HTML</h3>

<div id="example_4_columns">
<pre class="brush: html notranslate">&lt;div id="columns_4"&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum
&lt;/div&gt;
</pre>

<h3 id="CSS_4">CSS</h3>

<pre class="brush: css notranslate">#columns_4 {
  columns: 4;
}
</pre>
</div>

<h3 id="Result_3">Result</h3>

<p>{{EmbedLiveSample("example_4_columns", "100%")}}</p>

<p><code>column-width: 8em</code> と <code>column-count: 12</code> の2つの CSS 宣言は、 <code>columns: 12 8em</code> で置き換えることができます。</p>

<h2 id="Example_5" name="Example_5">例5</h2>

<h3 id="HTML_5">HTML</h3>

<div id="example_12_columns">
<pre class="brush: html notranslate">&lt;div id="columns_12"&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum
&lt;/div&gt;
</pre>

<h3 id="CSS_5">CSS</h3>

<pre class="brush: css notranslate">#columns_12 {
  columns: 12 8em;
}
</pre>
</div>

<h3 id="Result_4" name="Result_4">結果</h3>

<p>{{EmbedLiveSample("example_12_columns", "100%")}}</p>

<h3 id="Height_Balancing" name="Height_Balancing">高さの均衡</h3>

<p>CSS3 の段組みの仕様書では、段の高さが揃っていなければならないと規定されています。つまり、ブラウザーは自動的に段の高さの最大値を設定し、各段のコンテンツの高さはおよそ同じになります。 Firefox はこれを行っています。</p>

<p>しかし、場合によっては段の高さの最大値を明示的に設定し、コンテンツを最初の段から配置して必要に応じていくつもの段を作成し、右に流れることができるようにすることが有用であることもあります。従って、段組みブロックに CSS の {{cssxref("height")}} または {{cssxref("max-height")}} プロパティを設定することで高さを制限すると、それぞれの段は新しい段を追加する前にその高さまで伸びていきます。このモードはレイアウトではるかに効率的です。</p>

<h3 id="Column_Gaps" name="Column Gaps">段間</h3>

<p>段と段の間には隙間があります。推奨される既定値は <code>1em</code> です。この寸法は段組みブロックに {{cssxref("column-gap")}} プロパティを適用することで変更することができます。</p>

<h2 id="Example_6" name="Example_6">例6</h2>

<h3 id="HTML_6">HTML</h3>

<div id="col_gap">
<pre class="brush: html notranslate">&lt;div id="column_gap"&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum
&lt;/div&gt;
</pre>

<h3 id="CSS_6">CSS</h3>

<pre class="brush: css notranslate">#column_gap {
  column-count: 5;
  column-gap: 2em;
}
</pre>
</div>

<h3 id="Result_5" name="Result_5">結果</h3>

<p>{{EmbedLiveSample("col_gap", "100%")}}</p>

<h2 id="Graceful_Degradation" name="Graceful_Degradation">グレイスフルデグラデーション</h2>

<p>段組みのプロパティは、段組みに対応していないブラウザーでは単に無視されます。従って、そのようなブラウザーでは一列で表示し、対応しているブラウザーでは段組みを行うというレイアウトが比較的簡単に作成できます。</p>

<h2 id="Conclusion" name="Conclusion">まとめ</h2>

<p>CSS3 の段組みは、ウェブ開発者が画面の資産を最大限に活用できるようにするためのレイアウト方法です。想像的な開発者は、特に自動的に高さを調整する機能を利用して、様々な利用方法を見つけるでしょう。</p>