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

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

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

複数列レイアウトの作成

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

実例 コード 1

列数または幅の設定

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

実例 コード 2

トピック：
• column-widthは、列の最適な幅を表示 するただし、実際の列幅は、使用可能なスペースに応じて、より広くても狭くてもかまいません。 このプロパティはcolumn-countプロパティで使用しないで下さい 。

列間隔の設定

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

実例 コード 3

列ルールの設定

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

実例 コード 4

トピック：
• 列ルールの幅は列ボックスの幅には 影響しない が、列ルールがギャップよりも広い場合、隣接する列ボックスはルールと重複する ことができる。

プロパティ Multi column Layout 一覧