From e690a74b952522e9a833897b23b6f5fe7ac4ac37 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 23:37:44 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/column-rule-width/index.md | 95 ++++++++++++++--------------- 1 file changed, 46 insertions(+), 49 deletions(-) (limited to 'files/ja') 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 --- -
{{ CSSRef}}
+{{ CSSRef}} -

column-rule-widthCSS のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。

+**`column-rule-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、段組みレイアウトで段間に引かれる線(段間罫)の太さを設定します。 -
{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
+{{EmbedInteractiveExample("pages/css/column-rule-width.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 column-rule-width: thin;
 column-rule-width: medium;
 column-rule-width: thick;
 
-/* <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;
-
+``` + +`column-rule-width` プロパティは単一の `<'border-width'>` の値で指定します。 -

column-rule-width プロパティは単一の <'border-width'> の値で指定します。

+### 値 -

+- `<'border-width'>` + - : {{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("<length>")}} または `thin`、 `medium`、 `thick` のキーワードのいずれかです。 -
-
<'border-width'>
-
{{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("<length>")}} または thinmediumthick のキーワードのいずれかです。
-
+## 公式定義 -

形式文法

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

+## 例 + +### 太い段間罫を設定 -

HTML

+#### HTML -
<p>This is a bunch of text split into three columns.
+```html
+

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>

+ Don't you think that's wonderful?

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   column-count: 3;
   column-rule-style: solid;
   column-rule-width: thick;
 }
-
+``` + +#### 結果 -

結果

+{{EmbedLiveSample("Setting_a_thick_column_rule")}} -

{{EmbedLiveSample("Example")}}

+## 仕様書 -

仕様書

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Multicol', '#crw', 'column-rule-width') }}{{ Spec2('CSS3 Multicol') }}初回定義
+## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの対応

+## 関連情報 -

{{Compat("css.properties.column-rule-width")}}

+- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- {{CSSXref("column-rule-style")}} +- {{CSSXref("column-rule-color")}} +- {{CSSXref("column-rule")}} -- cgit v1.2.3-54-g00ecf