HTMLのmulticolタグによるテキストの複数カラム（段組み）レイアウト

HTMLの<multicol>タグは、テキストを複数のカラム（段組み）に分割して表示するためのタグです。カラムの数やサイズを自由に制御することができます。<multicol>タグは<div>タグと同じように、他のあらゆるHTMLコンテンツを内包できる点が特徴です。タグ内のコンテンツは通常どおり表示されますが、Netscape 4では内容が1カラムではなく複数のカラムに振り分けて表示されました。

注意： このタグはNetscape 3以降でのみサポートされた非標準のタグであり、現在では廃止されています。最新のブラウザでは動作しないため、実際のWeb制作では後述するCSSマルチカラムレイアウトの使用を推奨します。

multicolタグの主な属性

使用例

次のコードで、テキストフローの複数カラムレイアウトを試すことができます。

<h1>Breaking News</h1>
<multicol cols = 3>
    <p>State media said more than 2,000 soldiers, police and miners
    closed the breach in the dike in Shandong province early Sunday and
    installed pipes and five high-speed pumps, but gave no indication if
    there were any signs of life.</p>

    <p>The Huayuan Mining Co. mine flooded on Friday afternoon when the
    Wen river burst a dike, sending water pouring into a shaft and trapping
    172 miners, Xinhua and state television said.</p>
</multicol>

現代の代替手段：CSSマルチカラムレイアウト

<multicol>タグはすでに廃止されているため、現在のWeb制作ではCSSのマルチカラムレイアウト（Multi-column Layout Module）を使用します。次のように記述することで、同様の段組み表示を標準準拠の方法で実現できます。

.columns {
  column-count: 3;   /* カラム数 */
  column-gap: 20px;  /* カラム間の余白 */
}

CSS方式であれば、主要なブラウザすべてで一貫した段組みレイアウトが可能になり、レスポンシブデザインにも柔軟に対応できます。