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-left-width/index.md | 167 ++++++++++------------------ 1 file changed, 61 insertions(+), 106 deletions(-) (limited to 'files/ja/web/css/border-left-width') diff --git a/files/ja/web/css/border-left-width/index.md b/files/ja/web/css/border-left-width/index.md index eac253e0e1..c2b4385fc0 100644 --- a/files/ja/web/css/border-left-width/index.md +++ b/files/ja/web/css/border-left-width/index.md @@ -3,30 +3,28 @@ title: border-left-width slug: Web/CSS/border-left-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-left - - border-width + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-left-width translation_of: Web/CSS/border-left-width --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

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

結果

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

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