diff options
Diffstat (limited to 'files/ja/web/css/column-count/index.md')
| -rw-r--r-- | files/ja/web/css/column-count/index.md | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/files/ja/web/css/column-count/index.md b/files/ja/web/css/column-count/index.md new file mode 100644 index 0000000000..04e0ee9338 --- /dev/null +++ b/files/ja/web/css/column-count/index.md @@ -0,0 +1,98 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS + - CSS プロパティ + - CSS 段組みレイアウト + - リファレンス + - 段組み +translation_of: Web/CSS/column-count +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>column-count</code></strong> プロパティは、指定された段数で要素のコンテンツを分割します。</p> + +<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div> + +<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css no-line-numbers">/* キーワード値 */ +column-count: auto; + +/* <integer> 値 */ +column-count: 3; + +/* グローバル値 */ +column-count: inherit; +column-count: initial; +column-count: unset;</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>段数は {{cssxref("column-width")}} など、他の CSS プロパティによって決定されます。</dd> + <dt>{{cssxref("<integer>")}}</dt> + <dd>正の{{cssxref("<integer>", "整数")}}のみで、要素の中で流れる理想的な列の数を記述します。 {{cssxref("column-width")}} が <code>auto</code> 以外の値で一緒に設定された場合は、最大の列数を示します。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +{{csssyntax}} + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.content-box { + column-count: 3; +} +</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', '#cc', 'column-count')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("css.properties.column-count")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a> (レイアウトの学習)</li> + <li><a href="/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">段組みの基本概念</a></li> +</ul> |