diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-29 23:37:44 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-08 13:55:13 +0900 |
commit | e690a74b952522e9a833897b23b6f5fe7ac4ac37 (patch) | |
tree | d7b5516d55a5db55ca43feb117bde324f13c8693 /files/ja/web/css | |
parent | fc3d53d77d58c44762ce3c810204f111dcbb6d68 (diff) | |
download | translated-content-e690a74b952522e9a833897b23b6f5fe7ac4ac37.tar.gz translated-content-e690a74b952522e9a833897b23b6f5fe7ac4ac37.tar.bz2 translated-content-e690a74b952522e9a833897b23b6f5fe7ac4ac37.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
-rw-r--r-- | files/ja/web/css/column-rule-width/index.md | 95 |
1 files changed, 46 insertions, 49 deletions
diff --git a/files/ja/web/css/column-rule-width/index.md b/files/ja/web/css/column-rule-width/index.md index c0241e7a31..107415aa37 100644 --- a/files/ja/web/css/column-rule-width/index.md +++ b/files/ja/web/css/column-rule-width/index.md @@ -3,94 +3,91 @@ title: column-rule-width slug: Web/CSS/column-rule-width tags: - CSS - - CSS Property - - CSS プロパティ - CSS 段組みレイアウト - - Reference - - 段組み + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.column-rule-width translation_of: Web/CSS/column-rule-width --- -<div>{{ CSSRef}}</div> +{{ CSSRef}} -<p><strong><code>column-rule-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。</p> +**`column-rule-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、段組みレイアウトで段間に引かれる線(段間罫)の太さを設定します。 -<div>{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/column-rule-width.html")}} -<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">/* キーワード値 */ +```css +/* キーワード値 */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; -/* <length> 値 */ +/* <length> 値 */ column-rule-width: 1px; column-rule-width: 2.5em; /* グローバル値 */ column-rule-width: inherit; column-rule-width: initial; +column-rule-width: revert; column-rule-width: unset; -</pre> +``` + +`column-rule-width` プロパティは単一の `<'border-width'>` の値で指定します。 -<p><code>column-rule-width</code> プロパティは単一の <code><'border-width'></code> の値で指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `<'border-width'>` + - : {{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("<length>")}} または `thin`、 `medium`、 `thick` のキーワードのいずれかです。 -<dl> - <dt><code><'border-width'></code></dt> - <dd>{{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("<length>")}} または <code>thin</code>、 <code>medium</code>、 <code>thick</code> のキーワードのいずれかです。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +### 太い段間罫を設定 -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><p>This is a bunch of text split into three columns. +```html +<p>This is a bunch of text split into three columns. The `column-rule-width` property is used to change the width of the line that is drawn between columns. - Don't you think that's wonderful?</p></pre> + Don't you think that's wonderful?</p> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush:css">p { +```css +p { column-count: 3; column-rule-style: solid; column-rule-width: thick; } -</pre> +``` + +#### 結果 -<h3 id="Result" name="Result">結果</h3> +{{EmbedLiveSample("Setting_a_thick_column_rule")}} -<p>{{EmbedLiveSample("Example")}}</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', '#crw', 'column-rule-width') }}</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.column-rule-width")}}</p> +- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- {{CSSXref("column-rule-style")}} +- {{CSSXref("column-rule-color")}} +- {{CSSXref("column-rule")}} |