マルチカラムの段の横幅を指定するには？
要素書式
対応ブラウザ
値一覧
| 値 | 内容 |
| 段の横幅 | 段の横幅を指定します。
指定できる値は次の通りです。
「auto」：段の幅がほかのプロパティ（例えば「auto」以外の値を持つcolumn-countなど）によって決定されます。
「長さ」：最適な幅を指定します。
実際に表示される段の幅は指定する幅の値より広くなることも狭くなることもあります。（親要素の領域が段の幅の合計より大きい（または小さい）場合、親要素の領域の幅に合うように段の幅が拡大（または縮小）されます）
また、指定される値は0より大きいである必要があります。
なお、「column-width」プロパティの初期値は「auto」となります。 |
解説文
従来、Webページで段組（マルチカラム）のレイアウトを実現するには、tableタグやfloatプロパティを使用する必要がありました。
CSS3では、段組を指定するための専用のプロパティが用意されています。
column-widthプロパティは、マルチカラムの横幅を指定することができます。
サンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
div{
width: 600px;
-moz-column-gap: 0;
-webkit-column-gap: 0;
-ms-column-gap: 0;
column-gap: 0;
-moz-column-rule: none;
-webkit-column-rule: none;
-ms-column-rule: none;
column-rule: none;
-moz-column-width:200px;
-webkit-column-width:200px;
-ms-column-width:200px;
column-width: 200px;
}
</style>
</head>
<body>
<div>
<p>彼は歩きながら、自分がどうして宇宙飛行士になりたかったのかを考え始めた。
それは、人類が初めて月に到達した日から、いつか自分も宇宙から地球を見てみたいと思っていたからであった。</p>
<p>今までもそのための努力はしてきた。そのつもりだったが、実際のところは行き詰まり感が彼の感情を支配していた。
そんな彼に忘れかけていた宇宙への憧れを思い出させたのが、彼女のあの言葉だったのだ。</p>
</div>
</body>
</html>
サンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
div{
width: 600px;
-moz-column-count: 2;
-webkit-column-count: 2;
-ms-column-count: 2;
column-count: 2;
-moz-column-gap: 0;
-webkit-column-gap: 0;
-ms-column-gap: 0;
column-gap: 0;
-moz-column-rule: none;
-webkit-column-rule: none;
-ms-column-rule: none;
column-rule: none;
-moz-column-width:200px;
-webkit-column-width:200px;
-ms-column-width:200px;
column-width: 200px;
}
</style>
</head>
<body>
<div>
<p>彼は歩きながら、自分がどうして宇宙飛行士になりたかったのかを考え始めた。
それは、人類が初めて月に到達した日から、いつか自分も宇宙から地球を見てみたいと思っていたからであった。</p>
<p>今までもそのための努力はしてきた。そのつもりだったが、実際のところは行き詰まり感が彼の感情を支配していた。
そんな彼に忘れかけていた宇宙への憧れを思い出させたのが、彼女のあの言葉だったのだ。</p>
</div>
</body>
</html>
関連項目
