From 33fdcea3f3c7a085d4962e06e3270f91a974670c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 15 Nov 2021 01:17:27 +0900 Subject: CSS Borders 関係のプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/13 時点の英語版に同期 --- files/ja/web/css/border-bottom-color/index.md | 121 +++---- .../border-bottom-left-radius.png | Bin 0 -> 6423 bytes .../ja/web/css/border-bottom-left-radius/index.md | 260 +++++++-------- .../border-bottom-right-radius.png | Bin 0 -> 7441 bytes .../ja/web/css/border-bottom-right-radius/index.md | 258 +++++++-------- files/ja/web/css/border-bottom-style/index.md | 137 ++++---- files/ja/web/css/border-bottom-width/index.md | 167 ++++------ files/ja/web/css/border-bottom/index.md | 164 +++++----- files/ja/web/css/border-collapse/index.md | 4 +- files/ja/web/css/border-color/index.md | 228 ++++++------- files/ja/web/css/border-left-color/index.md | 123 +++---- files/ja/web/css/border-left-style/index.md | 137 ++++---- files/ja/web/css/border-left-width/index.md | 167 ++++------ files/ja/web/css/border-left/index.md | 168 +++++----- files/ja/web/css/border-radius/index.md | 324 +++++++++++-------- files/ja/web/css/border-right-color/index.md | 123 +++---- files/ja/web/css/border-right-style/index.md | 137 ++++---- files/ja/web/css/border-right-width/index.md | 167 ++++------ files/ja/web/css/border-right/index.md | 164 +++++----- files/ja/web/css/border-style/index.md | 352 +++++++++------------ files/ja/web/css/border-top-color/index.md | 123 +++---- .../css/border-top-left-radius/border-radius.png | Bin 0 -> 7106 bytes files/ja/web/css/border-top-left-radius/index.md | 241 +++++++------- files/ja/web/css/border-top-right-radius/index.md | 2 +- files/ja/web/css/border-top-style/index.md | 139 ++++---- files/ja/web/css/border-top-width/index.md | 165 ++++------ files/ja/web/css/border-top/index.md | 164 +++++----- files/ja/web/css/border-width/index.md | 4 +- files/ja/web/css/border/index.md | 161 ++++------ 29 files changed, 1857 insertions(+), 2343 deletions(-) create mode 100644 files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png create mode 100644 files/ja/web/css/border-bottom-right-radius/border-bottom-right-radius.png create mode 100644 files/ja/web/css/border-top-left-radius/border-radius.png (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/border-bottom-color/index.md b/files/ja/web/css/border-bottom-color/index.md index 7bac45b944..a6c9febaab 100644 --- a/files/ja/web/css/border-bottom-color/index.md +++ b/files/ja/web/css/border-bottom-color/index.md @@ -3,23 +3,23 @@ title: border-bottom-color slug: Web/CSS/border-bottom-color tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-color translation_of: Web/CSS/border-bottom-color --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-bottom-color`** は CSS のプロパティで、要素の下側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-bottom")}} でも設定することができます。 -
{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
+{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}} - +## 構文 -

構文

- -
/* <color> 値 */
+```css
+/*  値 */
 border-bottom-color: red;
 border-bottom-color: #ffbb00;
 border-bottom-color: rgb(255, 0, 0);
@@ -30,41 +30,43 @@ border-bottom-color: transparent;
 /* グローバル値 */
 border-bottom-color: inherit;
 border-bottom-color: initial;
+border-bottom-color: revert;
 border-bottom-color: unset;
-
+``` -

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

境界線が付いた単純な div

+

境界線が付いた単純な div

HTML

-
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
+```html
+

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

+ +``` -

CSS

+#### CSS -
.mybox {
+```css
+.mybox {
     border: solid 0.3em gold;
     border-bottom-color: red;
     width: auto;
@@ -72,44 +74,23 @@ border-bottom-color: unset;
 
 .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")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}. + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-left-color")}} + - 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}} diff --git a/files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png b/files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png new file mode 100644 index 0000000000..2a417b6669 Binary files /dev/null and b/files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png differ diff --git a/files/ja/web/css/border-bottom-left-radius/index.md b/files/ja/web/css/border-bottom-left-radius/index.md index 14cb9816bb..856570505f 100644 --- a/files/ja/web/css/border-bottom-left-radius/index.md +++ b/files/ja/web/css/border-bottom-left-radius/index.md @@ -3,32 +3,32 @@ title: border-bottom-left-radius slug: Web/CSS/border-bottom-left-radius tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-left-radius translation_of: Web/CSS/border-bottom-left-radius --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-bottom-left-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。 -
{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}
+{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}} - +丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。 -

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

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

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

+> **Note:** このプロパティの値が `border-bottom-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 -
注: このプロパティの値が border-bottom-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+## 構文 -

構文

- -
/* 角を円にする */
-/* border-bottom-left-radius: radius */
+```css
+/* 角を円にする */
+/* border-bottom-left-radius: 半径 */
 border-bottom-left-radius: 3px;
 
 /* パーセント値 */
@@ -36,158 +36,136 @@ border-bottom-left-radius: 3px;
 /* ボックスが正方形ならば円、長方形ならば楕円 */
 border-bottom-left-radius: 20%;
 
-/* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
+/* 上と同じ。水平方向 (width) および垂直方向 (height) の 20% */
 border-bottom-left-radius: 20% 20%;
 
-/* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
+/* 水平方向 (width) の 20% および垂直方向 (height) の 10% */
 border-bottom-left-radius: 20% 10%;
 
 /* 角を楕円にする */
-/* border-bottom-left-radius: horizontal vertical */
+/* border-bottom-left-radius: 水平 垂直 */
 border-bottom-left-radius: 0.5em 1em;
 
-border-bottom-left-radius: inherit;
+/* グローバル値 */ +border-bottom-left-radius: inherit; +border-bottom-left-radius: initial; +border-bottom-left-radius: revert; +border-bottom-left-radius: unset; +``` -

値１つで指定する場合:

+値 1 つで指定する場合: - + - 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。 -

値２つで指定する場合:

+値 2 つで指定する場合: - + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。 + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。 -

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ライブ例コード
-
- -
- 		境界として使用されている円弧 - 
+## 例
+
+
円弧

+
+単一の `` 値は円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
-  border-bottom-left-radius: 40px 40px;
+  border-bottom-left-radius: 40px;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
- -
- 		境界として使用されている楕円の弧 - 
+```
+
+{{EmbedLiveSample("Arc_of_a_circle")}}
+
+
楕円弧

+
+2 つの異なる `` の値は楕円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-bottom-left-radius: 40px 20px;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
- -
- 		ボックスは正方形。境界として使用されている円弧 - 
+```
+
+{{EmbedLiveSample("Arc_of_an_ellipse")}}
+
+
正方形の要素にパーセント値の半径

+
+正方形の要素に単一の `` 値を指定すると、円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-bottom-left-radius: 40%;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
- -
- 		ボックスは正方形ではない。境界として使用されている楕円の弧 - 
+```
+
+{{EmbedLiveSample("Square_element_with_percentage_radius")}}
+
+
長方形の要素にパーセント値の半径

+
+正方形ではない要素に単一の `` 値を指定すると、楕円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-bottom-left-radius: 40%;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 200px;
+  height: 100px;
 }
-
-
-
- -
- 		背景色は境界で切り取られる - 
-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")}}

- -

関連情報

- - +``` + +{{EmbedLiveSample("Non-square_element_with_percentage_radius")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 一括指定の {{cssxref("border-radius")}} プロパティ +- {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-top-left-radius")}} diff --git a/files/ja/web/css/border-bottom-right-radius/border-bottom-right-radius.png b/files/ja/web/css/border-bottom-right-radius/border-bottom-right-radius.png new file mode 100644 index 0000000000..0e8243b876 Binary files /dev/null and b/files/ja/web/css/border-bottom-right-radius/border-bottom-right-radius.png differ diff --git a/files/ja/web/css/border-bottom-right-radius/index.md b/files/ja/web/css/border-bottom-right-radius/index.md index 1d683d390a..14708714a3 100644 --- a/files/ja/web/css/border-bottom-right-radius/index.md +++ b/files/ja/web/css/border-bottom-right-radius/index.md @@ -3,185 +3,163 @@ title: border-bottom-right-radius slug: Web/CSS/border-bottom-right-radius tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-right-radius translation_of: Web/CSS/border-bottom-right-radius --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-bottom-right-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。 -
{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}
+{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}} - +丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。 -

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

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

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

+> **Note:** このプロパティの値が `border-bottom-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 -
注: このプロパティの値が border-bottom-right-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+## 構文 -

構文

- -
/* 角を円にする */
-/* border-bottom-right-radius: radius */
+```css
+/* 角を円にする */
+/* border-bottom-right-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: 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;
+/* グローバル値 */ +border-bottom-right-radius: inherit; +border-bottom-right-radius: initial; +border-bottom-right-radius: revert; +border-bottom-right-radius: unset; +``` -

値１つで指定する場合:

+値 1 つで指定する場合: - + - 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。 -

値２つで指定する場合:

+値 2 つで指定する場合: - + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。 + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。 -

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ライブ例コード
-
- -
- 		境界として使用されている円弧 - 
+## 例
+
+
円弧

+
+単一の `` 値は円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
-  border-bottom-right-radius: 40px 40px;
+  border-bottom-right-radius: 40px;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
- -
- 		境界として使用されている楕円の弧 - 
+```
+
+{{EmbedLiveSample("Arc_of_a_circle")}}
+
+
楕円弧

+
+2 つの異なる `` の値は楕円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-bottom-right-radius: 40px 20px;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
- -
- 		ボックスは正方形。境界として使用されている円弧 - 
+```
+
+{{EmbedLiveSample("Arc_of_an_ellipse")}}
+
+
正方形の要素にパーセント値の半径

+
+正方形の要素に単一の `` 値を指定すると、円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-bottom-right-radius: 40%;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
- -
- 		ボックスは正方形ではない。境界として使用されている楕円の弧 - 
+```
+
+{{EmbedLiveSample("Square_element_with_percentage_radius")}}
+
+
長方形の要素にパーセント値の半径

+
+正方形ではない要素に単一の `` 値を指定すると、楕円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-bottom-right-radius: 40%;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 200px;
+  height: 100px;
 }
-
-
-
- -
- 		背景色は境界で切り取られる - 
-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")}}

- -

関連情報

- -
    -
  • 一括指定の {{cssxref("border-radius")}} プロパティ
    • -
  • {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-top-left-radius")}}
    • -
+``` + +{{EmbedLiveSample("Non-square_element_with_percentage_radius")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 一括指定の {{cssxref("border-radius")}} プロパティ +- {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-top-left-radius")}} diff --git a/files/ja/web/css/border-bottom-style/index.md b/files/ja/web/css/border-bottom-style/index.md index 35392f014a..43b97e73a4 100644 --- a/files/ja/web/css/border-bottom-style/index.md +++ b/files/ja/web/css/border-bottom-style/index.md @@ -3,27 +3,25 @@ title: border-bottom-style slug: Web/CSS/border-bottom-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - border - - border-bottom - - border-style - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-style translation_of: Web/CSS/border-bottom-style --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-bottom-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の下側の境界 ({{cssxref("border")}}) における線の形状を設定します。 -
{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}} - +> **Note:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。 -
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-bottom-style: none;
 border-bottom-style: hidden;
 border-bottom-style: dotted;
@@ -38,43 +36,51 @@ border-bottom-style: outset;
 /* グローバル値 */
 border-bottom-style: inherit;
 border-bottom-style: initial;
+border-bottom-style: revert;
 border-bottom-style: unset;
-
+``` + +`border-bottom-style` プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 + +## 公式定義 -

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

+{{CSSInfo}} -

形式文法

+## 形式文法 {{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

- -
/* 表の外見を定義 */
+## 例
+
+
すべての境界の形状のデモ

+
+#### HTML
+
+```html
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+  
+
nonehiddendotteddashed
soliddoublegrooveridge
insetoutset

+```
+
+#### CSS
+
+```css
+/* 表の外見を定義 */
 table {
   border-width: 3px;
   background-color: #52E385;
@@ -93,45 +99,22 @@ tr, td {
 .b7 {border-bottom-style: groove;}
 .b8 {border-bottom-style: ridge;}
 .b9 {border-bottom-style: inset;}
-.b10 {border-bottom-style: outset;}
+.b10 {border-bottom-style: outset;} +``` -

結果

+#### 結果 -

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

+{{ EmbedLiveSample('Demonstrating_all_border_styles', 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}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • その他の形状に関する境界のプロパティ: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}
    • -
  • その他の下側の境界に関するプロパティ: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-width") }}
    • -
+ - その他の形状に関する境界のプロパティ: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }} + - その他の下境界に関するプロパティ: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("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 index 1af992f964..d5b74e821f 100644 --- a/files/ja/web/css/border-bottom-width/index.md +++ b/files/ja/web/css/border-bottom-width/index.md @@ -3,30 +3,28 @@ title: border-bottom-width slug: Web/CSS/border-bottom-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-bottom - - border-width + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-width translation_of: Web/CSS/border-bottom-width --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 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;
@@ -34,60 +32,45 @@ border-bottom-width: 6px;
 /* グローバルキーワード */
 border-bottom-width: inherit;
 border-bottom-width: initial;
+border-bottom-width: revert;
 border-bottom-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

+``` + +### 値 + +- `` + + - : 明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + - `thin` + - `medium` + - `thick` + +> **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

下境界の太さの比較

-

HTML

+#### HTML -
<div>Element 1</div>
-<div>Element 2</div>
+```html +
Element 1
+
Element 2
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   border: 1px solid red;
   margin: 1em 0;
 }
@@ -97,50 +80,22 @@ div:nth-child(1) {
 }
 div:nth-child(2) {
   border-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")}}

- -

関連情報

- -
    -
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}
    • -
  • 他の border-bottom 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, {{Cssxref("border-bottom-color")}}
    • -
+} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_bottom_border_widths', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 他の境界の太さに関する CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}} + - 他の下境界に関する CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, {{Cssxref("border-bottom-color")}} diff --git a/files/ja/web/css/border-bottom/index.md b/files/ja/web/css/border-bottom/index.md index 5e1710479f..9f33242826 100644 --- a/files/ja/web/css/border-bottom/index.md +++ b/files/ja/web/css/border-bottom/index.md @@ -3,85 +3,92 @@ title: border-bottom slug: Web/CSS/border-bottom tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-bottom translation_of: Web/CSS/border-bottom --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

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

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

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

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

構成要素のプロパティ

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

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

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

構文

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

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

下の境界の適用

+

下の境界の適用

-

HTML

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

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

CSS

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

結果

- -

{{EmbedLiveSample('Applying_a_bottom_border')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-block")}}
    • -
  • {{cssxref("outline")}}
    • -
+``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_bottom_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} diff --git a/files/ja/web/css/border-collapse/index.md b/files/ja/web/css/border-collapse/index.md index 588bd841b0..c62446491c 100644 --- a/files/ja/web/css/border-collapse/index.md +++ b/files/ja/web/css/border-collapse/index.md @@ -60,7 +60,7 @@ border-collapse: unset; ```html -  +        @@ -71,7 +71,7 @@ border-collapse: unset;  
border-collapse: separate`border-collapse: separate`
Browser Layout Engine
Firefox Gecko
-  +        diff --git a/files/ja/web/css/border-color/index.md b/files/ja/web/css/border-color/index.md index 1b2af584f3..28ab37d58e 100644 --- a/files/ja/web/css/border-color/index.md +++ b/files/ja/web/css/border-color/index.md @@ -3,33 +3,42 @@ title: border-color slug: Web/CSS/border-color tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 境界線 - - CSS 背景と境界 + - CSS スタイル - HTML 色 - - Reference + - リファレンス - Styling HTML - - border - border-color - - 一括指定プロパティ + - 境界 - 色 + - recipe:css-shorthand-property +browser-compat: css.properties.border-color translation_of: Web/CSS/border-color --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-color`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)を行う [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の色を設定します。 -
{{EmbedInteractiveExample("pages/css/border-color.html")}}
+{{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")}} を使用します。 -

各辺を個々に設定する場合は、 {{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")}} にあります。 -

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

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

構文

+このプロパティは以下の CSS プロパティの一括指定です。 -
/* <color> 値 */
+- [`border-bottom-color`](/ja/docs/Web/CSS/border-bottom-color)
+- [`border-left-color`](/ja/docs/Web/CSS/border-left-color)
+- [`border-right-color`](/ja/docs/Web/CSS/border-right-color)
+- [`border-top-color`](/ja/docs/Web/CSS/border-top-color)
+
+## 構文
+
+```css
+/*  値 */
 border-color: red;
 
 /* 水平線 | 垂直線 */
@@ -44,72 +53,75 @@ border-color: red yellow green blue;
 /* グローバル値 */
 border-color: inherit;
 border-color: initial;
+border-color: revert;
 border-color: unset;
-
+``` + +`border-color` プロパティは 1 ～ 4 つの値を使って指定することができます。 -

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

+ - 値が **1 つ**指定された場合、**全 4 辺**に同じ色が適用される。 + - 値が **2 つ**指定された場合、1 つ目の色は**上下**、2 つ目は**左右**の辺に適用される。 + - 値が **3 つ**指定された場合、1 つ目の色**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 + - 値が **4 つ**指定された場合、それぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。 -
    -
  • 値が1つ指定された場合、全4辺に同じ色が適用される。
    • -
  • 値が2つ指定された場合、1つ目の色は上下、2つ目は左右の辺に適用される。
    • -
  • 値が3つ指定された場合、1つ目の色上、2つ目は左右、3つ目は下の辺に適用される。
    • -
  • 値が4つ指定された場合、それぞれ上、右、下、左の順（時計回り）に適用される。
    • -
+### 値 -

値

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

形式文法

+{{CSSInfo}} + +## 形式文法 {{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 の使用法

+
+#### HTML
+
+```html
+

+  
border-color: red; is equivalent to

+  
  • border-top-color: red;
    • 
+    
  • border-right-color: red;
    • 
+    
  • border-bottom-color: red;
    • 
+    
  • border-left-color: red;
    • 
+  

+

+

+  
border-color: gold red; is equivalent to

+  
  • border-top-color: gold;
    • 
+    
  • border-right-color: red;
    • 
+    
  • border-bottom-color: gold;
    • 
+    
  • border-left-color: red;
    • 
+  

+

+

+  
border-color: red cyan gold; is equivalent to

+  
  • border-top-color: red;
    • 
+    
  • border-right-color: cyan;
    • 
+    
  • border-bottom-color: gold;
    • 
+    
  • border-left-color: cyan;
    • 
+  

+

+

+  
border-color: red cyan black gold; is equivalent to

+  
  • border-top-color: red;
    • 
+    
  • border-right-color: cyan;
    • 
+    
  • border-bottom-color: black;
    • 
+    
  • border-left-color: gold;
    • 
+  

+

+```
+
+#### CSS
+
+```css
+#justone {
   border-color: red;
 }
 
@@ -137,58 +149,24 @@ ul {
   margin: 0;
   list-style: none;
 }
-
- -

結果

- -

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

- -

仕様書

- -
border-collapse: collapse`border-collapse: collapse`
Browser Layout Engine
Firefox Gecko
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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")}}

- -

関連情報

- -
    -
  • 境界線の色関係の CSS プロパティ: {{CSSxRef("border")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}},
    • -
  • その他の境界線に関する CSS プロパティ: {{CSSxRef("border-width")}}, {{CSSxRef("border-style")}}
    • -
  • {{CSSxRef("<color>")}} データ型
    • -
  • その他の色に関するプロパティ: {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}
    • -
  • CSS を使用した HTML の要素への色の適用
    • -
+``` + +#### 結果 + +{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界線の色関係の CSS プロパティ: {{CSSxRef("border")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}}, + - その他の境界線に関する CSS プロパティ: {{CSSxRef("border-width")}}, {{CSSxRef("border-style")}} + - {{CSSxRef("<color>")}} データ型 + - その他の色に関するプロパティ: {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}} + - [CSS を使用した HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/border-left-color/index.md b/files/ja/web/css/border-left-color/index.md index 68051c2bf5..ec95b905c2 100644 --- a/files/ja/web/css/border-left-color/index.md +++ b/files/ja/web/css/border-left-color/index.md @@ -3,25 +3,23 @@ title: border-left-color slug: Web/CSS/border-left-color tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-color - - border-left + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-left-color translation_of: Web/CSS/border-left-color --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-left-color`** は CSS のプロパティで、要素の左側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-left")}} でも設定することができます。 -
{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
+{{EmbedInteractiveExample("pages/css/border-left-color.html")}} - +## 構文 -

構文

- -
/* <color> 値 */
+```css
+/*  値 */
 border-left-color: red;
 border-left-color: #ffbb00;
 border-left-color: rgb(255, 0, 0);
@@ -32,41 +30,43 @@ border-left-color: transparent;
 /* グローバル値 */
 border-left-color: inherit;
 border-left-color: initial;
+border-left-color: revert;
 border-left-color: unset;
-
+``` -

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

境界線が付いた単純な div

+

境界線が付いた単純な div

-

HTML

+#### HTML -
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
+```html
+

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

+ +``` -

CSS

+#### CSS -
.mybox {
+```css
+.mybox {
     border: solid 0.3em gold;
     border-left-color: red;
     width: auto;
@@ -74,44 +74,23 @@ border-left-color: unset;
 
 .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")}}

- -

関連情報

- -
    -
  • 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}.
    • -
  • 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}
    • -
  • 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}}
    • -
+} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}. + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}} + - 同じ境界に適用される他の境界関連の CSS プロパティ: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}} diff --git a/files/ja/web/css/border-left-style/index.md b/files/ja/web/css/border-left-style/index.md index 7a1bbb25fb..4b65b0c917 100644 --- a/files/ja/web/css/border-left-style/index.md +++ b/files/ja/web/css/border-left-style/index.md @@ -3,27 +3,25 @@ title: border-left-style slug: Web/CSS/border-left-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-left - - border-style + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-left-style translation_of: Web/CSS/border-left-style --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-left-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の {{cssxref("border")}} における線の形状を設定します。 -
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-left-style.html")}} - +> **Note:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。 -
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-left-style: none;
 border-left-style: hidden;
 border-left-style: dotted;
@@ -38,41 +36,51 @@ border-left-style: outset;
 /* グローバル値 */
 border-left-style: inherit;
 border-left-style: initial;
+border-left-style: revert;
 border-left-style: unset;
-
+``` + +`border-left-style` プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 -

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

+## 公式定義 -

形式文法

+{{CSSInfo}} + +## 形式文法 {{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

- -
/* 表の外見を定義 */
+
例

+
+### border-left-style の設定
+
+#### HTML
+
+```html
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+  
+
nonehiddendotteddashed
soliddoublegrooveridge
insetoutset

+```
+
+#### CSS
+
+```css
+/* 表の外見を定義 */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -91,45 +99,22 @@ tr, td {
 .b7 {border-left-style: groove;}
 .b8 {border-left-style: ridge;}
 .b9 {border-left-style: inset;}
-.b10 {border-left-style: outset;}
+.b10 {border-left-style: outset;} +``` -

結果

+#### 結果 -

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

+{{ 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}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • その他の形状に関する境界のプロパティ: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-style")}}
    • -
  • その他の左側の境界に関するプロパティ: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, {{Cssxref("border-left-width")}}
    • -
+ - その他の形状に関する境界のプロパティ: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-style")}} + - その他の左側の境界に関するプロパティ: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, {{Cssxref("border-left-width")}} diff --git a/files/ja/web/css/border-left-width/index.md b/files/ja/web/css/border-left-width/index.md index eac253e0e1..c2b4385fc0 100644 --- a/files/ja/web/css/border-left-width/index.md +++ b/files/ja/web/css/border-left-width/index.md @@ -3,30 +3,28 @@ title: border-left-width slug: Web/CSS/border-left-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-left - - border-width + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-left-width translation_of: Web/CSS/border-left-width --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

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

値

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

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

-
-
-
- -

形式文法

+``` + +### 値 + +- `` + + - : 明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + - `thin` + - `medium` + - `thick` + +> **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

境界線の太さの比較

-

HTML

+#### HTML -
<div>Element 1</div>
-<div>Element 2</div>
+```html +
Element 1
+
Element 2
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   border: 1px solid red;
   margin: 1em 0;
 }
@@ -97,50 +80,22 @@ div:nth-child(1) {
 }
 div:nth-child(2) {
   border-left-width: 2em;
-}
- -

結果

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}
    • -
  • 他の border-left 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-left-color")}}
    • -
+} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_border_widths', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 他の境界の太さに関する CSS プロパティ: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}} + - 他の左の境界に関する CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-left-color")}} diff --git a/files/ja/web/css/border-left/index.md b/files/ja/web/css/border-left/index.md index 0eb1f1b539..7fe2920fc8 100644 --- a/files/ja/web/css/border-left/index.md +++ b/files/ja/web/css/border-left/index.md @@ -3,85 +3,92 @@ title: border-left slug: Web/CSS/border-left tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-left translation_of: Web/CSS/border-left --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

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

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

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

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

構成要素のプロパティ

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

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

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

構文

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

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

左の境界の適用

+

左の境界の適用

-

HTML

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

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

CSS

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

結果

- -

{{EmbedLiveSample('Applying_a_left_border')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-block")}}
    • -
  • {{cssxref("outline")}}
    • -
+``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_left_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/ja/web/css/border-radius/index.md b/files/ja/web/css/border-radius/index.md index cb351478fe..d5cfcf9458 100644 --- a/files/ja/web/css/border-radius/index.md +++ b/files/ja/web/css/border-radius/index.md @@ -3,213 +3,275 @@ title: border-radius slug: Web/CSS/border-radius tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border-radius + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-radius translation_of: Web/CSS/border-radius --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。 -
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+{{EmbedInteractiveExample("pages/css/border-radius.html")}} - +半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。切り取りが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。 -

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

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

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

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

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

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

構文

+- [`border-top-left-radius`](/ja/docs/Web/CSS/border-top-left-radius) +- [`border-top-right-radius`](/ja/docs/Web/CSS/border-top-right-radius) +- [`border-bottom-right-radius`](/ja/docs/Web/CSS/border-bottom-right-radius) +- [`border-bottom-left-radius`](/ja/docs/Web/CSS/border-bottom-left-radius) -
/* 最初の半径の構文は1つから4つの値が許可されています */
-/* 半径を全4角に設定 */
+## 構文
+
+```css
+/* 最初の半径の構文は 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 */
+/* 2 番目の半径の構文は 1 つから 4 つの値が許可されています */
+/* (最初の半径の値) / 半径 */
 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: revert;
 border-radius: unset;
-
+``` -

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

+`border-radius` プロパティは次のように指定することができます。 -
    -
  • 1つ、2つ、3つ、4つの {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} の値。これは角の半径を1つ設定するために使用します。
    • -
  • その後に任意で、 "/" と1つ、2つ、3つ、4つの <length> 又は <percentage> の値。これは追加の半径を設定し、楕円形の角にすることができます。
    • -
+ - 1 ～ 4 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値。これは角の半径を 1 つ設定するために使用します。 + - その後に任意で、 "/" と 1 ～ 4 つの `` または `` の値。これは追加の半径を設定し、楕円形の角にすることができます。 -

値

+### 値 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
半径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つの値の構文のみで使用されます。
半径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>")}}
-
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。
-
+- {{cssxref("<length>")}} + - : 円の半径の長さ、または楕円の半長軸または半短軸の長さを、 length 値を使用して記述します。負の数は無効です。 +- {{cssxref("<percentage>")}} + - : 円の半径の長さ、または楕円の半長軸または半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。 -

例:

+例: -
border-radius: 1em/5em;
+```css
+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;
+```css
+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}} +{{CSSInfo}} -

例

+## 形式文法 -
  border: solid 10px;
-  /* 境界が「D」のように描画される */
+{{csssyntax}}
+
+
例

+
+```html hidden
+  
+border: solid 10px;
+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;
+background: gold;
+  

+  
+border: none;
+border-radius: 50%;
+background: burlywood;
+  

+  
+border: dotted;
+border-width: 10px 4px;
+border-radius: 10px 40px;
+  

+  
+border: dashed;
+border-width: 2px 4px;
+border-radius: 40px;
+  

+```
+
+```css hidden
+pre {
+  margin: 20px;
+  padding: 20px;
+  width: 80%;
+  height: 80px;
+}
+
+pre#example-1 {
+  border: solid 10px;
   border-radius: 10px 40px 40px 10px;
-
+} -
  border: groove 1em red;
+pre#example-2 {
+  border: groove 1em red;
   border-radius: 2em;
-
+} -
  background: gold;
+pre#example-3 {
+  background: gold;
   border: ridge gold;
   border-radius: 13em/3em;
-
+} -
  border: none;
+pre#example-4 {
+  border: none;
   border-radius: 40px 10px;
-
+ background: gold; +} -
  border: none;
+pre#example-5 {
+  border: none;
   border-radius: 50%;
-
+ background: burlywood; +} -
  border: dotted;
+pre#example-6 {
+  border: dotted;
   border-width: 10px 4px;
   border-radius: 10px 40px;
-
+} -
  border: dashed;
+pre#example-7 {
+  border: dashed;
   border-width: 2px 4px;
   border-radius: 40px;
-
- -

ライブサンプル

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+} +``` + +{{EmbedLiveSample("Examples", "200", "1150")}} + +### ライブサンプル + + - 例 1 : [http://jsfiddle.net/Tripad/qnGKj/2/](http://jsfiddle.net/Tripad/qnGKj/2/) + - 例 2 : [http://jsfiddle.net/Tripad/qnGKj/3/](http://jsfiddle.net/Tripad/qnGKj/3/) + - 例 3 : [http://jsfiddle.net/Tripad/qnGKj/4/](http://jsfiddle.net/Tripad/qnGKj/4/) + - 例 4 : [http://jsfiddle.net/Tripad/qnGKj/5/](http://jsfiddle.net/Tripad/qnGKj/5/) + - 例 5 : [http://jsfiddle.net/Tripad/qnGKj/6/](http://jsfiddle.net/Tripad/qnGKj/6/) + +## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • border-radius 関連 CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}
    • -
+ - border-radius に関する CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, {{cssxref("border-end-end-radius")}} diff --git a/files/ja/web/css/border-right-color/index.md b/files/ja/web/css/border-right-color/index.md index 5f3cc19836..eb1b6b353a 100644 --- a/files/ja/web/css/border-right-color/index.md +++ b/files/ja/web/css/border-right-color/index.md @@ -3,23 +3,23 @@ title: border-right-color slug: Web/CSS/border-right-color tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-right-color translation_of: Web/CSS/border-right-color --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-right-color`** は CSS のプロパティで、要素の右側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-right")}} でも設定することができます。 -
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
+{{EmbedInteractiveExample("pages/css/border-right-color.html")}} - +## 構文 -

構文

- -
/* <color> 値 */
+```css
+/*  値 */
 border-right-color: red;
 border-right-color: #ffbb00;
 border-right-color: rgb(255, 0, 0);
@@ -30,41 +30,43 @@ border-right-color: transparent;
 /* グローバル値 */
 border-right-color: inherit;
 border-right-color: initial;
+border-right-color: revert;
 border-right-color: unset;
-
+``` -

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

境界線が付いた単純な div

+

境界線が付いた単純な div

-

HTML

+#### HTML -
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
+```html
+

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

+ +``` -

CSS

+#### CSS -
.mybox {
+```css
+.mybox {
     border: solid 0.3em gold;
     border-right-color: red;
     width: auto;
@@ -72,44 +74,23 @@ border-right-color: unset;
 
 .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")}}

- -

関連情報

- -
    -
  • 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}}.
    • -
  • 他の境界線の色に関する CSS プロパティ: {{cssxref("border-left-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}
    • -
  • 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}}
    • -
+} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}} + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-left-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}} + - 同じ境界に適用される他の境界関連の CSS プロパティ: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}} diff --git a/files/ja/web/css/border-right-style/index.md b/files/ja/web/css/border-right-style/index.md index 95b3cda12b..2141b7138b 100644 --- a/files/ja/web/css/border-right-style/index.md +++ b/files/ja/web/css/border-right-style/index.md @@ -3,27 +3,25 @@ title: border-right-style slug: Web/CSS/border-right-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-right - - border-style + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-right-style translation_of: Web/CSS/border-right-style --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-right-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の右側の境界線 ({{cssxref("border")}}) の形状を設定します。 -
{{EmbedInteractiveExample("pages/css/border-right-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-right-style.html")}} - +> **Note:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。 -
メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。
+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-right-style: none;
 border-right-style: hidden;
 border-right-style: dotted;
@@ -38,41 +36,51 @@ border-right-style: outset;
 /* グローバル値 */
 border-right-style: inherit;
 border-right-style: initial;
+border-right-style: revert;
 border-right-style: unset;
-
+``` + +`border-right-style` プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 + +## 公式定義 -

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

+{{CSSInfo}} -

形式文法

+## 形式文法 {{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

- -
/* 表の外見を定義 */
+## 例
+
+
境界の形状

+
+#### HTML
+
+```html
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+  
+
nonehiddendotteddashed
soliddoublegrooveridge
insetoutset

+```
+
+#### CSS
+
+```css
+/* 表の外見を定義 */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -91,45 +99,22 @@ tr, td {
 .b7 {border-right-style: groove;}
 .b8 {border-right-style: ridge;}
 .b9 {border-right-style: inset;}
-.b10 {border-right-style: outset;}
+.b10 {border-right-style: outset;} +``` -

結果

+#### 結果 -

{{ EmbedLiveSample('Examples') }}

+{{ EmbedLiveSample('Border_styles') }} -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • その他の形状に関する境界のプロパティ: {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}
    • -
  • その他の左側の境界に関するプロパティ: {{ Cssxref("border-right") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-width") }}
    • -
+ - その他の形状に関する境界のプロパティ: {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }} + - その他の右側の境界に関するプロパティ: {{ Cssxref("border-right") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("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 index 7c7de6ab0a..771898d985 100644 --- a/files/ja/web/css/border-right-width/index.md +++ b/files/ja/web/css/border-right-width/index.md @@ -4,29 +4,27 @@ slug: Web/CSS/border-right-width tags: - CSS - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-right - - border-width + - CSS 境界 + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-right-width translation_of: Web/CSS/border-right-width --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 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;
@@ -34,60 +32,45 @@ border-right-width: 6px;
 /* グローバル値 */
 border-right-width: inherit;
 border-right-width: initial;
+border-right-width: revert;
 border-right-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

+``` + +### 値 + +- `` + + - : 明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + - `thin` + - `medium` + - `thick` + + > **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

境界線の太さの比較

-

HTML

+#### HTML -
<div>Element 1</div>
-<div>Element 2</div>
+```html +
Element 1
+
Element 2
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   border: 1px solid red;
   margin: 1em 0;
 }
@@ -97,50 +80,22 @@ div:nth-child(1) {
 }
 div:nth-child(2) {
   border-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")}}

- -

関連情報

- -
    -
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}
    • -
  • 他の border-right 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-right-color")}}
    • -
+} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_border_widths', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- その他の太さに関する境界の CSS プロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}} +- 他の右側の境界に関する CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-right-color")}} diff --git a/files/ja/web/css/border-right/index.md b/files/ja/web/css/border-right/index.md index 05653b067a..625bbadca5 100644 --- a/files/ja/web/css/border-right/index.md +++ b/files/ja/web/css/border-right/index.md @@ -3,85 +3,92 @@ title: border-right slug: Web/CSS/border-right tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-right translation_of: Web/CSS/border-right --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

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

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

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

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

構成要素のプロパティ

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

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

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

構文

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

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

右の境界の適用

+

右側の境界の適用

-

HTML

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

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

CSS

+#### CSS -
div {
+```css
+div {
   border-right: 4px dashed blue;
   background-color: gold;
   height: 100px;
@@ -89,49 +96,22 @@ border-right: medium dashed green;
   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")}}

- -

関連情報

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-block")}}
    • -
  • {{cssxref("outline")}}
    • -
+``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_right_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} diff --git a/files/ja/web/css/border-style/index.md b/files/ja/web/css/border-style/index.md index 71c2fba756..de1dc86b8c 100644 --- a/files/ja/web/css/border-style/index.md +++ b/files/ja/web/css/border-style/index.md @@ -3,26 +3,32 @@ title: border-style slug: Web/CSS/border-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - Web - - border - - border-style - - 一括指定プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-style translation_of: Web/CSS/border-style --- -
{{CSSRef}}
+{{CSSRef}} -

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

+ **`border-style`** は [一括指定](/ja/docs/Web/CSS/Shorthand_properties) の [CSS](/ja/docs/Web/CSS) プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。 -
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-style.html")}} - +## 構成要素のプロパティ -

構文

+このプロパティは以下の CSS プロパティの一括指定です。 -
/* キーワード値 */
+- [`border-bottom-style`](/ja/docs/Web/CSS/border-bottom-style)
+- [`border-left-style`](/ja/docs/Web/CSS/border-left-style)
+- [`border-right-style`](/ja/docs/Web/CSS/border-right-style)
+- [`border-top-style`](/ja/docs/Web/CSS/border-top-style)
+
+## 構文
+
+```css
+/* キーワード値 */
 border-style: none;
 border-style: hidden;
 border-style: dotted;
@@ -46,199 +52,143 @@ border-style: none solid dotted dashed;
 /* グローバル値 */
 border-style: inherit;
 border-style: initial;
+border-style: revert;
 border-style: unset;
-
- -

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

- -
    -
  • 値が1つ指定された場合、全4辺に同じスタイルが適用される。
    • -
  • 値が2つ指定された場合、1つ目のスタイルは上下、2つ目は左右の辺に適用される。
    • -
  • 値が3つ指定された場合、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 のようにふるまいます。

-
-
-
- -

形式文法

+``` + +`border-style` プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。 + + - 値が **1 つ**指定された場合、**全 4 辺**に同じスタイルが適用される。 + - 値が **2 つ**指定された場合、1 つ目のスタイルは**上下**、2 つ目は**左右**の辺に適用される。 + - 値が **3 つ**指定された場合、1 つ目のスタイルは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 + - 値が **4 つ**指定された場合、スタイルはそれぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。 + +それぞれの値は以下の一覧にあるキーワードです。 + +### 値 + +- `` + + - : 境界のスタイルを記述します。以下の値を使用することができます。 + + - `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` のようにふるまいます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{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;
+## 例
+
+
プロパティのすべての値

+
+プロパティのすべての値のサンプルです。
+
+#### HTML
+
+```html
+
none

+
hidden

+
dotted

+
dashed

+
solid

+
double

+
groove

+
ridge

+
inset

+
outset

+```
+
+#### CSS
+
+```css
+pre {
+  height: 80px;
+  width: 120px;
+  margin: 20px;
+  padding: 20px;
+  display: inline-block;
+  background-color: palegreen;
+  border-width: 5px;
+  box-sizing: border-box;
 }
 
 /* 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")}}

- -

関連情報

- -
    -
  • 境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}
    • -
+.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('All_property_values', "1200", 450)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}} diff --git a/files/ja/web/css/border-top-color/index.md b/files/ja/web/css/border-top-color/index.md index c48e869704..301c5e65e4 100644 --- a/files/ja/web/css/border-top-color/index.md +++ b/files/ja/web/css/border-top-color/index.md @@ -3,23 +3,23 @@ title: border-top-color slug: Web/CSS/border-top-color tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-color translation_of: Web/CSS/border-top-color --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-top-color`** は CSS のプロパティで、要素の上側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-top")}} でも設定することができます。 -
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
+{{EmbedInteractiveExample("pages/css/border-top-color.html")}} - +## 構文 -

構文

- -
/* <color> 値 */
+```css
+/*  値 */
 border-top-color: red;
 border-top-color: #ffbb00;
 border-top-color: rgb(255, 0, 0);
@@ -30,41 +30,43 @@ border-top-color: transparent;
 /* グローバル値 */
 border-top-color: inherit;
 border-top-color: initial;
+border-top-color: revert;
 border-top-color: unset;
-
+``` -

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

境界線が付いた単純な div

+

境界線が付いた単純な div

-

HTML

+#### HTML -
<div class="mybox">
-  <p>これは周囲に境界線があるボックスです。
+```html
+

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

+ +``` -

CSS

+#### CSS -
.mybox {
+```css
+.mybox {
   border: solid 0.3em gold;
   border-top-color: red;
   width: auto;
@@ -72,44 +74,23 @@ border-top-color: unset;
 
 .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")}}

- -

関連情報

- -
    -
  • 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}.
    • -
  • 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}
    • -
  • 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}
    • -
+} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}. + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} + - 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}} diff --git a/files/ja/web/css/border-top-left-radius/border-radius.png b/files/ja/web/css/border-top-left-radius/border-radius.png new file mode 100644 index 0000000000..e1a87afd27 Binary files /dev/null and b/files/ja/web/css/border-top-left-radius/border-radius.png differ diff --git a/files/ja/web/css/border-top-left-radius/index.md b/files/ja/web/css/border-top-left-radius/index.md index 9db850becf..75abd9f95d 100644 --- a/files/ja/web/css/border-top-left-radius/index.md +++ b/files/ja/web/css/border-top-left-radius/index.md @@ -3,166 +3,159 @@ title: border-top-left-radius slug: Web/CSS/border-top-left-radius tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - border-radius - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-left-radius translation_of: Web/CSS/border-top-left-radius --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-top-left-radius`** は [CSS](/en-US/docs/Web/CSS) のプロパティは、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左上の角を丸くします。 -
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
+{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}} - +丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。 -

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

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

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

+> **Note:** このプロパティの値が `border-top-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 -
このプロパティの値が border-top-left-radius プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。
+## 構文 -

構文

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

値１つで指定する場合:

+/* グローバル値 */ +border-top-left-radius: inherit; +border-top-left-radius: initial; +border-top-left-radius: revert; +border-top-left-radius: unset; +``` + +値 1 つで指定する場合: + + - 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。 + +値 2 つで指定する場合: -
    -
  • 値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。
    • -
+ - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。 + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。 -

値２つで指定する場合:

+### 値 -
    -
  • 最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。
    • -
  • 最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
    • -
+- `` + - : 円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。 -

値

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

形式文法

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

例

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ライブ例コード
-
 
- 		境界として使用されている円弧 - 
+## 例
+
+
円弧

+
+単一の `` 値は円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
-  border-top-left-radius: 40px 40px;
+  border-top-left-radius: 40px;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
 
- 		境界として使用されている楕円の弧 - 
+```
+
+{{EmbedLiveSample("Arc_of_a_circle")}}
+
+
楕円弧

+
+2 つの異なる `` 値は楕円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-top-left-radius: 40px 20px;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
 
- 		ボックスは正方形。境界として使用されている円弧 - 
+```
+
+{{EmbedLiveSample("Arc_of_an_ellipse")}}
+
+
パーセント値で丸みをつけた正方形の要素

+
+正方形の要素に単一の `` 値を指定すると、円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-top-left-radius: 40%;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 100px;
 }
-
-
-
 
- 		ボックスは正方形ではない。境界として使用されている楕円の弧 - 
+```
+
+{{EmbedLiveSample("Square_element_with_percentage_radius")}}
+
+
パーセント値で丸みをつけた長方形の要素

+
+正方形ではない要素に単一の `` 値を指定すると、楕円弧を生成します。
+
+```html hidden
+

+```
+
+```css
 div {
   border-top-left-radius: 40%;
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 200px;
+  height: 100px;
 }
-
-
-
 
- 		背景色は境界で切り取られる - 
-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")}}

+``` + +{{EmbedLiveSample("Non-square_element_with_percentage_radius")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +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-right-radius/index.md b/files/ja/web/css/border-top-right-radius/index.md index 049d638c2b..857f59b47a 100644 --- a/files/ja/web/css/border-top-right-radius/index.md +++ b/files/ja/web/css/border-top-right-radius/index.md @@ -22,7 +22,7 @@ translation_of: Web/CSS/border-top-right-radius 画像または単色が背景になっている場合、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -> **Note:** このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。 +> **Note:** このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 ## 構文 diff --git a/files/ja/web/css/border-top-style/index.md b/files/ja/web/css/border-top-style/index.md index c09d194a88..a2f2833b05 100644 --- a/files/ja/web/css/border-top-style/index.md +++ b/files/ja/web/css/border-top-style/index.md @@ -3,29 +3,25 @@ title: border-top-style slug: Web/CSS/border-top-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-style - - border-top + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-style translation_of: Web/CSS/border-top-style --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-top-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の上側の境界 ({{CSSxRef("border")}}) における線の形状を設定します。 -
{{EmbedInteractiveExample("pages/css/border-top-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-top-style.html")}} - +> **Note:** 仕様書では、異なる形状の境界線を角でどのように接続するかを定義していません。 -
-

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

-
+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-top-style: none;
 border-top-style: hidden;
 border-top-style: dotted;
@@ -40,41 +36,51 @@ border-top-style: outset;
 /* グローバル値 */
 border-top-style: inherit;
 border-top-style: initial;
+border-top-style: revert;
 border-top-style: unset;
-
+``` + +`border-top-style` プロパティは、 {{CSSxRef("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 + +## 公式定義 -

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

+{{CSSInfo}} -

形式文法

+## 形式文法 {{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

- -
/* 表の外見を定義 */
+
例

+
+### border-top-style の設定
+
+#### HTML
+
+```html
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+  
+
nonehiddendotteddashed
soliddoublegrooveridge
insetoutset

+```
+
+#### CSS
+
+```css
+/* 表の外見を定義 */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -93,45 +99,22 @@ tr, td {
 .b7 {border-top-style: groove;}
 .b8 {border-top-style: ridge;}
 .b9 {border-top-style: inset;}
-.b10 {border-top-style: outset;}
+.b10 {border-top-style: outset;} +``` -

結果

+#### 結果 -

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

+{{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}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • その他の形状に関する境界のプロパティ: {{CSSxRef("border-left-style")}}, {{CSSxRef("border-right-style")}}, {{CSSxRef("border-bottom-style")}}, {{CSSxRef("border-style")}}
    • -
  • その他の左側の境界に関するプロパティ: {{CSSxRef("border-top")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-top-width")}}
    • -
+ - その他の形状に関する境界のプロパティ: {{CSSxRef("border-left-style")}}, {{CSSxRef("border-right-style")}}, {{CSSxRef("border-bottom-style")}}, {{CSSxRef("border-style")}} + - その他の左側の境界に関するプロパティ: {{CSSxRef("border-top")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("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 index 17c8a7b095..0a68bec4db 100644 --- a/files/ja/web/css/border-top-width/index.md +++ b/files/ja/web/css/border-top-width/index.md @@ -3,30 +3,28 @@ title: border-top-width slug: Web/CSS/border-top-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-top - - border-width + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-width translation_of: Web/CSS/border-top-width --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 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;
@@ -34,60 +32,43 @@ border-top-width: 6px;
 /* グローバルキーワード */
 border-top-width: inherit;
 border-top-width: initial;
+border-top-width: revert;
 border-top-width: unset;
-
- -

値

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

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

-
-
-
- -

形式文法

+``` + +### 値 + +- `` + + - : 境界の幅を、明示的な非負の {{cssxref("<length>")}} またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。 + + - `thin` + - `medium` + - `thick` + + > **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+

例

-

HTML

+### HTML -
<div>Element 1</div>
-<div>Element 2</div>
+```html +
Element 1
+
Element 2
+``` -

CSS

+### CSS -
div {
+```css
+div {
   border: 1px solid red;
   margin: 1em 0;
 }
@@ -97,50 +78,22 @@ div:nth-child(1) {
 }
 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")}}

- -

関連情報

- -
    -
  • 他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}
    • -
  • 他の border-top 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-top-color")}}
    • -
+} +``` + +### 結果 + +{{EmbedLiveSample('Examples', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}} + - 他の border-top 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-top-color")}} diff --git a/files/ja/web/css/border-top/index.md b/files/ja/web/css/border-top/index.md index 2b5ce0aaa7..a329beca7a 100644 --- a/files/ja/web/css/border-top/index.md +++ b/files/ja/web/css/border-top/index.md @@ -3,85 +3,92 @@ title: border-top slug: Web/CSS/border-top tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-top translation_of: Web/CSS/border-top --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

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

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

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

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

構成要素のプロパティ

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

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

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

構文

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

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

上側の境界の適用

+

上側の境界の適用

-

HTML

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

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

CSS

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

結果

- -

{{EmbedLiveSample('Applying_a_top_border')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-block")}}
    • -
  • {{cssxref("outline")}}
    • -
+``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_top_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`border`](/ja/docs/Web/CSS/border) +- [`border-block`](/ja/docs/Web/CSS/border-block) +- [`outline`](/ja/docs/Web/CSS/outline) diff --git a/files/ja/web/css/border-width/index.md b/files/ja/web/css/border-width/index.md index 195e20171c..18f8653364 100644 --- a/files/ja/web/css/border-width/index.md +++ b/files/ja/web/css/border-width/index.md @@ -3,9 +3,9 @@ title: border-width slug: Web/CSS/border-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference + - リファレンス - recipe:css-shorthand-property browser-compat: css.properties.border-width translation_of: Web/CSS/border-width diff --git a/files/ja/web/css/border/index.md b/files/ja/web/css/border/index.md index f6ad647ad0..4858e13bf9 100644 --- a/files/ja/web/css/border/index.md +++ b/files/ja/web/css/border/index.md @@ -3,36 +3,34 @@ title: border slug: Web/CSS/border tags: - CSS - - CSS Borders - - CSS Shorthand property - - Layout - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS 一括指定プロパティ + - レイアウト + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border translation_of: Web/CSS/border --- -
{{CSSRef("CSS Borders")}}
+{{CSSRef("CSS Borders")}} -

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

+**`border`** は [CSS](/ja/docs/Web/CSS) の [一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、要素の境界を設定します。これは {{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}} の値を設定します。 -

例

+## 例 -
{{EmbedInteractiveExample("pages/css/border.html")}}
+{{EmbedInteractiveExample("pages/css/border.html")}} - +## 構成要素のプロパティ -

構成要素のプロパティ

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

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

+ - {{cssxref("border-color")}} + - {{cssxref("border-style")}} + - {{cssxref("border-width")}} -
    -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • {{cssxref("border-width")}}
    • -
+## 構文 -

構文

- -
/* 種類 */
+```css
+/* 種類 */
 border: solid;
 
 /* 幅 | 種類 */
@@ -48,60 +46,56 @@ border: medium dashed green;
 border: inherit;
 border: initial;
 border: unset;
-
+``` -

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

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

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

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

値

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

解説

+## 解説 -

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

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

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

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

境界線と輪郭線

+### 境界線と輪郭線 -

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

+境界線と[輪郭線](/ja/docs/Web/CSS/outline)はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。 -
    -
  • 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。
    • -
  • 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。
    • -
+ - 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。 + - 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

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

+

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

-

HTML

+#### HTML -
<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
-
+```html +
I have a border, an outline, and a box shadow! Amazing, isn't it?
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   border: 0.5rem outset pink;
   outline: 0.5rem solid khaki;
   box-shadow: 0 0 0 2rem skyblue;
@@ -110,42 +104,25 @@ border: unset;
   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")}}

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