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

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

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

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

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

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

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

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

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

構成要素のプロパティ

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

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

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

構文

+## 構文 -
border-bottom: 1px;
+```css
+border-bottom: 1px;
 border-bottom: 2px dotted;
 border-bottom: medium dashed blue;
-
-

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

+/* グローバル値 */ +border-bottom: inherit; +border-bottom: initial; +border-bottom: revert; +border-bottom: unset; +``` + +一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、 1 つまたは 2 つの値を省略することができます。 -

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

下の境界の適用

+

下の境界の適用

-

HTML

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

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

CSS

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

結果

- -

{{EmbedLiveSample('Applying_a_bottom_border')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-block")}}
    • -
  • {{cssxref("outline")}}
    • -
+``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_bottom_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} -- cgit v1.2.3-54-g00ecf