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

<multicol>タグの説明

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

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

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

width="値"

段組全体の幅をpx値や％値で指定します。

cols="値"

いくつ段組を作成するかを数字で指定します。

gutter="値"

段組と段組の間隔を指定します。初期値は10pxです。

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

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

<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>