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

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

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

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

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

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

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

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

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

構成要素のプロパティ

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

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

+このプロパティは以下の CSS プロパティの一括指定です。 - +- [`border-top-color`](/ja/docs/Web/CSS/border-top-color) +- [`border-top-style`](/ja/docs/Web/CSS/border-top-style) +- [`border-top-width`](/ja/docs/Web/CSS/border-top-width) -

構文

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

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

上側の境界の適用

+

上側の境界の適用

-

HTML

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

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

CSS

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

結果

- -

{{EmbedLiveSample('Applying_a_top_border')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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