<multicol> 段組みのレイアウトを作成する

X
f
LINE
B!
p

取り扱い	廃止された要素
カテゴリ	なし
親にできる要素	―
子にできる要素	―
対応ブラウザ	caniuseで確認

このタグは非推奨または廃止になりました。新しく作るウェブサイトへの使用は避けて下さい。また、既存のソースコードの中に含まれている場合は更新をお勧めします。詳しくは現行の標準仕様に従って下さい。

<multicol>タグの説明

<multicol>は、Netscape Navigatorが独自に採用したタグです。段組を行う際に便利なタグですが、現行のバージョンでは廃止されているため、使用は控えて下さい。

このタグは、かつてテーブルを駆使して段組みを再現していた時代のものです。現在では、HTMLやCSSの標準仕様が進化したおかげて、段組みのレイアウトも楽に実現できるようになりました。複数のカラムを組みたい場合は、flexやgridのレイアウトを覚えましょう。

<multicol>に指定できる主な属性

width="値": 段組全体の幅をpx値や％値で指定します。
cols="値": いくつ段組を作成するかを数字で指定します。
gutter="値": 段組と段組の間隔を指定します。初期値は10pxです。

<multicol>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

HTML

<multicol width="400px" cols="3" gutter="15px">
<p>
<font color="#FF0000">1カラム目</font><br />
HTMLで段組を表現する事は少し苦労するかも知れません。しかし、段組のやり方を正しく理解すれば、もっとウェブサイト制作が楽しくなります。HTMLを覚えたらCSSにも挑戦してみましょう！</p>

<p>
<font color="#FF0000">2カラム目</font><br />
HTMLで段組を表現する事は少し苦労するかも知れません。しかし、段組のやり方を正しく理解すれば、もっとウェブサイト制作が楽しくなります。HTMLを覚えたらCSSにも挑戦してみましょう！</p>

<p>
<font color="#FF0000">3カラム目</font><br />
HTMLで段組を表現する事は少し苦労するかも知れません。しかし、段組のやり方を正しく理解すれば、もっとウェブサイト制作が楽しくなります。HTMLを覚えたらCSSにも挑戦してみましょう！</p>
</multicol>

表示確認

対応しているブラウザで見るとこのような段組で表示されます。これはあくまで再現です。

1カラム目
HTMLで段組を表現する事は少し苦労するかも知れません。しかし、段組のやり方を正しく理解すれば、もっとウェブサイト制作が楽しくなります。HTMLを覚えたらCSSにも挑戦してみましょう！

2カラム目
HTMLで段組を表現する事は少し苦労するかも知れません。しかし、段組のやり方を正しく理解すれば、もっとウェブサイト制作が楽しくなります。HTMLを覚えたらCSSにも挑戦してみましょう！

3カラム目
HTMLで段組を表現する事は少し苦労するかも知れません。しかし、段組のやり方を正しく理解すれば、もっとウェブサイト制作が楽しくなります。HTMLを覚えたらCSSにも挑戦してみましょう！