CSS Multi column Layout プロパティ 一覧 関数 要素 使い方・書き方 例 CSS サンプル

Multi column Layoutプロパティ・セレクタ プロパティとは

トピック:要素のテキストコンテンツを複数の列に分割できる ことができる

複数列レイアウトの作成

    情報:
  • 複数の列レイアウトを簡単かつ効率的に作成するための複数列レイアウトモジュールが導入されました。フローティングボックスを使わずに、雑誌や新聞に見られるようなレイアウトを作成することができる。ここでは、CSS3の複数の列レイアウト機能を使用して、テキストを3つの列に分割する簡単な例を示する ことができる。

実例 コード 1

  • p {
  •     -webkit-column-count: 3 ;
  • /* Chrome, Safari, Opera */
  •        -moz-column-count: 3 ;
  • /* Firefox */
  •             column-count: 3 ;
  • /* Standard syntax */
  •     }

列数または幅の設定

    情報:
  • CSSのプロパティcolumn-countcolumn-widthは、表示される列の有無とその数を制御する column-countプロパティは、multicol要素内の列数を設定する column-widthプロパティは、列の希望する幅を設定する ことができる。

実例 コード 2

  • p {
  •     -webkit-column-width: 150px;
  • /* Chrome, Safari, Opera */
  •        -moz-column-width: 150px;
  • /* Firefox */
  •             column-width: 150px;
  • /* Standard syntax */
  •     }
    トピック:
  • column-widthは、列の最適な幅を表示 するただし、実際の列幅は、使用可能なスペースに応じて、より広くても狭くてもかまいません。 このプロパティはcolumn-countプロパティで使用しないで下さい 。

列間隔の設定

    情報:
  • column-gapプロパティを使用すると、列間のギャップを 制御 できる 。 同じ隙間が各列間に 適用される 。 デフォルトのギャップは通常1emと等価 。

実例 コード 3

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

列ルールの設定

    情報:
  • 列間に行を追加することもする これは、 列ルールプロパティを使用してルールを追加することができる。 これは、単一の宣言でルールの幅、スタイル、および色を設定するための簡略化された プロパティ です 。 column-ruleプロパティーは、borderおよびoutlineと同じ値をとります。

実例 コード 4

  • 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;
  •     
  • /* Standard syntax */
  •     column-count: 3 ;
  •     column-gap: 100px;
  •     column-rule: 2px solid red;
  •     }
    トピック:
  • 列ルールの幅は列ボックスの幅には 影響しない が、列ルールがギャップよりも広い場合、隣接する列ボックスはルールと重複する ことができる。

プロパティ Multi column Layout 一覧

Multi column Layout プロパティ 一覧値Multi column Layout プロパティ 一覧内容 説明
break-afterとは、
multi-column layouts,ページングされたメディア、およびmulti-regionのコンテキストで生成されたボックスの前にブレークさせることができる。
break-beforeとは、
multi-column layouts,ページングされたメディア、およびmulti-regionのコンテキストで生成されたボックスの後にブレークさせることができる。
break-insideとは、
multi-column layouts,ページングされたメディア、およびmulti-regionのコンテキストでの不要なブレークを防ぐことができる。
column-countとは、
複数列要素の列数を指定することができる。
column-fillとは、
列の塗り方を指定することができる。
column-gapとは、
複数列要素の列間の間隔を指定することができる。
column-ruleとは、
複数列の要素の各列間に描画される直線、つまり「規則」を指定することができる。
column-rule-colorとは、
複数列レイアウトの列間に描画されるルールの色を指定することができる。
column-rule-styleとは、
複数列レイアウトの列間に描画されるルールのスタイルを指定することができる。
column-rule-widthとは、
複数列レイアウトの列間に描画されるルールの幅を指定することができる。
column-spanとは、
要素が複数列のレイアウトにまたがる数を指定することができる。
column-widthとは、
複数列要素の列の最適な幅を指定することができる。
columnsとは、
設定column-widthcolumn-countプロパティの略記プロパティ。

サポートするデスクトップ ブラウザ対応・互換性

FeatureChromeFirefoxInternet ExplorerOperaSafari (WebKit)
Basic support(Yes) -webkit9 (9)-moz
52 (52)
1011.10
15-webkit
3.0 (522)-webkit

サポートするモバイル ブラウザ対応・互換性

FeatureAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
基本サポート2.1-webkit22.0 (22)-moz
52.0 (52)
1011.5
32-webkit
3.2-webkit
CSS Multi column Layout プロパティ 一覧 関数 要素 使い方・書き方 例 CSS サンプル
CSS Multi column Layout プロパティ 一覧 | 使い方 | 書き方 | サンプル | セレクタ 値 | 属性 入門 | CSS マニュアル – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery