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 時点の英語版に同期 --- .../border-bottom-left-radius.png | Bin 0 -> 6423 bytes .../ja/web/css/border-bottom-left-radius/index.md | 260 ++++++++++----------- 2 files changed, 119 insertions(+), 141 deletions(-) create mode 100644 files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png (limited to 'files/ja/web/css/border-bottom-left-radius') 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")}} -- cgit v1.2.3-54-g00ecf