From 22b5179f783cf6a891e61de8de4913a61d71122a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 23:57:06 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/columns/index.md | 105 ++++++++++++++++++++------------------ 1 file changed, 54 insertions(+), 51 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/columns/index.md b/files/ja/web/css/columns/index.md index cc9fab26d3..c7a3bf40f3 100644 --- a/files/ja/web/css/columns/index.md +++ b/files/ja/web/css/columns/index.md @@ -3,26 +3,30 @@ title: columns slug: Web/CSS/columns tags: - CSS - - CSS Property - CSS 段組みレイアウト - - Reference - - 一括指定プロパティ - - 段組み + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.columns translation_of: Web/CSS/columns --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の columns プロパティは、段組みされた要素の段の幅や段数を設定します。

+**`columns`** は [CSS](/ja/docs/Web/CSS) 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。 -
{{EmbedInteractiveExample("pages/css/columns.html")}}
+{{EmbedInteractiveExample("pages/css/columns.html")}} - +## 構成要素のプロパティ -

これは {{cssxref('column-width')}} と {{cssxref("column-count")}} の両方を一度に便利に宣言できる一括指定プロパティです。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。

+このプロパティは以下の CSS プロパティの一括指定です。 -

構文

+- [`column-count`](/ja/docs/Web/CSS/column-count) +- [`column-width`](/ja/docs/Web/CSS/column-width) -
/* 段の幅 */
+## 構文
+
+```css
+/* 段の幅 */
 columns: 18em;
 
 /* 段数 */
@@ -37,65 +41,64 @@ columns: auto auto;
 /* グローバル値 */
 columns: inherit;
 columns: initial;
-columns: unset;
+columns: revert; +columns: unset; +``` + +`columns` プロパティは以下に挙げる値を 1 つまたは 2 つで、順不同で指定します。 + +### 値 -

columns プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。

+- `<'column-width'>` + - : 理想的な段の幅であり、 {{cssxref("<length>")}} または `auto` キーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。 {{cssxref("column-width")}} を参照してください。 +- `<'column-count'>` + - : 要素の内容物が流れる理想的な段の数であり、 {{cssxref("<integer>")}} または `auto` キーワードで定義します。この値と段の幅の両方が `auto` でない場合は、最大の段数を示します。 {{cssxref("column-count")}} を参照してください。 -

値

+## 公式定義 -
-
<'column-width'>
-
{{cssxref("<length>")}} 値または auto キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。
-
<'column-count'>
-
正の {{cssxref("<integer>")}} のみで、要素の中で流れる理想的な段数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の段数を示します。
-
+{{cssinfo}} -

構文形式

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

例

+## 例 -

HTML

+### 3 つの等しい段の設定 -
<p class="content-box">
+#### HTML
+
+```html
+

   This is a bunch of text split into three columns
   using the CSS `columns` property. The text
   is equally distributed over the columns.
-</p>
-
+

+``` -

CSS

+#### CSS -
.content-box {
+```css
+.content-box {
   columns: 3 auto;
-}
+} +``` + +#### 結果 -

結果

+{{EmbedLiveSample('Setting_three_equal_columns', 'auto', 120)}} -

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

+## 仕様書 -

仕様策定状況

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS3 Multicol', '#columns', 'columns')}}{{Spec2('CSS3 Multicol')}}初回定義。
+## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの対応

+## 関連情報 -

{{Compat("css.properties.columns")}}

+- {{cssxref("widows")}} +- {{cssxref("orphans")}} +- [ページ化メディア](/ja/docs/Web/CSS/Paged_Media) +- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) -- cgit v1.2.3-54-g00ecf