diff options
| -rw-r--r-- | files/ja/web/css/columns/index.md | 105 |
1 files changed, 54 insertions, 51 deletions
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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>columns</code></strong> プロパティは、段組みされた要素の段の幅や段数を設定します。</p> +**`columns`** は [CSS](/ja/docs/Web/CSS) 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。 -<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div> +{{EmbedInteractiveExample("pages/css/columns.html")}} -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構成要素のプロパティ -<p>これは {{cssxref('column-width')}} と {{cssxref("column-count")}} の両方を一度に便利に宣言できる<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<h2 id="Syntax" name="Syntax">構文</h2> +- [`column-count`](/ja/docs/Web/CSS/column-count) +- [`column-width`](/ja/docs/Web/CSS/column-width) -<pre class="brush:css no-line-numbers">/* 段の幅 */ +## 構文 + +```css +/* 段の幅 */ columns: 18em; /* 段数 */ @@ -37,65 +41,64 @@ columns: auto auto; /* グローバル値 */ columns: inherit; columns: initial; -columns: unset;</pre> +columns: revert; +columns: unset; +``` + +`columns` プロパティは以下に挙げる値を 1 つまたは 2 つで、順不同で指定します。 + +### 値 -<p><code>columns</code> プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。</p> +- `<'column-width'>` + - : 理想的な段の幅であり、 {{cssxref("<length>")}} または `auto` キーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。 {{cssxref("column-width")}} を参照してください。 +- `<'column-count'>` + - : 要素の内容物が流れる理想的な段の数であり、 {{cssxref("<integer>")}} または `auto` キーワードで定義します。この値と段の幅の両方が `auto` でない場合は、最大の段数を示します。 {{cssxref("column-count")}} を参照してください。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code><'column-width'></code></dt> - <dd>{{cssxref("<length>")}} 値または <code>auto</code> キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。</dd> - <dt><code><'column-count'></code></dt> - <dd>正の {{cssxref("<integer>")}} のみで、要素の中で流れる理想的な段数を記述します。 {{cssxref("column-width")}} が <code>auto</code> 以外の値で一緒に設定された場合は、最大の段数を示します。</dd> -</dl> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">構文形式</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +### 3 つの等しい段の設定 -<pre class="brush: html"><p class="content-box"> +#### HTML + +```html +<p class="content-box"> This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns. -</p> -</pre> +</p> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css;">.content-box { +```css +.content-box { columns: 3 auto; -}</pre> +} +``` + +#### 結果 -<h3 id="Result" name="Result">結果</h3> +{{EmbedLiveSample('Setting_three_equal_columns', 'auto', 120)}} -<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様策定状況</h2> +{{Specifications}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Multicol', '#columns', 'columns')}}</td> - <td>{{Spec2('CSS3 Multicol')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<p>{{cssinfo}}</p> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## 関連情報 -<p>{{Compat("css.properties.columns")}}</p> +- {{cssxref("widows")}} +- {{cssxref("orphans")}} +- [ページ化メディア](/ja/docs/Web/CSS/Paged_Media) +- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) |