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

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

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

<multicol>タグの説明

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

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

<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)に挑戦してみて下さい!

<multicol>に関連するHTMLタグ

非推奨または廃止になったタグ
<acronym> 略語(頭字語)であることを表す
<applet> JAVAアプレットを埋め込む
<basefont> 文字の基準となるサイズ、色、フォントの指定
<bgsound> 効果音やバックミュージックを鳴らす
<big> 文字をひと周り大きく表示する
<blink> 文字を点滅させる
<center> センタリングする
<command> ページ内のメニューに操作コマンドを設定する
<dir> ディレクトリ・リストを表す
<font> フォントの色や大きさを変える
<frame> フレームに表示するファイルを指定する
<frameset> ウィンドウを分割する
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<keygen> フォーム送信時に暗号鍵を発行する
<listing> タグを解釈してソースをそのまま表示する
<marquee> 文字列をスクロールさせる(流れる文字)
<menuitem> コンテキストメニューの項目を作成する
<multicol> 段組みのレイアウトを作成する
<nobr> 自動改行を無効にする
<noembed> プラグインが利用できない環境での表示内容を指定する
<noframes> フレームが表示できない環境での表示内容を指定する
<plaintext> ソースをテキストとしてそのまま表示する
<rb> ルビをふる文字の区切りを指定する
<spacer> ホワイトスペースを挿入する
<strike> 文字列に打ち消し線を引く
<tt> 文字を等幅フォントで表示する
<xmp> ソースをそのまま表示する