From 33fdcea3f3c7a085d4962e06e3270f91a974670c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 15 Nov 2021 01:17:27 +0900 Subject: CSS Borders 関係のプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/13 時点の英語版に同期 --- files/ja/web/css/border-right-width/index.md | 167 ++++++++++----------------- 1 file changed, 61 insertions(+), 106 deletions(-) (limited to 'files/ja/web/css/border-right-width') diff --git a/files/ja/web/css/border-right-width/index.md b/files/ja/web/css/border-right-width/index.md index 7c7de6ab0a..771898d985 100644 --- a/files/ja/web/css/border-right-width/index.md +++ b/files/ja/web/css/border-right-width/index.md @@ -4,29 +4,27 @@ slug: Web/CSS/border-right-width tags: - CSS - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-right - - border-width + - CSS 境界 + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-right-width translation_of: Web/CSS/border-right-width --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の border-right-width プロパティは、要素の右側の境界の幅を設定します。

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

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-right-width: thin;
 border-right-width: medium;
 border-right-width: thick;
 
-/* <length> 値 */
+/*  値 */
 border-right-width: 10em;
 border-right-width: 3vmax;
 border-right-width: 6px;
@@ -34,60 +32,45 @@ border-right-width: 6px;
 /* グローバル値 */
 border-right-width: inherit;
 border-right-width: initial;
+border-right-width: revert;
 border-right-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

+``` + +### 値 + +- `` + + - : 明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + - `thin` + - `medium` + - `thick` + + > **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

境界線の太さの比較

-

HTML

+#### HTML -
<div>Element 1</div>
-<div>Element 2</div>
+```html +
Element 1
+
Element 2
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   border: 1px solid red;
   margin: 1em 0;
 }
@@ -97,50 +80,22 @@ div:nth-child(1) {
 }
 div:nth-child(2) {
   border-right-width: 2em;
-}
- -

結果

- -

{{EmbedLiveSample('Example', '100%')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はなし。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}{{Spec2('CSS2.1')}}目立った変更はなし。
{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_border_widths', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- その他の太さに関する境界の CSS プロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}} +- 他の右側の境界に関する CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-right-color")}} -- cgit v1.2.3-54-g00ecf