From ed3ae6720bc1c0bba8b194a6c5e903116b1c79bf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 22:42:34 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/column-count/index.md | 108 +++++++++++++++------------------ 1 file changed, 50 insertions(+), 58 deletions(-) (limited to 'files/ja/web/css/column-count/index.md') diff --git a/files/ja/web/css/column-count/index.md b/files/ja/web/css/column-count/index.md index 04e0ee9338..d7754455af 100644 --- a/files/ja/web/css/column-count/index.md +++ b/files/ja/web/css/column-count/index.md @@ -3,96 +3,88 @@ title: column-count slug: Web/CSS/column-count tags: - CSS - - CSS プロパティ - CSS 段組みレイアウト + - CSS プロパティ + - レイアウト - リファレンス - - 段組み + - column-count + - columns + - recipe:css-property +browser-compat: css.properties.column-count translation_of: Web/CSS/column-count --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の column-count プロパティは、指定された段数で要素のコンテンツを分割します。

+**`column-count`** は [CSS](/ja/docs/Web/CSS) のプロパティで、指定された段数で要素の内容物を分割します。 -
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+{{EmbedInteractiveExample("pages/css/column-count.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 column-count: auto;
 
-/* <integer> 値 */
+/*  値 */
 column-count: 3;
 
 /* グローバル値 */
 column-count: inherit;
 column-count: initial;
-column-count: unset;
+column-count: revert; +column-count: unset; +``` + +### 値 -

値

+- `auto` + - : 段数は {{cssxref("column-width")}} など、他の CSS プロパティによって決定されます。 +- {{cssxref("<integer>")}} + - : 正の{{cssxref("<integer>", "整数")}}のみで、要素の中で流れる理想的な列の数を記述します。 {{cssxref("column-width")}} が `auto` 以外の値で一緒に設定された場合は、最大の列数を示します。 -
-
auto
-
段数は {{cssxref("column-width")}} など、他の CSS プロパティによって決定されます。
-
{{cssxref("<integer>")}}
-
正の{{cssxref("<integer>", "整数")}}のみで、要素の中で流れる理想的な列の数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の列数を示します。
-
+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### 段落を 3 つの段に分割 -

HTML

+#### HTML -
<p class="content-box">
-  This is a bunch of text split into three columns
-  using the CSS `column-count` property. The text
-  is equally distributed over the columns.
-</p>
-
+```html +

+ これは、 3 つの段に分割されたテキストの束です。 + CSS の `column-count` プロパティを使用しています。 + テキストはそれぞれの段に均等に配置されています。 +

+``` -

CSS

+#### CSS -
.content-box {
+```css
+.content-box {
   column-count: 3;
 }
-
- -

結果

+``` -

{{EmbedLiveSample('Example', 'auto', 120)}}

+#### 結果 -

仕様書

+{{EmbedLiveSample('Splitting_a_paragraph_across_three_columns', 'auto', 120)}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}{{Spec2('CSS3 Multicol')}}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

{{Compat("css.properties.column-count")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) (レイアウトの学習) +- [段組みの基本概念](/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol) -- cgit v1.2.3-54-g00ecf