CSS 複数列
CSS 段組みレイアウト
CSS の複数列レイアウトにより、新聞のように複数列のテキストを簡単に定義できます。
毎日のピン
ローレム・イプサム・ドール・シット・アメット、コンセクテトゥアー・アディピシング・エリート、セド・ディアム・ノヌミー・ニブ・ユーイズムモッド・ティンシダント・ラオリート・ド私が見てきたように、私たちのスポーツから利益を得るためにスポーツを利用する人は最小限に抑えられます。悪徳犯罪者のヘンドレリットでのデュイ・オーテム・ヴェレウム・イリウレ・ドロール, ヴェロ・エロスとアキュムサンでのヴェロ・エロスとアキュムサンとただの憎しみ.あなたがエリフェンドオプションの宿題を支払う自由な時間のために、より多くの投資を行うことができる資金調達はありません.
CSS の複数列のプロパティ
この章では、次の複数列のプロパティについて学習します。
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
ブラウザのサポート
表の数字は、プロパティを完全にサポートするブラウザ バージョンを示しています。
|
プロパティ |
|||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSSで複数の列を作成
column-countプロパティは、要素を分割する列数を指定します。
次の例では、<div> 要素のテキストを 3 つの列に分割します。
CSSで列間のギャップを指定する
のcolumn-gapプロパティは、列間のギャップを指定します。
次の例では、列間に 40pxのギャップを指定しています。
CSS列のルール
column-rule-styleプロパティは、列間のルールのスタイルを指定します:
column-rule-widthプロパティは、列間の罫線の幅を指定します:
column-rule-colorプロパティは、列間のルールの色を指定します:
column-ruleproperty は、上記のすべての column-rule-* プロパティを設定するための省略形のプロパティです。
次の例では、列間のルールの幅、スタイル、色を設定します。
要素がまたがる列数を指定する
column-spanプロパティは、要素がまたがる列数を指定します。
次の例では、 <h2> 要素がすべての列にまたがるように指定しています。
列幅の指定
column-widthプロパティは、列の推奨される最適な幅を指定します。
次の例では、列の推奨される最適な幅が 100px であることを指定しています。
CSSの複数列のプロパティ
次の表に、すべての複数列プロパティを示します。
|
プロパティ |
説明 |
|---|---|
| column-count | 要素を分割する列数を指定します |
| column-fill | 列を埋める方法を指定します |
| column-gap | 柱間のギャップを指定します |
| column-rule | すべての column-rule-* プロパティを設定するための簡略プロパティ |
| column-rule-color | 列間のルールの色を指定します |
| column-rule-style | 列間のルールのスタイルを指定します |
| column-rule-width | 列間の罫線の幅を指定します |
| column-span | 要素がまたがる列数を指定します |
| column-width | 列の推奨される最適な幅を指定します |
| columns | column-widthとcolumn-count を設定するための簡略プロパティ |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。