From f7c2a316bb9e875683a9e81fb6aef8d1fc133a38 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Nov 2021 11:00:39 +0900 Subject: CSS Borders に関するプロパティの文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/border-bottom-color/index.html | 115 ---------- files/ja/web/css/border-bottom-color/index.md | 115 ++++++++++ .../web/css/border-bottom-left-radius/index.html | 193 ---------------- .../ja/web/css/border-bottom-left-radius/index.md | 193 ++++++++++++++++ .../web/css/border-bottom-right-radius/index.html | 187 ---------------- .../ja/web/css/border-bottom-right-radius/index.md | 187 ++++++++++++++++ files/ja/web/css/border-bottom-style/index.html | 137 ------------ files/ja/web/css/border-bottom-style/index.md | 137 ++++++++++++ files/ja/web/css/border-bottom-width/index.html | 146 ------------ files/ja/web/css/border-bottom-width/index.md | 146 ++++++++++++ files/ja/web/css/border-bottom/index.html | 137 ------------ files/ja/web/css/border-bottom/index.md | 137 ++++++++++++ files/ja/web/css/border-color/index.html | 194 ---------------- files/ja/web/css/border-color/index.md | 194 ++++++++++++++++ files/ja/web/css/border-left-color/index.html | 117 ---------- files/ja/web/css/border-left-color/index.md | 117 ++++++++++ files/ja/web/css/border-left-style/index.html | 135 ------------ files/ja/web/css/border-left-style/index.md | 135 ++++++++++++ files/ja/web/css/border-left-width/index.html | 146 ------------ files/ja/web/css/border-left-width/index.md | 146 ++++++++++++ files/ja/web/css/border-left/index.html | 137 ------------ files/ja/web/css/border-left/index.md | 137 ++++++++++++ files/ja/web/css/border-radius/index.html | 215 ------------------ files/ja/web/css/border-radius/index.md | 215 ++++++++++++++++++ files/ja/web/css/border-right-color/index.html | 115 ---------- files/ja/web/css/border-right-color/index.md | 115 ++++++++++ files/ja/web/css/border-right-style/index.html | 135 ------------ files/ja/web/css/border-right-style/index.md | 135 ++++++++++++ files/ja/web/css/border-right-width/index.html | 146 ------------ files/ja/web/css/border-right-width/index.md | 146 ++++++++++++ files/ja/web/css/border-right/index.html | 137 ------------ files/ja/web/css/border-right/index.md | 137 ++++++++++++ files/ja/web/css/border-style/index.html | 244 --------------------- files/ja/web/css/border-style/index.md | 244 +++++++++++++++++++++ files/ja/web/css/border-top-color/index.html | 115 ---------- files/ja/web/css/border-top-color/index.md | 115 ++++++++++ files/ja/web/css/border-top-left-radius/index.html | 168 -------------- files/ja/web/css/border-top-left-radius/index.md | 168 ++++++++++++++ files/ja/web/css/border-top-style/index.html | 137 ------------ files/ja/web/css/border-top-style/index.md | 137 ++++++++++++ files/ja/web/css/border-top-width/index.html | 146 ------------ files/ja/web/css/border-top-width/index.md | 146 ++++++++++++ files/ja/web/css/border-top/index.html | 137 ------------ files/ja/web/css/border-top/index.md | 137 ++++++++++++ files/ja/web/css/border/index.html | 151 ------------- files/ja/web/css/border/index.md | 151 +++++++++++++ 46 files changed, 3490 insertions(+), 3490 deletions(-) delete mode 100644 files/ja/web/css/border-bottom-color/index.html create mode 100644 files/ja/web/css/border-bottom-color/index.md delete mode 100644 files/ja/web/css/border-bottom-left-radius/index.html create mode 100644 files/ja/web/css/border-bottom-left-radius/index.md delete mode 100644 files/ja/web/css/border-bottom-right-radius/index.html create mode 100644 files/ja/web/css/border-bottom-right-radius/index.md delete mode 100644 files/ja/web/css/border-bottom-style/index.html create mode 100644 files/ja/web/css/border-bottom-style/index.md delete mode 100644 files/ja/web/css/border-bottom-width/index.html create mode 100644 files/ja/web/css/border-bottom-width/index.md delete mode 100644 files/ja/web/css/border-bottom/index.html create mode 100644 files/ja/web/css/border-bottom/index.md delete mode 100644 files/ja/web/css/border-color/index.html create mode 100644 files/ja/web/css/border-color/index.md delete mode 100644 files/ja/web/css/border-left-color/index.html create mode 100644 files/ja/web/css/border-left-color/index.md delete mode 100644 files/ja/web/css/border-left-style/index.html create mode 100644 files/ja/web/css/border-left-style/index.md delete mode 100644 files/ja/web/css/border-left-width/index.html create mode 100644 files/ja/web/css/border-left-width/index.md delete mode 100644 files/ja/web/css/border-left/index.html create mode 100644 files/ja/web/css/border-left/index.md delete mode 100644 files/ja/web/css/border-radius/index.html create mode 100644 files/ja/web/css/border-radius/index.md delete mode 100644 files/ja/web/css/border-right-color/index.html create mode 100644 files/ja/web/css/border-right-color/index.md delete mode 100644 files/ja/web/css/border-right-style/index.html create mode 100644 files/ja/web/css/border-right-style/index.md delete mode 100644 files/ja/web/css/border-right-width/index.html create mode 100644 files/ja/web/css/border-right-width/index.md delete mode 100644 files/ja/web/css/border-right/index.html create mode 100644 files/ja/web/css/border-right/index.md delete mode 100644 files/ja/web/css/border-style/index.html create mode 100644 files/ja/web/css/border-style/index.md delete mode 100644 files/ja/web/css/border-top-color/index.html create mode 100644 files/ja/web/css/border-top-color/index.md delete mode 100644 files/ja/web/css/border-top-left-radius/index.html create mode 100644 files/ja/web/css/border-top-left-radius/index.md delete mode 100644 files/ja/web/css/border-top-style/index.html create mode 100644 files/ja/web/css/border-top-style/index.md delete mode 100644 files/ja/web/css/border-top-width/index.html create mode 100644 files/ja/web/css/border-top-width/index.md delete mode 100644 files/ja/web/css/border-top/index.html create mode 100644 files/ja/web/css/border-top/index.md delete mode 100644 files/ja/web/css/border/index.html create mode 100644 files/ja/web/css/border/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/border-bottom-color/index.html b/files/ja/web/css/border-bottom-color/index.html deleted file mode 100644 index 7bac45b944..0000000000 --- a/files/ja/web/css/border-bottom-color/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: border-bottom-color -slug: Web/CSS/border-bottom-color -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/border-bottom-color ---- -
{{CSSRef}}
- -

border-bottom-color は CSS のプロパティで、要素の下側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-bottom")}} でも設定することができます。

- -
{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
- - - -

構文

- -
/* <color> 値 */
-border-bottom-color: red;
-border-bottom-color: #ffbb00;
-border-bottom-color: rgb(255, 0, 0);
-border-bottom-color: hsla(100%, 50%, 25%, 0.75);
-border-bottom-color: currentcolor;
-border-bottom-color: transparent;
-
-/* グローバル値 */
-border-bottom-color: inherit;
-border-bottom-color: initial;
-border-bottom-color: unset;
-
- -

border-bottom-color プロパティは1つの値で指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
境界線の色を定義します。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

境界線が付いた単純な div

- -

HTML

- -
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
-     なお、ボックスのその辺が
-     <span class="redtext">赤</span>になっています。</p>
-</div>
- -

CSS

- -
.mybox {
-    border: solid 0.3em gold;
-    border-bottom-color: red;
-    width: auto;
-}
-
-.redtext {
-    color: red;
-}
- -

結果

- -

{{EmbedLiveSample('A_simple_div_with_a_border')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-bottom-color/index.md b/files/ja/web/css/border-bottom-color/index.md new file mode 100644 index 0000000000..7bac45b944 --- /dev/null +++ b/files/ja/web/css/border-bottom-color/index.md @@ -0,0 +1,115 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-color +--- +
{{CSSRef}}
+ +

border-bottom-color は CSS のプロパティで、要素の下側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-bottom")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-bottom-color: red;
+border-bottom-color: #ffbb00;
+border-bottom-color: rgb(255, 0, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: currentcolor;
+border-bottom-color: transparent;
+
+/* グローバル値 */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+
+ +

border-bottom-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-bottom-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-bottom-left-radius/index.html b/files/ja/web/css/border-bottom-left-radius/index.html deleted file mode 100644 index 14cb9816bb..0000000000 --- a/files/ja/web/css/border-bottom-left-radius/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: border-bottom-left-radius -slug: Web/CSS/border-bottom-left-radius -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/border-bottom-left-radius ---- -
{{CSSRef}}
- -

border-bottom-left-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。

- -
{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}
- - - -

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

- -
border-bottom-left-radius.png
- -

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

- -
注: このプロパティの値が border-bottom-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
- -

構文

- -
/* 角を円にする */
-/* border-bottom-left-radius: radius */
-border-bottom-left-radius: 3px;
-
-/* パーセント値 */
-
-/* ボックスが正方形ならば円、長方形ならば楕円 */
-border-bottom-left-radius: 20%;
-
-/* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
-border-bottom-left-radius: 20% 20%;
-
-/* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
-border-bottom-left-radius: 20% 10%;
-
-/* 角を楕円にする */
-/* border-bottom-left-radius: horizontal vertical */
-border-bottom-left-radius: 0.5em 1em;
-
-border-bottom-left-radius: inherit;
- -

値１つで指定する場合:

- - - -

値２つで指定する場合:

- - - -

値

- -
-
<length-percentage>
-
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ライブ例コード
-
- -
- 		境界として使用されている円弧 - 
-div {
-  border-bottom-left-radius: 40px 40px;
-}
-
-
-
- -
- 		境界として使用されている楕円の弧 - 
-div {
-  border-bottom-left-radius: 40px 20px;
-}
-
-
-
- -
- 		ボックスは正方形。境界として使用されている円弧 - 
-div {
-  border-bottom-left-radius: 40%;
-}
-
-
-
- -
- 		ボックスは正方形ではない。境界として使用されている楕円の弧 - 
-div {
-  border-bottom-left-radius: 40%;
-}
-
-
-
- -
- 		背景色は境界で切り取られる - 
-div {
-  border-bottom-left-radius:40%;
-  border-style: black 3px double;
-  background-color: rgb(250,20,70);
-  background-clip: content-box;
-}
-
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-bottom-left-radius/index.md b/files/ja/web/css/border-bottom-left-radius/index.md new file mode 100644 index 0000000000..14cb9816bb --- /dev/null +++ b/files/ja/web/css/border-bottom-left-radius/index.md @@ -0,0 +1,193 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-left-radius +--- +
{{CSSRef}}
+ +

border-bottom-left-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}
+ + + +

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-bottom-left-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
注: このプロパティの値が border-bottom-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-bottom-left-radius: radius */
+border-bottom-left-radius: 3px;
+
+/* パーセント値 */
+
+/* ボックスが正方形ならば円、長方形ならば楕円 */
+border-bottom-left-radius: 20%;
+
+/* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
+border-bottom-left-radius: 20% 20%;
+
+/* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
+border-bottom-left-radius: 20% 10%;
+
+/* 角を楕円にする */
+/* border-bottom-left-radius: horizontal vertical */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+ +

値１つで指定する場合:

+ + + +

値２つで指定する場合:

+ + + +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
+ +
+ 		境界として使用されている円弧 + 
+div {
+  border-bottom-left-radius: 40px 40px;
+}
+
+
+
+ +
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+
+
+
+ +
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+ +
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+ +
+ 		背景色は境界で切り取られる + 
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-bottom-right-radius/index.html b/files/ja/web/css/border-bottom-right-radius/index.html deleted file mode 100644 index 1d683d390a..0000000000 --- a/files/ja/web/css/border-bottom-right-radius/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: border-bottom-right-radius -slug: Web/CSS/border-bottom-right-radius -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/border-bottom-right-radius ---- -
{{CSSRef}}
- -

border-bottom-right-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。

- -
{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}
- - - -

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

- -
border-bottom-right-radius.png
- -

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

- -
注: このプロパティの値が border-bottom-right-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
- -

構文

- -
/* 角を円にする */
-/* border-bottom-right-radius: radius */
-border-bottom-right-radius: 3px;
-
-/* パーセント値 */
-border-bottom-right-radius: 20%; /* ボックスが正方形ならば円、長方形ならば楕円 */
-border-bottom-right-radius: 20% 20%; /* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
-border-bottom-right-radius: 20% 10%; /* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
-
-/* 角を楕円にする */
-/* border-bottom-right-radius: horizontal vertical */
-border-bottom-right-radius: 0.5em 1em;
-
-border-bottom-right-radius: inherit;
- -

値１つで指定する場合:

- - - -

値２つで指定する場合:

- - - -

値

- -
-
<length-percentage>
-
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ライブ例コード
-
- -
- 		境界として使用されている円弧 - 
-div {
-  border-bottom-right-radius: 40px 40px;
-}
-
-
-
- -
- 		境界として使用されている楕円の弧 - 
-div {
-  border-bottom-right-radius: 40px 20px;
-}
-
-
-
- -
- 		ボックスは正方形。境界として使用されている円弧 - 
-div {
-  border-bottom-right-radius: 40%;
-}
-
-
-
- -
- 		ボックスは正方形ではない。境界として使用されている楕円の弧 - 
-div {
-  border-bottom-right-radius: 40%;
-}
-
-
-
- -
- 		背景色は境界で切り取られる - 
-div {
-  border-bottom-right-radius:40%;
-  border-style: black 3px double;
-  background-color: rgb(250,20,70);
-  background-clip: content-box;
-}
-
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-bottom-right-radius/index.md b/files/ja/web/css/border-bottom-right-radius/index.md new file mode 100644 index 0000000000..1d683d390a --- /dev/null +++ b/files/ja/web/css/border-bottom-right-radius/index.md @@ -0,0 +1,187 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-right-radius +--- +
{{CSSRef}}
+ +

border-bottom-right-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}
+ + + +

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-bottom-right-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
注: このプロパティの値が border-bottom-right-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-bottom-right-radius: radius */
+border-bottom-right-radius: 3px;
+
+/* パーセント値 */
+border-bottom-right-radius: 20%; /* ボックスが正方形ならば円、長方形ならば楕円 */
+border-bottom-right-radius: 20% 20%; /* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
+border-bottom-right-radius: 20% 10%; /* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
+
+/* 角を楕円にする */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+ +

値１つで指定する場合:

+ + + +

値２つで指定する場合:

+ + + +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
+ +
+ 		境界として使用されている円弧 + 
+div {
+  border-bottom-right-radius: 40px 40px;
+}
+
+
+
+ +
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-bottom-right-radius: 40px 20px;
+}
+
+
+
+ +
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+ +
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+ +
+ 		背景色は境界で切り取られる + 
+div {
+  border-bottom-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-bottom-style/index.html b/files/ja/web/css/border-bottom-style/index.html deleted file mode 100644 index 35392f014a..0000000000 --- a/files/ja/web/css/border-bottom-style/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: border-bottom-style -slug: Web/CSS/border-bottom-style -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - border - - border-bottom - - border-style - - リファレンス -translation_of: Web/CSS/border-bottom-style ---- -
{{CSSRef}}
- -

border-bottom-style は CSS のプロパティで、要素の下側の境界 ({{cssxref("border")}}) における線の形状を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
- - - -
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
- -

構文

- -
/* キーワード値 */
-border-bottom-style: none;
-border-bottom-style: hidden;
-border-bottom-style: dotted;
-border-bottom-style: dashed;
-border-bottom-style: solid;
-border-bottom-style: double;
-border-bottom-style: groove;
-border-bottom-style: ridge;
-border-bottom-style: inset;
-border-bottom-style: outset;
-
-/* グローバル値 */
-border-bottom-style: inherit;
-border-bottom-style: initial;
-border-bottom-style: unset;
-
- -

border-bottom-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

- -

形式文法

- -{{csssyntax}} - -

例

- -

こちらの表では border-bottom-style のすべての値を紹介します。

- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">dotted</td>
-    <td class="b4">dashed</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

CSS

- -
/* 表の外見を定義 */
-table {
-  border-width: 3px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* border-bottom-style の例のクラス */
-.b1 {border-bottom-style: none;}
-.b2 {border-bottom-style: hidden;}
-.b3 {border-bottom-style: dotted;}
-.b4 {border-bottom-style: dashed;}
-.b5 {border-bottom-style: solid;}
-.b6 {border-bottom-style: double;}
-.b7 {border-bottom-style: groove;}
-.b8 {border-bottom-style: ridge;}
-.b9 {border-bottom-style: inset;}
-.b10 {border-bottom-style: outset;}
- -

結果

- -

{{ EmbedLiveSample('Examples', 300, 200) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Backgrounds', '#propdef-border-bottom-style', 'border-bottom-style') }}{{ Spec2('CSS3 Backgrounds') }}重要な変更はなし。
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}{{ Spec2('CSS2.1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-bottom-style/index.md b/files/ja/web/css/border-bottom-style/index.md new file mode 100644 index 0000000000..35392f014a --- /dev/null +++ b/files/ja/web/css/border-bottom-style/index.md @@ -0,0 +1,137 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border + - border-bottom + - border-style + - リファレンス +translation_of: Web/CSS/border-bottom-style +--- +
{{CSSRef}}
+ +

border-bottom-style は CSS のプロパティで、要素の下側の境界 ({{cssxref("border")}}) における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
+ + + +
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+ +

構文

+ +
/* キーワード値 */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* グローバル値 */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+
+ +

border-bottom-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

こちらの表では border-bottom-style のすべての値を紹介します。

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 3px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-bottom-style の例のクラス */
+.b1 {border-bottom-style: none;}
+.b2 {border-bottom-style: hidden;}
+.b3 {border-bottom-style: dotted;}
+.b4 {border-bottom-style: dashed;}
+.b5 {border-bottom-style: solid;}
+.b6 {border-bottom-style: double;}
+.b7 {border-bottom-style: groove;}
+.b8 {border-bottom-style: ridge;}
+.b9 {border-bottom-style: inset;}
+.b10 {border-bottom-style: outset;}
+ +

結果

+ +

{{ EmbedLiveSample('Examples', 300, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Backgrounds', '#propdef-border-bottom-style', 'border-bottom-style') }}{{ Spec2('CSS3 Backgrounds') }}重要な変更はなし。
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-bottom-width/index.html b/files/ja/web/css/border-bottom-width/index.html deleted file mode 100644 index 1af992f964..0000000000 --- a/files/ja/web/css/border-bottom-width/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: border-bottom-width -slug: Web/CSS/border-bottom-width -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-bottom - - border-width -translation_of: Web/CSS/border-bottom-width ---- -
{{CSSRef}}
- -

CSS の border-bottom-width プロパティは、ボックスの下の境界の幅を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
- - - -

構文

- -
/* キーワード値 */
-border-bottom-width: thin;
-border-bottom-width: medium;
-border-bottom-width: thick;
-
-/* <length> 値 */
-border-bottom-width: 10em;
-border-bottom-width: 3vmax;
-border-bottom-width: 6px;
-
-/* グローバルキーワード */
-border-bottom-width: inherit;
-border-bottom-width: initial;
-border-bottom-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div>Element 1</div>
-<div>Element 2</div>
- -

CSS

- -
div {
-  border: 1px solid red;
-  margin: 1em 0;
-}
-
-div:nth-child(1) {
-  border-bottom-width: thick;
-}
-div:nth-child(2) {
-  border-bottom-width: 2em;
-}
- -

結果

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-bottom-width/index.md b/files/ja/web/css/border-bottom-width/index.md new file mode 100644 index 0000000000..1af992f964 --- /dev/null +++ b/files/ja/web/css/border-bottom-width/index.md @@ -0,0 +1,146 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-bottom + - border-width +translation_of: Web/CSS/border-bottom-width +--- +
{{CSSRef}}
+ +

CSS の border-bottom-width プロパティは、ボックスの下の境界の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* <length> 値 */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* グローバルキーワード */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+
+ +

値

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

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

+
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-bottom-width: thick;
+}
+div:nth-child(2) {
+  border-bottom-width: 2em;
+}
+ +

結果

+ +

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

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-bottom/index.html b/files/ja/web/css/border-bottom/index.html deleted file mode 100644 index 5e1710479f..0000000000 --- a/files/ja/web/css/border-bottom/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: border-bottom -slug: Web/CSS/border-bottom -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/border-bottom ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
- - - -

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

- -
border-bottom-style: dotted;
-border-bottom: thick green;
-
- -

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

- -
border-bottom-style: dotted;
-border-bottom: none thick green;
-
- -

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

- -

構成要素のプロパティ

- -

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

- - - -

構文

- -
border-bottom: 1px;
-border-bottom: 2px dotted;
-border-bottom: medium dashed blue;
-
- -

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

- -

値

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

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

下の境界の適用

- -

HTML

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

CSS

- -
div {
-  border-bottom: 4px dashed blue;
-  background-color: gold;
-  height: 100px;
-  width: 100px;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/border-bottom/index.md b/files/ja/web/css/border-bottom/index.md new file mode 100644 index 0000000000..5e1710479f --- /dev/null +++ b/files/ja/web/css/border-bottom/index.md @@ -0,0 +1,137 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-bottom +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
+ + + +

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

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

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

+ +
border-bottom-style: dotted;
+border-bottom: none thick green;
+
+ +

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

+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +
border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+
+ +

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

+ +

値

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

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

下の境界の適用

+ +

HTML

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

CSS

+ +
div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-color/index.html b/files/ja/web/css/border-color/index.html deleted file mode 100644 index 1b2af584f3..0000000000 --- a/files/ja/web/css/border-color/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: border-color -slug: Web/CSS/border-color -tags: - - CSS - - CSS プロパティ - - CSS 境界線 - - CSS 背景と境界 - - HTML 色 - - Reference - - Styling HTML - - border - - border-color - - 一括指定プロパティ - - 色 -translation_of: Web/CSS/border-color ---- -
{{CSSRef}}
- -

border-color は一括指定を行う CSS のプロパティで、要素の境界の色を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-color.html")}}
- - - -

各辺を個々に設定する場合は、 {{CSSxRef("border-top-color")}}、 {{CSSxRef("border-right-color")}}、 {{CSSxRef("border-bottom-color")}}、 {{CSSxRef("border-left-color")}}、 または書字方向を意識した{{CSSxRef("border-block-start-color")}}、 {{CSSxRef("border-block-end-color")}}、 {{CSSxRef("border-inline-start-color")}}、 {{CSSxRef("border-inline-end-color")}} を使用します。

- -

境界線の色についての詳細な情報は、 {{SectionOnPage("/ja/docs/Web/HTML/Applying_color", "Borders")}} にあります。

- -

構文

- -
/* <color> 値 */
-border-color: red;
-
-/* 水平線 | 垂直線 */
-border-color: red #f015ca;
-
-/* 上辺 | 垂直線 | 下辺 */
-border-color: red rgb(240,30,50,.7) green;
-
-/* 上辺 | 右辺 | 下辺 | 左辺 */
-border-color: red yellow green blue;
-
-/* グローバル値 */
-border-color: inherit;
-border-color: initial;
-border-color: unset;
-
- -

border-color プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。

- - - -

値

- -
-
{{CSSxRef("<color>")}}
-
境界線の色を定義します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

完全な border-color の使用法

- -

HTML

- -
<div id="justone">
-  <p><code>border-color: red;</code> is equivalent to</p>
-  <ul><li><code>border-top-color: red;</code></li>
-    <li><code>border-right-color: red;</code></li>
-    <li><code>border-bottom-color: red;</code></li>
-    <li><code>border-left-color: red;</code></li>
-  </ul>
-</div>
-<div id="horzvert">
-  <p><code>border-color: gold red;</code> is equivalent to</p>
-  <ul><li><code>border-top-color: gold;</code></li>
-    <li><code>border-right-color: red;</code></li>
-    <li><code>border-bottom-color: gold;</code></li>
-    <li><code>border-left-color: red;</code></li>
-  </ul>
-</div>
-<div id="topvertbott">
-  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
-  <ul><li><code>border-top-color: red;</code></li>
-    <li><code>border-right-color: cyan;</code></li>
-    <li><code>border-bottom-color: gold;</code></li>
-    <li><code>border-left-color: cyan;</code></li>
-  </ul>
-</div>
-<div id="trbl">
-  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
-  <ul><li><code>border-top-color: red;</code></li>
-    <li><code>border-right-color: cyan;</code></li>
-    <li><code>border-bottom-color: black;</code></li>
-    <li><code>border-left-color: gold;</code></li>
-  </ul>
-</div>
-
- -

CSS

- -
#justone {
-  border-color: red;
-}
-
-#horzvert {
-  border-color: gold red;
-}
-
-#topvertbott {
-  border-color: red cyan gold;
-}
-
-#trbl {
-  border-color: red cyan black gold;
-}
-
-/* すべての div に幅とスタイルを設定 */
-div {
-  border: solid 0.3em;
-  width: auto;
-  margin: 0.5em;
-  padding: 0.5em;
-}
-
-ul {
-  margin: 0;
-  list-style: none;
-}
-
- -

結果

- -

{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}{{Spec2("CSS Logical Properties")}}logical キーワードを追加。
{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}{{Spec2("CSS3 Backgrounds")}}transparent キーワードが削除され、 {{CSSxRef("<color>")}} データ型の一部になった。
{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}{{Spec2("CSS2.1")}}一括指定プロパティと定義された。
{{SpecName("CSS1", "#border-color", "border-color")}}{{Spec2("CSS1")}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-color/index.md b/files/ja/web/css/border-color/index.md new file mode 100644 index 0000000000..1b2af584f3 --- /dev/null +++ b/files/ja/web/css/border-color/index.md @@ -0,0 +1,194 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS プロパティ + - CSS 境界線 + - CSS 背景と境界 + - HTML 色 + - Reference + - Styling HTML + - border + - border-color + - 一括指定プロパティ + - 色 +translation_of: Web/CSS/border-color +--- +
{{CSSRef}}
+ +

border-color は一括指定を行う CSS のプロパティで、要素の境界の色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-color.html")}}
+ + + +

各辺を個々に設定する場合は、 {{CSSxRef("border-top-color")}}、 {{CSSxRef("border-right-color")}}、 {{CSSxRef("border-bottom-color")}}、 {{CSSxRef("border-left-color")}}、 または書字方向を意識した{{CSSxRef("border-block-start-color")}}、 {{CSSxRef("border-block-end-color")}}、 {{CSSxRef("border-inline-start-color")}}、 {{CSSxRef("border-inline-end-color")}} を使用します。

+ +

境界線の色についての詳細な情報は、 {{SectionOnPage("/ja/docs/Web/HTML/Applying_color", "Borders")}} にあります。

+ +

構文

+ +
/* <color> 値 */
+border-color: red;
+
+/* 水平線 | 垂直線 */
+border-color: red #f015ca;
+
+/* 上辺 | 垂直線 | 下辺 */
+border-color: red rgb(240,30,50,.7) green;
+
+/* 上辺 | 右辺 | 下辺 | 左辺 */
+border-color: red yellow green blue;
+
+/* グローバル値 */
+border-color: inherit;
+border-color: initial;
+border-color: unset;
+
+ +

border-color プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。

+ + + +

値

+ +
+
{{CSSxRef("<color>")}}
+
境界線の色を定義します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

完全な border-color の使用法

+ +

HTML

+ +
<div id="justone">
+  <p><code>border-color: red;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: red;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="horzvert">
+  <p><code>border-color: gold red;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: gold;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="topvertbott">
+  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: cyan;</code></li>
+  </ul>
+</div>
+<div id="trbl">
+  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: black;</code></li>
+    <li><code>border-left-color: gold;</code></li>
+  </ul>
+</div>
+
+ +

CSS

+ +
#justone {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#topvertbott {
+  border-color: red cyan gold;
+}
+
+#trbl {
+  border-color: red cyan black gold;
+}
+
+/* すべての div に幅とスタイルを設定 */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}{{Spec2("CSS Logical Properties")}}logical キーワードを追加。
{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}{{Spec2("CSS3 Backgrounds")}}transparent キーワードが削除され、 {{CSSxRef("<color>")}} データ型の一部になった。
{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}{{Spec2("CSS2.1")}}一括指定プロパティと定義された。
{{SpecName("CSS1", "#border-color", "border-color")}}{{Spec2("CSS1")}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-left-color/index.html b/files/ja/web/css/border-left-color/index.html deleted file mode 100644 index 68051c2bf5..0000000000 --- a/files/ja/web/css/border-left-color/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: border-left-color -slug: Web/CSS/border-left-color -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-color - - border-left -translation_of: Web/CSS/border-left-color ---- -
{{CSSRef}}
- -

border-left-color は CSS のプロパティで、要素の左側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-left")}} でも設定することができます。

- -
{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
- - - -

構文

- -
/* <color> 値 */
-border-left-color: red;
-border-left-color: #ffbb00;
-border-left-color: rgb(255, 0, 0);
-border-left-color: hsla(100%, 50%, 25%, 0.75);
-border-left-color: currentcolor;
-border-left-color: transparent;
-
-/* グローバル値 */
-border-left-color: inherit;
-border-left-color: initial;
-border-left-color: unset;
-
- -

border-left-color プロパティは1つの値で指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
左の境界線の色を定義します。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

境界線が付いた単純な div

- -

HTML

- -
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
-     なお、ボックスのその辺が
-     <span class="redtext">赤</span>になっています。</p>
-</div>
- -

CSS

- -
.mybox {
-    border: solid 0.3em gold;
-    border-left-color: red;
-    width: auto;
-}
-
-.redtext {
-    color: red;
-}
- -

結果

- -

{{EmbedLiveSample('A_simple_div_with_a_border')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-left-color/index.md b/files/ja/web/css/border-left-color/index.md new file mode 100644 index 0000000000..68051c2bf5 --- /dev/null +++ b/files/ja/web/css/border-left-color/index.md @@ -0,0 +1,117 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-color + - border-left +translation_of: Web/CSS/border-left-color +--- +
{{CSSRef}}
+ +

border-left-color は CSS のプロパティで、要素の左側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-left")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-left-color: red;
+border-left-color: #ffbb00;
+border-left-color: rgb(255, 0, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: currentcolor;
+border-left-color: transparent;
+
+/* グローバル値 */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+
+ +

border-left-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
左の境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-left-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-left-style/index.html b/files/ja/web/css/border-left-style/index.html deleted file mode 100644 index 7a1bbb25fb..0000000000 --- a/files/ja/web/css/border-left-style/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: border-left-style -slug: Web/CSS/border-left-style -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-left - - border-style -translation_of: Web/CSS/border-left-style ---- -
{{CSSRef}}
- -

CSS の border-left-style プロパティは、要素の左側の {{cssxref("border")}} における線の形状を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
- - - -
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
- -

構文

- -
/* キーワード値 */
-border-left-style: none;
-border-left-style: hidden;
-border-left-style: dotted;
-border-left-style: dashed;
-border-left-style: solid;
-border-left-style: double;
-border-left-style: groove;
-border-left-style: ridge;
-border-left-style: inset;
-border-left-style: outset;
-
-/* グローバル値 */
-border-left-style: inherit;
-border-left-style: initial;
-border-left-style: unset;
-
- -

border-left-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">dotted</td>
-    <td class="b4">dashed</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

CSS

- -
/* 表の外見を定義 */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* border-left-style の例のクラス */
-.b1 {border-left-style: none;}
-.b2 {border-left-style: hidden;}
-.b3 {border-left-style: dotted;}
-.b4 {border-left-style: dashed;}
-.b5 {border-left-style: solid;}
-.b6 {border-left-style: double;}
-.b7 {border-left-style: groove;}
-.b8 {border-left-style: ridge;}
-.b9 {border-left-style: inset;}
-.b10 {border-left-style: outset;}
- -

結果

- -

{{ EmbedLiveSample('Examples', 300, 200) }}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-left-style/index.md b/files/ja/web/css/border-left-style/index.md new file mode 100644 index 0000000000..7a1bbb25fb --- /dev/null +++ b/files/ja/web/css/border-left-style/index.md @@ -0,0 +1,135 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-left + - border-style +translation_of: Web/CSS/border-left-style +--- +
{{CSSRef}}
+ +

CSS の border-left-style プロパティは、要素の左側の {{cssxref("border")}} における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
+ + + +
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+ +

構文

+ +
/* キーワード値 */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* グローバル値 */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+
+ +

border-left-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-left-style の例のクラス */
+.b1 {border-left-style: none;}
+.b2 {border-left-style: hidden;}
+.b3 {border-left-style: dotted;}
+.b4 {border-left-style: dashed;}
+.b5 {border-left-style: solid;}
+.b6 {border-left-style: double;}
+.b7 {border-left-style: groove;}
+.b8 {border-left-style: ridge;}
+.b9 {border-left-style: inset;}
+.b10 {border-left-style: outset;}
+ +

結果

+ +

{{ EmbedLiveSample('Examples', 300, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}明確な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-left-width/index.html b/files/ja/web/css/border-left-width/index.html deleted file mode 100644 index eac253e0e1..0000000000 --- a/files/ja/web/css/border-left-width/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: border-left-width -slug: Web/CSS/border-left-width -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-left - - border-width -translation_of: Web/CSS/border-left-width ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
- - - -

構文

- -
/* キーワード値 */
-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;
-
-/* グローバル値 */
-border-left-width: inherit;
-border-left-width: initial;
-border-left-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div>Element 1</div>
-<div>Element 2</div>
- -

CSS

- -
div {
-  border: 1px solid red;
-  margin: 1em 0;
-}
-
-div:nth-child(1) {
-  border-left-width: thick;
-}
-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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/border-left-width/index.md b/files/ja/web/css/border-left-width/index.md new file mode 100644 index 0000000000..eac253e0e1 --- /dev/null +++ b/files/ja/web/css/border-left-width/index.md @@ -0,0 +1,146 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-left + - border-width +translation_of: Web/CSS/border-left-width +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+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;
+
+/* グローバル値 */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+
+ +

値

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

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

+
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-left-width: thick;
+}
+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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-left/index.html b/files/ja/web/css/border-left/index.html deleted file mode 100644 index 0eb1f1b539..0000000000 --- a/files/ja/web/css/border-left/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: border-left -slug: Web/CSS/border-left -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/border-left ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-left.html")}}
- - - -

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

- -
border-left-style: dotted;
-border-left: thick green;
-
- -

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

- -
border-left-style: dotted;
-border-left: none thick green;
-
- -

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

- -

構成要素のプロパティ

- -

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

- - - -

構文

- -
border-left: 1px;
-border-left: 2px dotted;
-border-left: medium dashed green;
-
- -

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

- -

値

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

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

左の境界の適用

- -

HTML

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

CSS

- -
div {
-  border-left: 4px dashed blue;
-  background-color: gold;
-  height: 100px;
-  width: 100px;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/border-left/index.md b/files/ja/web/css/border-left/index.md new file mode 100644 index 0000000000..0eb1f1b539 --- /dev/null +++ b/files/ja/web/css/border-left/index.md @@ -0,0 +1,137 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-left +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-left.html")}}
+ + + +

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

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

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

+ +
border-left-style: dotted;
+border-left: none thick green;
+
+ +

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

+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +
border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+
+ +

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

+ +

値

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

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

左の境界の適用

+ +

HTML

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

CSS

+ +
div {
+  border-left: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-radius/index.html b/files/ja/web/css/border-radius/index.html deleted file mode 100644 index cb351478fe..0000000000 --- a/files/ja/web/css/border-radius/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: border-radius -slug: Web/CSS/border-radius -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border-radius -translation_of: Web/CSS/border-radius ---- -
{{CSSRef}}
- -

border-radius は CSS の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。

- -
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
- - - -

このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの一括指定です。

- -

半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。

- -

border-radius プロパティは {{cssxref("border-collapse")}} が collapse の table 要素には適用されません。

- -
メモ: 他の一括指定プロパティと同様、個別のサブプロパティは border-radius:0 0 inherit inherit のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
- -

構文

- -
/* 最初の半径の構文は1つから4つの値が許可されています */
-/* 半径を全4角に設定 */
-border-radius: 10px;
-
-/* 左上と右下 | 右上と左下 */
-border-radius: 10px 5%;
-
-/* 左上 | 右上と左下 | 右下 */
-border-radius: 2px 4px 2px;
-
-/* 左上 | 右上 | 右下 | 左下 */
-border-radius: 1px 0 3px 4px;
-
-/* 2番目の半径の構文は1つから4つの値が許可されています */
-/* (最初の半径の値) / radius */
-border-radius: 10px / 20px;
-
-/* (最初の半径の値) / 左上と右下 | 右上と左下 */
-border-radius: 10px 5% / 20px 30px;
-
-/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
-border-radius: 10px 5px 2em / 20px 25px 30%;
-
-/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
-border-radius: 10px 5% / 20px 25em 30px 35em;
-
-/* グローバル値 */
-border-radius: inherit;
-border-radius: initial;
-border-radius: unset;
-
- -

border-radius プロパティは次のように指定することができます。

- - - -

値

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
半径all-corner.png境界の四隅に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。1つの値の構文のみで使用されます。
左上と右下top-left-bottom-right.png要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つの値の構文のみで使用されます。
右上と左下top-right-bottom-left.png要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つ又は3つの値の構文のみで使用されます。
左上top-left.png要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
右上top-right.png要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
右下bottom-rigth.png要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
左下bottom-left.png要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
- -
-
{{cssxref("<length>")}}
-
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。
-
{{cssxref("<percentage>")}}
-
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。
-
- -

例:

- -
border-radius: 1em/5em;
-
-/* ... is equivalent to: */
-border-top-left-radius:     1em 5em;
-border-top-right-radius:    1em 5em;
-border-bottom-right-radius: 1em 5em;
-border-bottom-left-radius:  1em 5em;
-
- -
border-radius: 4px 3px 6px / 2px 4px;
-
-/* ... is equivalent to: */
-border-top-left-radius:     4px 2px;
-border-top-right-radius:    3px 4px;
-border-bottom-right-radius: 6px 2px;
-border-bottom-left-radius:  3px 4px;
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
  border: solid 10px;
-  /* 境界が「D」のように描画される */
-  border-radius: 10px 40px 40px 10px;
-
- -
  border: groove 1em red;
-  border-radius: 2em;
-
- -
  background: gold;
-  border: ridge gold;
-  border-radius: 13em/3em;
-
- -
  border: none;
-  border-radius: 40px 10px;
-
- -
  border: none;
-  border-radius: 50%;
-
- -
  border: dotted;
-  border-width: 10px 4px;
-  border-radius: 10px 40px;
-
- -
  border: dashed;
-  border-width: 2px 4px;
-  border-radius: 40px;
-
- -

ライブサンプル

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-radius/index.md b/files/ja/web/css/border-radius/index.md new file mode 100644 index 0000000000..cb351478fe --- /dev/null +++ b/files/ja/web/css/border-radius/index.md @@ -0,0 +1,215 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-radius +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

border-radius は CSS の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ + + +

このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの一括指定です。

+ +

半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。

+ +

border-radius プロパティは {{cssxref("border-collapse")}} が collapse の table 要素には適用されません。

+ +
メモ: 他の一括指定プロパティと同様、個別のサブプロパティは border-radius:0 0 inherit inherit のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
+ +

構文

+ +
/* 最初の半径の構文は1つから4つの値が許可されています */
+/* 半径を全4角に設定 */
+border-radius: 10px;
+
+/* 左上と右下 | 右上と左下 */
+border-radius: 10px 5%;
+
+/* 左上 | 右上と左下 | 右下 */
+border-radius: 2px 4px 2px;
+
+/* 左上 | 右上 | 右下 | 左下 */
+border-radius: 1px 0 3px 4px;
+
+/* 2番目の半径の構文は1つから4つの値が許可されています */
+/* (最初の半径の値) / radius */
+border-radius: 10px / 20px;
+
+/* (最初の半径の値) / 左上と右下 | 右上と左下 */
+border-radius: 10px 5% / 20px 30px;
+
+/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* グローバル値 */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+
+ +

border-radius プロパティは次のように指定することができます。

+ + + +

値

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
半径all-corner.png境界の四隅に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。1つの値の構文のみで使用されます。
左上と右下top-left-bottom-right.png要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つの値の構文のみで使用されます。
右上と左下top-right-bottom-left.png要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つ又は3つの値の構文のみで使用されます。
左上top-left.png要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
右上top-right.png要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
右下bottom-rigth.png要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。
左下bottom-left.png要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。
+ +
+
{{cssxref("<length>")}}
+
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。
+
{{cssxref("<percentage>")}}
+
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。
+
+ +

例:

+ +
border-radius: 1em/5em;
+
+/* ... is equivalent to: */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... is equivalent to: */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
  border: solid 10px;
+  /* 境界が「D」のように描画される */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +
  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+ +
  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+ +

ライブサンプル

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-right-color/index.html b/files/ja/web/css/border-right-color/index.html deleted file mode 100644 index 5f3cc19836..0000000000 --- a/files/ja/web/css/border-right-color/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: border-right-color -slug: Web/CSS/border-right-color -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/border-right-color ---- -
{{CSSRef}}
- -

border-right-color は CSS のプロパティで、要素の右側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-right")}} でも設定することができます。

- -
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
- - - -

構文

- -
/* <color> 値 */
-border-right-color: red;
-border-right-color: #ffbb00;
-border-right-color: rgb(255, 0, 0);
-border-right-color: hsla(100%, 50%, 25%, 0.75);
-border-right-color: currentcolor;
-border-right-color: transparent;
-
-/* グローバル値 */
-border-right-color: inherit;
-border-right-color: initial;
-border-right-color: unset;
-
- -

border-right-color プロパティは1つの値で指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
右の境界線の色を定義します。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

境界線が付いた単純な div

- -

HTML

- -
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
-     なお、ボックスのその辺が
-     <span class="redtext">赤</span>になっています。</p>
-</div>
- -

CSS

- -
.mybox {
-    border: solid 0.3em gold;
-    border-right-color: red;
-    width: auto;
-}
-
-.redtext {
-    color: red;
-}
- -

結果

- -

{{EmbedLiveSample('A_simple_div_with_a_border')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-right-color/index.md b/files/ja/web/css/border-right-color/index.md new file mode 100644 index 0000000000..5f3cc19836 --- /dev/null +++ b/files/ja/web/css/border-right-color/index.md @@ -0,0 +1,115 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-right-color +--- +
{{CSSRef}}
+ +

border-right-color は CSS のプロパティで、要素の右側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-right")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-right-color: red;
+border-right-color: #ffbb00;
+border-right-color: rgb(255, 0, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: currentcolor;
+border-right-color: transparent;
+
+/* グローバル値 */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+
+ +

border-right-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
右の境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-right-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-right-style/index.html b/files/ja/web/css/border-right-style/index.html deleted file mode 100644 index 95b3cda12b..0000000000 --- a/files/ja/web/css/border-right-style/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: border-right-style -slug: Web/CSS/border-right-style -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-right - - border-style -translation_of: Web/CSS/border-right-style ---- -
{{CSSRef}}
- -

border-right-style は CSS のプロパティで、要素の右側の境界 ({{cssxref("border")}}) における線の形状を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-right-style.html")}}
- - - -
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
- -

構文

- -
/* キーワード値 */
-border-right-style: none;
-border-right-style: hidden;
-border-right-style: dotted;
-border-right-style: dashed;
-border-right-style: solid;
-border-right-style: double;
-border-right-style: groove;
-border-right-style: ridge;
-border-right-style: inset;
-border-right-style: outset;
-
-/* グローバル値 */
-border-right-style: inherit;
-border-right-style: initial;
-border-right-style: unset;
-
- -

border-right-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">dotted</td>
-    <td class="b4">dashed</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

CSS

- -
/* 表の外見を定義 */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* border-right-style の例のクラス */
-.b1 {border-right-style: none;}
-.b2 {border-right-style: hidden;}
-.b3 {border-right-style: dotted;}
-.b4 {border-right-style: dashed;}
-.b5 {border-right-style: solid;}
-.b6 {border-right-style: double;}
-.b7 {border-right-style: groove;}
-.b8 {border-right-style: ridge;}
-.b9 {border-right-style: inset;}
-.b10 {border-right-style: outset;}
- -

結果

- -

{{ EmbedLiveSample('Examples') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}{{Spec2('CSS3 Backgrounds')}}重要な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}{{Spec2('CSS2.1')}}初回定義。
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-right-style/index.md b/files/ja/web/css/border-right-style/index.md new file mode 100644 index 0000000000..95b3cda12b --- /dev/null +++ b/files/ja/web/css/border-right-style/index.md @@ -0,0 +1,135 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-right + - border-style +translation_of: Web/CSS/border-right-style +--- +
{{CSSRef}}
+ +

border-right-style は CSS のプロパティで、要素の右側の境界 ({{cssxref("border")}}) における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-right-style.html")}}
+ + + +
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+ +

構文

+ +
/* キーワード値 */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* グローバル値 */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+
+ +

border-right-style プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-right-style の例のクラス */
+.b1 {border-right-style: none;}
+.b2 {border-right-style: hidden;}
+.b3 {border-right-style: dotted;}
+.b4 {border-right-style: dashed;}
+.b5 {border-right-style: solid;}
+.b6 {border-right-style: double;}
+.b7 {border-right-style: groove;}
+.b8 {border-right-style: ridge;}
+.b9 {border-right-style: inset;}
+.b10 {border-right-style: outset;}
+ +

結果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}{{Spec2('CSS3 Backgrounds')}}重要な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}{{Spec2('CSS2.1')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-right-width/index.html b/files/ja/web/css/border-right-width/index.html deleted file mode 100644 index 7c7de6ab0a..0000000000 --- a/files/ja/web/css/border-right-width/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: border-right-width -slug: Web/CSS/border-right-width -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-right - - border-width -translation_of: Web/CSS/border-right-width ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
- - - -

構文

- -
/* キーワード値 */
-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;
-
-/* グローバル値 */
-border-right-width: inherit;
-border-right-width: initial;
-border-right-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div>Element 1</div>
-<div>Element 2</div>
- -

CSS

- -
div {
-  border: 1px solid red;
-  margin: 1em 0;
-}
-
-div:nth-child(1) {
-  border-right-width: thick;
-}
-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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/border-right-width/index.md b/files/ja/web/css/border-right-width/index.md new file mode 100644 index 0000000000..7c7de6ab0a --- /dev/null +++ b/files/ja/web/css/border-right-width/index.md @@ -0,0 +1,146 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-right + - border-width +translation_of: Web/CSS/border-right-width +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+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;
+
+/* グローバル値 */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;
+
+ +

値

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

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

+
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-right-width: thick;
+}
+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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-right/index.html b/files/ja/web/css/border-right/index.html deleted file mode 100644 index 05653b067a..0000000000 --- a/files/ja/web/css/border-right/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: border-right -slug: Web/CSS/border-right -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/border-right ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-right.html")}}
- - - -

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

- -
border-right-style: dotted;
-border-right: thick green;
-
- -

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

- -
border-right-style: dotted;
-border-right: none thick green;
-
- -

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

- -

構成要素のプロパティ

- -

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

- - - -

構文

- -
border-right: 1px;
-border-right: 2px dotted;
-border-right: medium dashed green;
-
- -

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

- -

値

- -
-
<br-width>
-
{{cssxref("border-right-width")}} を参照してください。
-
<br-style>
-
{{cssxref("border-right-style")}} を参照してください。
-
{{cssxref("<color>")}}
-
{{cssxref("border-right-color")}} を参照してください。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

右の境界の適用

- -

HTML

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

CSS

- -
div {
-  border-right: 4px dashed blue;
-  background-color: gold;
-  height: 100px;
-  width: 100px;
-  font-weight: bold;
-  text-align: center;
-}
-
- -

結果

- -

{{EmbedLiveSample('Applying_a_right_border')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-right/index.md b/files/ja/web/css/border-right/index.md new file mode 100644 index 0000000000..05653b067a --- /dev/null +++ b/files/ja/web/css/border-right/index.md @@ -0,0 +1,137 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-right +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-right.html")}}
+ + + +

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

+ +
border-right-style: dotted;
+border-right: thick green;
+
+ +

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

+ +
border-right-style: dotted;
+border-right: none thick green;
+
+ +

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

+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +
border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+
+ +

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

+ +

値

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

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

右の境界の適用

+ +

HTML

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

CSS

+ +
div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Applying_a_right_border')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-style/index.html b/files/ja/web/css/border-style/index.html deleted file mode 100644 index 71c2fba756..0000000000 --- a/files/ja/web/css/border-style/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: border-style -slug: Web/CSS/border-style -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - Web - - border - - border-style - - 一括指定プロパティ -translation_of: Web/CSS/border-style ---- -
{{CSSRef}}
- -

border-style は 一括指定 の CSS プロパティで、要素の境界線の4辺すべての線のスタイルを設定します。

- -
{{EmbedInteractiveExample("pages/css/border-style.html")}}
- - - -

構文

- -
/* キーワード値 */
-border-style: none;
-border-style: hidden;
-border-style: dotted;
-border-style: dashed;
-border-style: solid;
-border-style: double;
-border-style: groove;
-border-style: ridge;
-border-style: inset;
-border-style: outset;
-
-/* 上下 | 左右 */
-border-style: dotted solid;
-
-/* 上 | 左右 | 下 */
-border-style: hidden double dashed;
-
-/* 上 | 右 | 下 | 左 */
-border-style: none solid dotted dashed;
-
-/* グローバル値 */
-border-style: inherit;
-border-style: initial;
-border-style: unset;
-
- -

border-style プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。

- - - -

それぞれの値は以下の一覧にあるキーワードです。

- -

値

- -
-
<line-style>
-
枠線のスタイルを表すキーワード。以下の値を使用できます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
none -
要素
- 		hidden キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 none 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
hidden -
要素
- 		none キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 hidden 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
dotted -
要素
- 		連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。
dashed -
要素
- 		短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
solid -
要素
- 		1本の直線、実線を表示します。
double -
要素
- 		2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。
groove -
要素
- 		凹んだように見える境界線を表示します。 ridge の逆です。
ridge -
要素
- 		出っ張ったように見える境界線を表示します。 groove の逆です。
inset -
要素
- 		要素が埋め込まれて見える境界線を表示します。 outset の逆です。 {{cssxref("border-collapse")}} が collapsed に設定されたテーブルのセルに適用すると、この値は groove のようにふるまいます。
outset -
要素
- 		-

要素が出っ張って見える境界線を表示します。 inset の逆です。 {{cssxref("border-collapse")}} を collapsed に設定したテーブルセルに適用すると、この値は ridge のようにふるまいます。

-
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

プロパティのすべての値を指定したテーブル

- -

プロパティのすべての値のサンプルです。

- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">dotted</td>
-    <td class="b4">dashed</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

CSS

- -
/* テーブルの外見を定義 */
-table {
-  border-width: 3px;
-  background-color: #52E396;
-}
-tr, td {
-  padding: 2px;
-}
-
-/* border-style の例示用クラス */
-.b1 {border-style:none;}
-.b2 {border-style:hidden;}
-.b3 {border-style:dotted;}
-.b4 {border-style:dashed;}
-.b5 {border-style:solid;}
-.b6 {border-style:double;}
-.b7 {border-style:groove;}
-.b8 {border-style:ridge;}
-.b9 {border-style:inset;}
-.b10 {border-style:outset;}
- -

結果

- -

{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}変更なし。
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}hidden キーワードを追加。
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-style/index.md b/files/ja/web/css/border-style/index.md new file mode 100644 index 0000000000..71c2fba756 --- /dev/null +++ b/files/ja/web/css/border-style/index.md @@ -0,0 +1,244 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - Web + - border + - border-style + - 一括指定プロパティ +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

border-style は 一括指定 の CSS プロパティで、要素の境界線の4辺すべての線のスタイルを設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/* 上下 | 左右 */
+border-style: dotted solid;
+
+/* 上 | 左右 | 下 */
+border-style: hidden double dashed;
+
+/* 上 | 右 | 下 | 左 */
+border-style: none solid dotted dashed;
+
+/* グローバル値 */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

border-style プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。

+ + + +

それぞれの値は以下の一覧にあるキーワードです。

+ +

値

+ +
+
<line-style>
+
枠線のスタイルを表すキーワード。以下の値を使用できます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
要素
+ 		hidden キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 none 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
hidden +
要素
+ 		none キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 hidden 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
dotted +
要素
+ 		連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。
dashed +
要素
+ 		短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
solid +
要素
+ 		1本の直線、実線を表示します。
double +
要素
+ 		2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。
groove +
要素
+ 		凹んだように見える境界線を表示します。 ridge の逆です。
ridge +
要素
+ 		出っ張ったように見える境界線を表示します。 groove の逆です。
inset +
要素
+ 		要素が埋め込まれて見える境界線を表示します。 outset の逆です。 {{cssxref("border-collapse")}} が collapsed に設定されたテーブルのセルに適用すると、この値は groove のようにふるまいます。
outset +
要素
+ 		+

要素が出っ張って見える境界線を表示します。 inset の逆です。 {{cssxref("border-collapse")}} を collapsed に設定したテーブルセルに適用すると、この値は ridge のようにふるまいます。

+
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

プロパティのすべての値を指定したテーブル

+ +

プロパティのすべての値のサンプルです。

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* テーブルの外見を定義 */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style の例示用クラス */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

結果

+ +

{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}変更なし。
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}hidden キーワードを追加。
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-top-color/index.html b/files/ja/web/css/border-top-color/index.html deleted file mode 100644 index c48e869704..0000000000 --- a/files/ja/web/css/border-top-color/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: border-top-color -slug: Web/CSS/border-top-color -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/border-top-color ---- -
{{CSSRef}}
- -

border-top-color は CSS のプロパティで、要素の上側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-top")}} でも設定することができます。

- -
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
- - - -

構文

- -
/* <color> 値 */
-border-top-color: red;
-border-top-color: #ffbb00;
-border-top-color: rgb(255, 0, 0);
-border-top-color: hsla(100%, 50%, 25%, 0.75);
-border-top-color: currentcolor;
-border-top-color: transparent;
-
-/* グローバル値 */
-border-top-color: inherit;
-border-top-color: initial;
-border-top-color: unset;
-
- -

border-top-color プロパティは1つの値で指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
上の境界線の色を定義します。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

境界線が付いた単純な div

- -

HTML

- -
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
-     なお、ボックスのその辺が
-     <span class="redtext">赤</span>になっています。</p>
-</div>
- -

CSS

- -
.mybox {
-  border: solid 0.3em gold;
-  border-top-color: red;
-  width: auto;
-}
-
-.redtext {
-  color: red;
-}
- -

結果

- -

{{EmbedLiveSample('A_simple_div_with_a_border')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-top-color/index.md b/files/ja/web/css/border-top-color/index.md new file mode 100644 index 0000000000..c48e869704 --- /dev/null +++ b/files/ja/web/css/border-top-color/index.md @@ -0,0 +1,115 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-top-color +--- +
{{CSSRef}}
+ +

border-top-color は CSS のプロパティで、要素の上側の境界線の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-top")}} でも設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentcolor;
+border-top-color: transparent;
+
+/* グローバル値 */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+
+ +

border-top-color プロパティは1つの値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
上の境界線の色を定義します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

境界線が付いた単純な div

+ +

HTML

+ +
<div class="mybox">
+  <p>これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     <span class="redtext">赤</span>になっています。</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}目立った変更はないが、transparent キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。
{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-top-left-radius/index.html b/files/ja/web/css/border-top-left-radius/index.html deleted file mode 100644 index 9db850becf..0000000000 --- a/files/ja/web/css/border-top-left-radius/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: border-top-left-radius -slug: Web/CSS/border-top-left-radius -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - border-radius - - リファレンス -translation_of: Web/CSS/border-top-left-radius ---- -
{{CSSRef}}
- -

CSS の border-top-left-radius プロパティは、要素の左上の角を丸めます。

- -
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
- - - -

丸みは円又は楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

- -
border-radius.png
- -

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

- -
このプロパティの値が border-top-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
- -

構文

- -
/* 角を円にする */
-/* border-top-left-radius: radius */
-border-top-left-radius: 3px;
-
-/* 角を楕円にする */
-/* border-top-left-radius: horizontal vertical */
-border-top-left-radius: 0.5em 1em;
-
-border-top-left-radius: inherit;
-
- -

値１つで指定する場合:

- - - -

値２つで指定する場合:

- - - -

値

- -
-
<length-percentage>
-
円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ライブ例コード
-
 
- 		境界として使用されている円弧 - 
-div {
-  border-top-left-radius: 40px 40px;
-}
-
-
-
 
- 		境界として使用されている楕円の弧 - 
-div {
-  border-top-left-radius: 40px 20px;
-}
-
-
-
 
- 		ボックスは正方形。境界として使用されている円弧 - 
-div {
-  border-top-left-radius: 40%;
-}
-
-
-
 
- 		ボックスは正方形ではない。境界として使用されている楕円の弧 - 
-div {
-  border-top-left-radius: 40%;
-}
-
-
-
 
- 		背景色は境界で切り取られる - 
-div {
-  border-top-left-radius:40%;
-  border-style: black 3px double;
-  background-color: rgb(250,20,70);
-  background-clip: content-box;
-}
-
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- -

CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}

diff --git a/files/ja/web/css/border-top-left-radius/index.md b/files/ja/web/css/border-top-left-radius/index.md new file mode 100644 index 0000000000..9db850becf --- /dev/null +++ b/files/ja/web/css/border-top-left-radius/index.md @@ -0,0 +1,168 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-radius + - リファレンス +translation_of: Web/CSS/border-top-left-radius +--- +
{{CSSRef}}
+ +

CSS の border-top-left-radius プロパティは、要素の左上の角を丸めます。

+ +
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
+ + + +

丸みは円又は楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

+ +
border-radius.png
+ +

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。

+ +
このプロパティの値が border-top-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+ +

構文

+ +
/* 角を円にする */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* 角を楕円にする */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +

値１つで指定する場合:

+ + + +

値２つで指定する場合:

+ + + +

値

+ +
+
<length-percentage>
+
円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ライブ例コード
+
 
+ 		境界として使用されている円弧 + 
+div {
+  border-top-left-radius: 40px 40px;
+}
+
+
+
 
+ 		境界として使用されている楕円の弧 + 
+div {
+  border-top-left-radius: 40px 20px;
+}
+
+
+
 
+ 		ボックスは正方形。境界として使用されている円弧 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		ボックスは正方形ではない。境界として使用されている楕円の弧 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		背景色は境界で切り取られる + 
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ +

CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}

diff --git a/files/ja/web/css/border-top-style/index.html b/files/ja/web/css/border-top-style/index.html deleted file mode 100644 index c09d194a88..0000000000 --- a/files/ja/web/css/border-top-style/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: border-top-style -slug: Web/CSS/border-top-style -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-style - - border-top -translation_of: Web/CSS/border-top-style ---- -
{{CSSRef}}
- -

border-top-style は CSS のプロパティで、要素の上側の境界 ({{CSSxRef("border")}}) における線の形状を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-top-style.html")}}
- - - -
-

メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

-
- -

構文

- -
/* キーワード値 */
-border-top-style: none;
-border-top-style: hidden;
-border-top-style: dotted;
-border-top-style: dashed;
-border-top-style: solid;
-border-top-style: double;
-border-top-style: groove;
-border-top-style: ridge;
-border-top-style: inset;
-border-top-style: outset;
-
-/* グローバル値 */
-border-top-style: inherit;
-border-top-style: initial;
-border-top-style: unset;
-
- -

border-top-style プロパティは、 {{CSSxRef("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

- -

形式文法

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">dotted</td>
-    <td class="b4">dashed</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

CSS

- -
/* 表の外見を定義 */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* border-top-style の例のクラス */
-.b1 {border-top-style: none;}
-.b2 {border-top-style: hidden;}
-.b3 {border-top-style: dotted;}
-.b4 {border-top-style: dashed;}
-.b5 {border-top-style: solid;}
-.b6 {border-top-style: double;}
-.b7 {border-top-style: groove;}
-.b8 {border-top-style: ridge;}
-.b9 {border-top-style: inset;}
-.b10 {border-top-style: outset;}
- -

結果

- -

{{EmbedLiveSample('Examples', 300, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}{{Spec2('CSS3 Backgrounds')}}重要な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}{{Spec2('CSS2.1')}}初回定義。
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-top-style/index.md b/files/ja/web/css/border-top-style/index.md new file mode 100644 index 0000000000..c09d194a88 --- /dev/null +++ b/files/ja/web/css/border-top-style/index.md @@ -0,0 +1,137 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-style + - border-top +translation_of: Web/CSS/border-top-style +--- +
{{CSSRef}}
+ +

border-top-style は CSS のプロパティで、要素の上側の境界 ({{CSSxRef("border")}}) における線の形状を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-top-style.html")}}
+ + + +
+

メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

+
+ +

構文

+ +
/* キーワード値 */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* グローバル値 */
+border-top-style: inherit;
+border-top-style: initial;
+border-top-style: unset;
+
+ +

border-top-style プロパティは、 {{CSSxRef("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。

+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-top-style の例のクラス */
+.b1 {border-top-style: none;}
+.b2 {border-top-style: hidden;}
+.b3 {border-top-style: dotted;}
+.b4 {border-top-style: dashed;}
+.b5 {border-top-style: solid;}
+.b6 {border-top-style: double;}
+.b7 {border-top-style: groove;}
+.b8 {border-top-style: ridge;}
+.b9 {border-top-style: inset;}
+.b10 {border-top-style: outset;}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 300, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}{{Spec2('CSS3 Backgrounds')}}重要な変更はなし。
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}{{Spec2('CSS2.1')}}初回定義。
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-top-width/index.html b/files/ja/web/css/border-top-width/index.html deleted file mode 100644 index 17c8a7b095..0000000000 --- a/files/ja/web/css/border-top-width/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: border-top-width -slug: Web/CSS/border-top-width -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-top - - border-width -translation_of: Web/CSS/border-top-width ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
- - - -

構文

- -
/* キーワード値 */
-border-top-width: thin;
-border-top-width: medium;
-border-top-width: thick;
-
-/* <length> 値 */
-border-top-width: 10em;
-border-top-width: 3vmax;
-border-top-width: 6px;
-
-/* グローバルキーワード */
-border-top-width: inherit;
-border-top-width: initial;
-border-top-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div>Element 1</div>
-<div>Element 2</div>
- -

CSS

- -
div {
-  border: 1px solid red;
-  margin: 1em 0;
-}
-
-div:nth-child(1) {
-  border-top-width: thick;
-}
-div:nth-child(2) {
-  border-top-width: 2em;
-}
- -

結果

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-top-width/index.md b/files/ja/web/css/border-top-width/index.md new file mode 100644 index 0000000000..17c8a7b095 --- /dev/null +++ b/files/ja/web/css/border-top-width/index.md @@ -0,0 +1,146 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border + - border-top + - border-width +translation_of: Web/CSS/border-top-width +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* <length> 値 */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* グローバルキーワード */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+
+ +

値

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

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

+
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-top-width: thick;
+}
+div:nth-child(2) {
+  border-top-width: 2em;
+}
+ +

結果

+ +

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

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-top/index.html b/files/ja/web/css/border-top/index.html deleted file mode 100644 index 2b5ce0aaa7..0000000000 --- a/files/ja/web/css/border-top/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: border-top -slug: Web/CSS/border-top -tags: - - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/border-top ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-top.html")}}
- - - -

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

- -
border-top-style: dotted;
-border-top: thick green;
-
- -

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

- -
border-top-style: dotted;
-border-top: none thick green;
-
- -

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

- -

構成要素のプロパティ

- -

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

- - - -

構文

- -
border-top: 1px;
-border-top: 2px dotted;
-border-top: medium dashed green;
-
- -

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

- -

値

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

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

上側の境界の適用

- -

HTML

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

CSS

- -
div {
-  border-top: 4px dashed blue;
-  background-color: gold;
-  height: 100px;
-  width: 100px;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/border-top/index.md b/files/ja/web/css/border-top/index.md new file mode 100644 index 0000000000..2b5ce0aaa7 --- /dev/null +++ b/files/ja/web/css/border-top/index.md @@ -0,0 +1,137 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-top +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-top.html")}}
+ + + +

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

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

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

+ +
border-top-style: dotted;
+border-top: none thick green;
+
+ +

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

+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +
border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+
+ +

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

+ +

値

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

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

上側の境界の適用

+ +

HTML

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

CSS

+ +
div {
+  border-top: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/border/index.html b/files/ja/web/css/border/index.html deleted file mode 100644 index f6ad647ad0..0000000000 --- a/files/ja/web/css/border/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: border -slug: Web/CSS/border -tags: - - CSS - - CSS Borders - - CSS Shorthand property - - Layout - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/border ---- -
{{CSSRef("CSS Borders")}}
- -

border は CSS の 一括指定プロパティで、要素の境界を設定します。これは {{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}} の値を設定します。

- -

例

- -
{{EmbedInteractiveExample("pages/css/border.html")}}
- - - -

構成要素のプロパティ

- -

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

- - - -

構文

- -
/* 種類 */
-border: solid;
-
-/* 幅 | 種類 */
-border: 2px dotted;
-
-/* 種類 | 色 */
-border: outset #f33;
-
-/* 幅 | 種類 | 色 */
-border: medium dashed green;
-
-/* グローバル値 */
-border: inherit;
-border: initial;
-border: unset;
-
- -

border プロパティは、以下に挙げる値の1～3つを使用して指定します。値の順序は関係ありません。

- -
-

注: style が指定されていない場合は境界線は表示されません。 style の既定値が none だからです。

-
- -

値

- -
-
<line-width>
-
境界線の太さを設定します。指定されなかった場合は既定値の medium になります。 {{cssxref("border-width")}} を参照してください。
-
<line-style>
-
境界線の種類を設定します。指定されなかった場合は既定値の none になります。 {{cssxref("border-style")}} を参照してください。
-
{{cssxref("<color>")}}
-
境界線の色を設定します。指定されなかった場合は既定値で要素の {{cssxref("color")}} プロパティになります。 {{cssxref("border-color")}} を参照してください。
-
- -

解説

- -

他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 border は {{cssxref("border-image")}} のカスタム値を指定することができず、初期値、つまり none に設定します。

- -

border による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の {{cssxref("border-width")}}、 {{cssxref("border-style")}}、 {{cssxref("border-color")}} プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 ({{cssxref("border-top")}} など) や論理的 ({{cssxref("border-block-start")}} など) な境界線プロパティを使用することもできます。

- -

境界線と輪郭線

- -

境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

ピンク色の出っ張った境界の設定

- -

HTML

- -
<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
-
- -

CSS

- -
div {
-  border: 0.5rem outset pink;
-  outline: 0.5rem solid khaki;
-  box-shadow: 0 0 0 2rem skyblue;
-  border-radius: 12px;
-  font: bold 1rem sans-serif;
-  margin: 2rem;
-  padding: 1rem;
-  outline-offset: 0.5rem;
-}
- -

結果

- -

{{EmbedLiveSample('Setting_a_pink_outset_border')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}transparent の特別扱いを廃止し、有効な {{cssxref("<color>")}} とした。実質的な影響はない。
- 一括指定を使用してカスタム値を設定することはできないため、 border は {{cssxref("border-image")}} を初期値 (none) にリセットするようになった。
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}inherit キーワードを受け付けるようになった。また、transparent を有効な色として受けつけるようになった。
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/border/index.md b/files/ja/web/css/border/index.md new file mode 100644 index 0000000000..f6ad647ad0 --- /dev/null +++ b/files/ja/web/css/border/index.md @@ -0,0 +1,151 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Borders + - CSS Shorthand property + - Layout + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

border は CSS の 一括指定プロパティで、要素の境界を設定します。これは {{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}} の値を設定します。

+ +

例

+ +
{{EmbedInteractiveExample("pages/css/border.html")}}
+ + + +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +
/* 種類 */
+border: solid;
+
+/* 幅 | 種類 */
+border: 2px dotted;
+
+/* 種類 | 色 */
+border: outset #f33;
+
+/* 幅 | 種類 | 色 */
+border: medium dashed green;
+
+/* グローバル値 */
+border: inherit;
+border: initial;
+border: unset;
+
+ +

border プロパティは、以下に挙げる値の1～3つを使用して指定します。値の順序は関係ありません。

+ +
+

注: style が指定されていない場合は境界線は表示されません。 style の既定値が none だからです。

+
+ +

値

+ +
+
<line-width>
+
境界線の太さを設定します。指定されなかった場合は既定値の medium になります。 {{cssxref("border-width")}} を参照してください。
+
<line-style>
+
境界線の種類を設定します。指定されなかった場合は既定値の none になります。 {{cssxref("border-style")}} を参照してください。
+
{{cssxref("<color>")}}
+
境界線の色を設定します。指定されなかった場合は既定値で要素の {{cssxref("color")}} プロパティになります。 {{cssxref("border-color")}} を参照してください。
+
+ +

解説

+ +

他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 border は {{cssxref("border-image")}} のカスタム値を指定することができず、初期値、つまり none に設定します。

+ +

border による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の {{cssxref("border-width")}}、 {{cssxref("border-style")}}、 {{cssxref("border-color")}} プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 ({{cssxref("border-top")}} など) や論理的 ({{cssxref("border-block-start")}} など) な境界線プロパティを使用することもできます。

+ +

境界線と輪郭線

+ +

境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

ピンク色の出っ張った境界の設定

+ +

HTML

+ +
<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
+
+ +

CSS

+ +
div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}
+ +

結果

+ +

{{EmbedLiveSample('Setting_a_pink_outset_border')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}transparent の特別扱いを廃止し、有効な {{cssxref("<color>")}} とした。実質的な影響はない。
+ 一括指定を使用してカスタム値を設定することはできないため、 border は {{cssxref("border-image")}} を初期値 (none) にリセットするようになった。
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}inherit キーワードを受け付けるようになった。また、transparent を有効な色として受けつけるようになった。
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

-- cgit v1.2.3-54-g00ecf