マルチカラムの段の数と横幅を指定するには?
要素書式
対応ブラウザ
値一覧
値 | 内容 |
段の幅 (column-width) | 段の幅を指定します。 |
段の数 (column-count) | 段の数を指定します。 |
解説文
従来、Webページで段組(マルチカラム)のレイアウトを実現するには、tableタグやfloatプロパティを使用する必要がありました。
CSS3では、段組を指定するための専用のプロパティが用意されています。
columnsプロパティは、マルチカラムの段の数と横幅を一括で指定することができます。
省略された値は、その初期値が指定されるようになります。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
div{
width: 600px;
-moz-columns:300px 2;
-webkit-columns:300px 2;
-ms-columns:300px 2;
columns:300px 2;
}
</style>
</head>
<body>
<div>
<p>彼は歩きながら、自分がどうして宇宙飛行士になりたかったのかを考え始めた。
それは、人類が初めて月に到達した日から、いつか自分も宇宙から地球を見てみたいと思っていたからであった。</p>
<p>今までもそのための努力はしてきた。そのつもりだったが、実際のところは行き詰まり感が彼の感情を支配していた。
そんな彼に忘れかけていた宇宙への憧れを思い出させたのが、彼女のあの言葉だったのだ。</p>
</div>
</body>
</html>
関連項目