<multicol> 段組みのレイアウトを作成する
取り扱い | 廃止された要素 |
カテゴリ |
なし |
親にできる要素 | ― |
子にできる要素 | ― |
対応ブラウザ | 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にも挑戦してみましょう! |
<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> | ソースをそのまま表示する |