CSS3基本チュートリアル

CSS3 フレックスサイズ(box-sizing)CSS3 アニメーション(Animations)

CSS3 多列レイアウト

CSSの多列レイアウトを使用して3、要素のテキスト内容を多列に分けることができます。

多列レイアウトの作成

CSS3多列レイアウトモジュールが導入されました。これにより、シンプルかつ効果的に複数の列レイアウトを作成できます。今では、マガジンや新聞で見るようなレイアウトを作成するためにフロートボックスを使用する必要はありません。これはCSSを使用して作成されたものです。3多列レイアウト機能を使用した、テキストを3列に分けるシンプルな例です。

例

p　{
　　　　-webkit-column-count:　3;　/*　Chrome、Safari、Opera　*/
　　　　　　　-moz-column-count:　3;　/*　Firefox　*/
　　　　　　　　　　　　column-count:　3;　
}

テストを見て‹/›

列数や幅を設定します。

CSS属性 column-countとcolumn-widthは何列を表示するか及び表示する列数を指定します。column-count属性はmulticol要素内の列数を設定し、column-width属性は必要な列幅を設定します。

例

p　{
　　　　-webkit-column-width:　150px;　/*　Chrome、Safari、Opera　*/
　　　　　　　-moz-column-width:　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width:　150px;　
}

テストを見て‹/›

注：column-widthは列の最適な幅を指定します。しかし、実際の列幅は利用可能なスペースに応じて広がったり狭くなったりすることがあります。この属性はcolumnと混同すべきではありません。-count属性と一緒に使用できます。

列間隔を設定できます。

column属性を使用して、-gap属性は、列間の間隔を指定します。各列間に同じ間隔が適用されます。デフォルトの間隔はnormalで、1emを使用して。

例

p　{
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
}

テストを見て‹/›

列ルールを設定できます。

column属性を使用して、-rule属性は、1つの宣言でルールの幅、スタイル、色を設定するために使用される簡略化属性です。column-rule属性はborderおよびoutlineと同じ値を使用します。

例

p　{
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px　solid　red;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px　solid　red;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px　solid　red;
}

テストを見て‹/›

注意：列ルールの幅は、列フレームの幅に影響を与えませんが、列ルールの幅がギャップよりも大きい場合、隣接する列フレームはそのルールに重なります。

CSS3多列属性

以下の表は、すべての多列属性を簡単に要約しています：

属性	説明
column-count	多列要素内の列数を指定します。
column-fill	指定された内容がどのように列にわたって分布するかを指定します。
column-gap	指定された列間の間隔を指定します。
column-rule	指定された列間に描画する線または尺度を指定します。
column-rule-color	指定された列間の規則的な色を指定します。
column-rule-style	指定された列間の規則的なスタイルを指定します。
column-rule-width	指定された列間の規則的な幅を指定します。
column-span	指定された要素が何列を越えるかを指定します。
column-width	指定列の最適な幅を指定します。
columns	同時に設定するために使用されます。column-widthおよびcolumn-countこの属性のショートカット属性です。

CSS3 フレックスサイズ(box-sizing)CSS3 アニメーション(Animations)