<multicol>タグの解説
<multicol>は、Netscape Navigatorが独自に採用したタグです。段組みを行う際に便利なタグでしたが、現在は廃止されているため、使用は控えて下さい。
このタグは、かつてテーブルを駆使して段組みを再現していた時代のものです。現在では、CSS（スタイルシート）で柔軟なレイアウトが可能となっています。複数の段組みを行いたい場合は、flexプロパティやgridプロパティを使用しましょう。
<multicol>要素に指定できる属性
width- 段組全体の幅をピクセル値や％値で指定します。
cols- いくつ段組を作成するかを数字で指定します。
gutter- 段組と段組の間隔を指定します。初期値は
10pxです。
<multicol>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。複数の段落を子要素に配置して、段組みの定義を行います。
<multicol>
<p>段落の内容。</p>
<p>段落の内容。</p>
</multicol>
このタグを使ったマークアップのサンプルです。対応しているブラウザでは、横並びの段組みで表示されます。しかし<multicol>は廃止されたタグであるため、ほとんどのブラウザでは正常に表示されません。
<multicol width="400px" cols="3" gutter="15px">
<div>
<h2>段落の見出し</h2>
<p>HTMLで段組みのレイアウトを行ってみましょう。CSSを使うといくつかのプロパティを指定するだけで簡単に段組みレイアウトを表現できます。実際にソースコードを書いて確かめてみましょう！</p>
</div>
<div>
<h2>段落の見出し</h2>
<p>HTMLで段組みのレイアウトを行ってみましょう。CSSを使うといくつかのプロパティを指定するだけで簡単に段組みレイアウトを表現できます。実際にソースコードを書いて確かめてみましょう！</p>
</div>
<div>
<h2>段落の見出し</h2>
<p>HTMLで段組みのレイアウトを行ってみましょう。CSSを使うといくつかのプロパティを指定するだけで簡単に段組みレイアウトを表現できます。実際にソースコードを書いて確かめてみましょう！</p>
</div>
</multicol>
CSSで段組みレイアウトを作成する
同じ構造の段組みレイアウトをCSSで再現できます。flexプロパティを使う方法とgridプロパティを使う方法の二種類があります。状況に応じて、使いやすい方を採用しましょう。
<div class="sample-block">
<div>
<h2>段落の見出し</h2>
<p>HTMLで段組みのレイアウトを行ってみましょう。CSSを使うといくつかのプロパティを指定するだけで簡単に段組みレイアウトを表現できます。実際にソースコードを書いて確かめてみましょう！</p>
</div>
<div>
<h2>段落の見出し</h2>
<p>HTMLで段組みのレイアウトを行ってみましょう。CSSを使うといくつかのプロパティを指定するだけで簡単に段組みレイアウトを表現できます。実際にソースコードを書いて確かめてみましょう！</p>
</div>
<div>
<h2>段落の見出し</h2>
<p>HTMLで段組みのレイアウトを行ってみましょう。CSSを使うといくつかのプロパティを指定するだけで簡単に段組みレイアウトを表現できます。実際にソースコードを書いて確かめてみましょう！</p>
</div>
</div>
HTMLの内容は共通しています。異なるのは、親要素のclass属性に指定されているsample-blockセレクタに対するスタイルの定義だけです。
/* flex を使用する場合 */
.sample-block {
display: flex;
gap: 1rem;
}
/* grid を使用する場合 */
.sample-block {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}