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/index.md | 168 +++++++++++++++------------------- 1 file changed, 75 insertions(+), 93 deletions(-) (limited to 'files/ja/web/css/border-left') diff --git a/files/ja/web/css/border-left/index.md b/files/ja/web/css/border-left/index.md index 0eb1f1b539..7fe2920fc8 100644 --- a/files/ja/web/css/border-left/index.md +++ b/files/ja/web/css/border-left/index.md @@ -3,85 +3,92 @@ title: border-left slug: Web/CSS/border-left tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-left translation_of: Web/CSS/border-left --- -
{{CSSRef}}
+{{CSSRef}} -

border-left は一括指定の CSS のプロパティで、要素の左側の境界のプロパティをすべて設定します。

+**`border-left`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)の [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の[境界](/ja/docs/Web/CSS/border)のプロパティをすべて設定します。 -
{{EmbedInteractiveExample("pages/css/border-left.html")}}
+{{EmbedInteractiveExample("pages/css/border-left.html")}} - +他の一括指定プロパティと同様に、 `border-left` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・ -

他の一括指定プロパティと同様に、 border-left は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・

- -
border-left-style: dotted;
+```css
+border-left-style: dotted;
 border-left: thick green;
-
+``` -

・・・は、実際には以下と同じです・・・

+・・・は、実際には以下と同じです・・・ -
border-left-style: dotted;
+```css
+border-left-style: dotted;
 border-left: none thick green;
-
+``` -

・・・そして、 border-left の前で設定された {{cssxref("border-left-style")}} の値は無視されます。 {{cssxref("border-left-style")}} の既定値は none なので、 border-style の部分の設定は境界線なしとなります。

+・・・そして、 `border-left` の前で設定された {{cssxref("border-left-style")}} の値は無視されます。 {{cssxref("border-left-style")}} の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。 -

構成要素のプロパティ

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

このプロパティは以下の CSS プロパティの一括指定です。

+このプロパティは以下の CSS プロパティの一括指定です。 - +- {{cssxref("border-left-color")}} +- {{cssxref("border-left-style")}} +- {{cssxref("border-left-width")}} -

構文

+## 構文 -
border-left: 1px;
+```css
+border-left: 1px;
 border-left: 2px dotted;
-border-left: medium dashed green;
-
+border-left: medium dashed blue; + +/* グローバル値 */ +border-left: inherit; +border-left: initial; +border-left: revert; +border-left: unset; +``` -

一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。

+一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。 -

値

+### 値 -
-
<br-width>
-
{{cssxref("border-left-width")}} を参照してください。
-
<br-style>
-
{{cssxref("border-left-style")}} を参照してください。
-
{{cssxref("<color>")}}
-
{{cssxref("border-left-color")}} を参照してください。
-
+- `` + - : {{cssxref("border-left-width")}} を参照してください。 +- `` + - : {{cssxref("border-left-style")}} を参照してください。 +- {{cssxref("<color>")}} + - : {{cssxref("border-left-color")}} を参照してください。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

左の境界の適用

+

左の境界の適用

-

HTML

+#### HTML -
<div>
+```html
+

   このボックスには左側に境界線があります。
-</div>
+ +``` -

CSS

+#### CSS -
div {
+```css
+div {
   border-left: 4px dashed blue;
   background-color: gold;
   height: 100px;
@@ -89,49 +96,24 @@ border-left: medium dashed green;
   font-weight: bold;
   text-align: center;
 }
-
- -

結果

- -

{{EmbedLiveSample('Applying_a_left_border')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-left', 'border-left')}}{{Spec2('CSS3 Backgrounds')}}直接的な変更はないが、 {{cssxref("border-left-color")}} に適用される値が変更された。
{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}{{Spec2('CSS2.1')}}有意な変更点なし。
{{SpecName('CSS1', '#border-left', 'border-left')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-block")}}
    • -
  • {{cssxref("outline")}}
    • -
+``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_left_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) -- cgit v1.2.3-54-g00ecf