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

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

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

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

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

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

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

構文

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

値１つで指定する場合:

- - - -

値２つで指定する場合:

- - - -

値

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

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

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

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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

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

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

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

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

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

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

構文

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

値１つで指定する場合:

+ + + +

値２つで指定する場合:

+ + + +

値

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

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

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

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf