From 7185a386bee72299ec9ccae6b633ae15a2b1f5f2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Sep 2021 01:03:28 +0900 Subject: Web/CSS/border-width を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/border-width/index.md | 226 ++++++++++++++------------------- 1 file changed, 93 insertions(+), 133 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/border-width/index.md b/files/ja/web/css/border-width/index.md index 9183f7ba7a..195e20171c 100644 --- a/files/ja/web/css/border-width/index.md +++ b/files/ja/web/css/border-width/index.md @@ -6,30 +6,37 @@ tags: - CSS プロパティ - CSS 背景と境界 - Reference - - border - - border-width - - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-width translation_of: Web/CSS/border-width --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の border-width プロパティは、要素の境界線の四辺すべての線の幅を設定する一括指定プロパティです。

+**`border-width`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)の [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の幅を設定します。 -
{{EmbedInteractiveExample("pages/css/border-width.html")}}
+{{EmbedInteractiveExample("pages/css/border-width.html")}} -

それぞれの辺は個別に、 {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} や、書字方向による指定を利用して {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} で設定することができます。

+## 構成要素のプロパティ -

構文

+このプロパティは以下の CSS プロパティの一括指定です。 -
/* キーワード値 */
+- [`border-bottom-width`](/ja/docs/Web/CSS/border-bottom-width)
+- [`border-left-width`](/ja/docs/Web/CSS/border-left-width)
+- [`border-right-width`](/ja/docs/Web/CSS/border-right-width)
+- [`border-top-width`](/ja/docs/Web/CSS/border-top-width)
+
+## 構文
+
+```css
+/* キーワード値 */
 border-width: thin;
 border-width: medium;
 border-width: thick;
 
-/* <length> 値 */
-border-width: 4px;
-border-width: 1.2rem;
-
+/*  値 */
+border-width: 4px;
+border-width: 1.2rem;
+
 /* 上下 | 左右 */
 border-width: 2px 1.5em;
 
@@ -42,140 +49,93 @@ border-width: 1px 2em 0 4rem;
 /* グローバルキーワード */
 border-width: inherit;
 border-width: initial;
+border-width: revert;
 border-width: unset;
-
- -

border-width プロパティは一つ、二つ、三つ、四つの値を使って指定することができます。

- - - -

値

- -
-
<line-width>
-
明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 - - - - - - - - - - - - - - - - - - -
thin -
 
- 		細い境界線
medium -
 
- 		中くらいの境界線
thick -
 
- 		太い境界線
- -
-

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

-
-
-
- -

形式文法

+``` + +`border-width` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。 + +- 値が **1 つ**指定された場合、**全 4 辺**に同じ幅が適用される。 +- 値が **2 つ**指定された場合、1 つ目の幅は**上下**、2 つ目は**左右**の辺に適用される。 +- 値が **3 つ**指定された場合、1 つ目の幅は**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 +- 値が **4 つ**指定された場合、幅はそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。 + +### 値 + +- `` + + - : 境界の幅を、明示的な非負の {{cssxref("<length>")}} またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。 + + - `thin` + - `medium` + - `thick` + + > **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか 1つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

値と長さの組み合わせ

+

値と長さの組み合わせ

-

HTML

+#### HTML -
<p id="sval">
-    one value: 6px wide border on all 4 sides</p>
-<p id="bival">
-    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
-<p id="treval">
-    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
-<p id="fourval">
-    four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p>
+```html +

+  one value: 6px wide border on all 4 sides

+

+  two different values: 2px wide top and bottom border, 10px wide right and left border

+

+  three different values: 0.3em top, 9px bottom, and zero width right and left

+

+  four different values: "thin" top, "medium" right, "thick" bottom, and 1em left

+``` -

CSS

+#### CSS -
#sval {
-  border: ridge #ccc;
-  border-width: 6px;
+```css
+#sval {
+  border: ridge #ccc;
+  border-width: 6px;
 }
 #bival {
-  border: solid red;
-  border-width: 2px 10px;
+  border: solid red;
+  border-width: 2px 10px;
 }
 #treval {
-  border: dotted orange;
-  border-width: 0.3em 0 9px;
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
 }
 #fourval {
-  border: solid lightgreen;
-  border-width: thin medium thick 1em;
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
 }
 p {
-  width: auto;
-  margin: 0.25em;
-  padding: 0.25em;
-}
- -

結果

- -

{{ EmbedLiveSample('A_mix_of_values_and_lengths', 320, 320) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}直接は変更なし。 CSS の {{cssxref("<length>")}} データ型拡張がこのプロパティに影響。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}値の意味が文書内で一定でなければならないという制限を追加。
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.border-width")}}

- -

関連情報

- - +  width: auto; +  margin: 0.25em; +  padding: 0.25em; +} +``` + +#### Result + +{{ EmbedLiveSample('A_mix_of_values_and_lengths', 320, 320) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 境界線に関する一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}} +- 境界線の幅に関するプロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}} -- cgit v1.2.3-54-g00ecf