From 097e0c985e82e73460e6c0a76f3b901ce3af98f7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 17 Nov 2021 00:45:11 +0900 Subject: CSS 論理的プロパティと値のボックスモデルに関するプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/15 時点の英語版に同期 --- files/ja/web/css/border-start-end-radius/index.md | 103 ++++++++++------------ 1 file changed, 45 insertions(+), 58 deletions(-) (limited to 'files/ja/web/css/border-start-end-radius') diff --git a/files/ja/web/css/border-start-end-radius/index.md b/files/ja/web/css/border-start-end-radius/index.md index 5201956bc6..668e85f035 100644 --- a/files/ja/web/css/border-start-end-radius/index.md +++ b/files/ja/web/css/border-start-end-radius/index.md @@ -3,66 +3,69 @@ title: border-start-end-radius slug: Web/CSS/border-start-end-radius tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - border-start-end-radius - - 'recipe:css-property' - - writing modes + - recipe:css-property + - 書字方向 +browser-compat: css.properties.border-start-end-radius translation_of: Web/CSS/border-start-end-radius --- -

{{CSSRef}}

+{{CSSRef}} -

border-start-end-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

+**`border-start-end-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応づけられます。これは[テキストの方向](/ja/docs/Web/CSS/text-orientation)や[書字方向](/ja/docs/Web/CSS/CSS_Writing_Modes)に依存せずにスタイルを構築する際に便利です。 -
/* <length> 値 */
-/* 値1つの場合は角を円にする */
+```css
+/*  値 */
+/* 値 1 つの場合は角を円にする */
 border-start-end-radius: 10px;
 border-start-end-radius: 1em;
 
-/* 値2つの場合は角を楕円にする */
+/* 値 2 つの場合は角を楕円にする */
 border-start-end-radius: 1em 2em;
 
 /* グローバル値 */
 border-start-end-radius: inherit;
 border-start-end-radius: initial;
+border-start-end-radius: revert;
 border-start-end-radius: unset;
-
+``` -

このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 {{CSSxRef("border-top-right-radius")}} プロパティに対応します。

+このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 {{CSSxRef("border-top-right-radius")}} プロパティに対応します。 -

構文

+## 構文 -

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

縦書きの時の境界の丸め

+

縦書きの時の境界の丸め

-

HTML

+#### HTML -
<div>
-  <p class="exampleText">Example</p>
-</div>
-
+```html +
+

Example

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: rebeccapurple;
   width: 120px;
   height: 120px;
@@ -74,38 +77,22 @@ border-start-end-radius: unset;
   padding: 10px;
   background-color: #fff;
   border-start-end-radius: 10px;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}

+{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+{{Specifications}} -

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

+## 関連情報 - +- 対応する物理的プロパティ: {{CSSxRef("border-bottom-left-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} -- cgit v1.2.3-54-g00ecf