initial commit

1 files changed, 103 insertions, 0 deletions

diff --git a/files/ja/web/css/columns/index.html b/files/ja/web/css/columns/index.html
new file mode 100644
index 0000000000..6f01f3ac59
--- /dev/null
+++ b/files/ja/web/css/columns/index.html
@@ -0,0 +1,103 @@
+---
+title: columns
+slug: Web/CSS/columns
+tags:
+  - CSS
+  - CSS Property
+  - CSS 段組みレイアウト
+  - Reference
+  - 一括指定プロパティ
+  - 段組み
+translation_of: Web/CSS/columns
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>columns</code></strong> プロパティは、段組みされた要素の段の幅や段数を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div>
+
+<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>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 段の幅 */
+columns: 18em;
+
+/* 段数 */
+columns: auto;
+columns: 2;
+
+/* 段の幅と段数の両方 */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* グローバル値 */
+columns: inherit;
+columns: initial;
+columns: unset;</pre>
+
+<p><code>columns</code> プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'column-width'&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 値または <code>auto</code> キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。</dd>
+ <dt><code>&lt;'column-count'&gt;</code></dt>
+ <dd>正の {{cssxref("&lt;integer&gt;")}} のみで、要素の中で流れる理想的な段数を記述します。 {{cssxref("column-width")}} が <code>auto</code> 以外の値で一緒に設定された場合は、最大の段数を示します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">構文形式</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.content-box {
+  columns: 3 auto;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様策定状況</h2>
+
+<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>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.columns")}}</p>