From a5945c319772579f34e35c90c3b61b55e25a8468 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Sep 2021 00:00:33 +0900 Subject: border-inline-* プロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 --- files/ja/web/css/border-inline-color/index.md | 113 +++++++++--------- files/ja/web/css/border-inline-end-color/index.md | 113 +++++++++--------- files/ja/web/css/border-inline-end-style/index.md | 115 +++++++++--------- files/ja/web/css/border-inline-end-width/index.md | 115 +++++++++--------- files/ja/web/css/border-inline-end/index.md | 129 ++++++++++----------- .../ja/web/css/border-inline-start-color/index.md | 111 ++++++++---------- .../ja/web/css/border-inline-start-style/index.md | 108 ++++++++--------- .../ja/web/css/border-inline-start-width/index.md | 111 ++++++++---------- files/ja/web/css/border-inline-start/index.md | 129 ++++++++++----------- files/ja/web/css/border-inline-style/index.md | 106 ++++++++--------- files/ja/web/css/border-inline-width/index.md | 109 +++++++++-------- 11 files changed, 597 insertions(+), 662 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/border-inline-color/index.md b/files/ja/web/css/border-inline-color/index.md index e927735680..5b4e31f062 100644 --- a/files/ja/web/css/border-inline-color/index.md +++ b/files/ja/web/css/border-inline-color/index.md @@ -4,50 +4,63 @@ slug: Web/CSS/border-inline-color tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference + - recipe:css-property +browser-compat: css.properties.border-inline-color translation_of: Web/CSS/border-inline-color --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-start-color は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} および {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} および {{cssxref("border-left-color")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-start-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} と {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} と {{cssxref("border-left-color")}} の組み合わせのどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
border-inline-color: yellow;
+{{EmbedInteractiveExample("pages/css/border-inline-color.html")}}
+
+他の方向の境界色については、 {{cssxref("border-block-color")}} によって {{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}} を設定することができます。
+
+## 構文
+
+```css
+border-inline-color: yellow;
 border-inline-color: #F5F6F7;
-
-

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の方向の境界色を定義します。

+/* グローバル値 */ +border-inline-color: inherit; +border-inline-color: initial; +border-inline-color: revert; +border-inline-color: unset; +``` -

{{cssinfo}}

+### 値 -

構文

+- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -

値

+## 公式定義 -
-
<'color'>
-
境界の色です。 {{cssxref("color")}} を参照してください。
-
+{{CSSInfo}} -

形式文法

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

例

+## 例 + +

テキストが垂直方向の場合の境界色

-

HTML

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

Example text

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -57,36 +70,22 @@ border-inline-color: #F5F6F7;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-inline-color: red;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_color_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応します +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}}+ bug 1297097 diff --git a/files/ja/web/css/border-inline-end-color/index.md b/files/ja/web/css/border-inline-end-color/index.md index 191a36b576..41f6bcaa64 100644 --- a/files/ja/web/css/border-inline-end-color/index.md +++ b/files/ja/web/css/border-inline-end-color/index.md @@ -4,58 +4,67 @@ slug: Web/CSS/border-inline-end-color tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-color - border-inline-end - border-inline-end-color + - recipe:css-property +browser-compat: css.properties.border-inline-end-color translation_of: Web/CSS/border-inline-end-color --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-end-color は CSS のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-end-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}} - +## 構文 -

構文

- -
border-inline-end-color: rebeccapurple;
+```css
+border-inline-end-color: rebeccapurple;
 border-inline-end-color: #663399;
-
-

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} が要素の他の境界色を定義します。

+/* グローバル値 */ +border-inline-end-color: inherit; +border-inline-end-color: initial; +border-inline-end-color: revert; +border-inline-end-color: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-color")}}、{{cssxref("border-block-end-color")}}、{{cssxref("border-inline-start-color")}} が要素の他の境界色を定義します。 + +{{cssinfo}} -

{{cssinfo}}

+### 値 -

値

+- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -
-
<'color'>
-
境界の色です。 {{cssxref("color")}} を参照してください。
-
+## 公式定義 -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -65,36 +74,20 @@ border-inline-end-color: #663399;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-inline-end-color: red;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-end-style/index.md b/files/ja/web/css/border-inline-end-style/index.md index dcdf13a5a3..7f11da9519 100644 --- a/files/ja/web/css/border-inline-end-style/index.md +++ b/files/ja/web/css/border-inline-end-style/index.md @@ -4,60 +4,69 @@ slug: Web/CSS/border-inline-end-style tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-end - border-inline-end-style - border-inline-style + - recipe:css-property +browser-compat: css.properties.border-inline-end-style translation_of: Web/CSS/border-inline-end-style --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-end-style は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-end-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}} - +## 構文 -

構文

- -
/* <'border-style'> 値 */
+```css
+/* <'border-style'> 値 */
 border-inline-end-style: dashed;
 border-inline-end-style: dotted;
 border-inline-end-style: groove;
-
-

関連するプロパティとしては、 {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。

+/* グローバル値 */ +border-inline-end-style: inherit; +border-inline-end-style: initial; +border-inline-end-style: revert; +border-inline-end-style: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-style")}}、{{cssxref("border-block-end-style")}}、{{cssxref("border-inline-start-style")}} が要素の他の境界のスタイルを定義します。 -

{{cssinfo}}

+### 値 -

値

+- `<'border-style'>` + - : 境界のスタイルです。 {{cssxref("border-style")}} を参照してください。 -
-
<'border-style'>
-
境界のスタイルです。 {{cssxref("border-style")}} を参照してください。
-
+## 公式定義 -

形式文法

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

例

+

例

+ +### inline-end-style の設定 -

HTML

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

Example text

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -67,36 +76,22 @@ border-inline-end-style: groove;
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-inline-end-style: dashed;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-end-width/index.md b/files/ja/web/css/border-inline-end-width/index.md index a61fcddaa5..aeba051814 100644 --- a/files/ja/web/css/border-inline-end-width/index.md +++ b/files/ja/web/css/border-inline-end-width/index.md @@ -4,59 +4,68 @@ slug: Web/CSS/border-inline-end-width tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-end - border-inline-end-width - border-inline-width + - recipe:css-property +browser-compat: css.properties.border-inline-end-width translation_of: Web/CSS/border-inline-end-width --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-end-width は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-end-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}} - +## 構文 -

構文

- -
/* <'border-width'> 値 */
+```css
+/* <'border-width'> 値 */
 border-inline-end-width: 2px;
 border-inline-end-width: thick;
-
-

関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} が要素の他の境界の幅を定義します。

+/* グローバル値 */ +border-inline-end-width: inherit; +border-inline-end-width: initial; +border-inline-end-width: revert; +border-inline-end-width: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-width")}}、{{cssxref("border-block-end-width")}}、{{cssxref("border-inline-start-width")}} が要素の他の境界の幅を定義します。 -

{{cssinfo}}

+### 値 -

値

+- `<'border-width'>` + - : 境界の幅です。 {{ cssxref("border-width") }} を参照してください。 -
-
<'border-width'>
-
境界の幅です。 {{cssxref("border-width")}} を参照してください。
-
+## 公式定義 -

形式文法

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

例

+## 例 + +

テキストが垂直方向の場合の境界の適用

-

HTML

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

Example text

+
+``` -

CSS

+##### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -66,36 +75,22 @@ border-inline-end-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-inline-end-width: 5px;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Applying_a_border_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-end/index.md b/files/ja/web/css/border-inline-end/index.md index f788b59958..4a7c6b472f 100644 --- a/files/ja/web/css/border-inline-end/index.md +++ b/files/ja/web/css/border-inline-end/index.md @@ -4,68 +4,83 @@ slug: Web/CSS/border-inline-end tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-end - border-inline-end-color - border-inline-end-style - border-inline-end-width + - recipe:css-shorthand-property +browser-compat: css.properties.border-inline-end translation_of: Web/CSS/border-inline-end --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-end は CSS のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

+**`border-inline-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 -
{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-end.html")}} - +## 構成要素のプロパティ -

構文

+このプロパティは以下の CSS プロパティの一括指定です。 -
border-inline-end: 1px;
+- [`border-inline-end-color`](/ja/docs/Web/CSS/border-inline-end-color)
+- [`border-inline-end-style`](/ja/docs/Web/CSS/border-inline-end-style)
+- [`border-inline-end-width`](/ja/docs/Web/CSS/border-inline-end-width)
+
+## 構文
+
+```css
+border-inline-end: 1px;
 border-inline-end: 2px dashed;
 border-inline-end: medium dashed blue;
-
-

border-inline-end は1つ以上の {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, {{cssxref("border-inline-end-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+/* グローバル値 */ +border-inline-end: inherit; +border-inline-end: initial; +border-inline-end: revert; +border-inline-end: unset; +``` + +`border-inline-end` が対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -

関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}} が要素の他の境界を定義します。

+関連するプロパティとしては、 {{cssxref("border-block-start")}}、{{cssxref("border-block-end")}}、{{cssxref("border-inline-start")}} が要素の他の境界を定義します。 -

{{cssinfo}}

+### 値 -

値

+`border-inline-end` は以下の値のうちの1つ以上を任意の順序で指定します。 -

border-inline-end は以下の値のうちの1つ以上を任意の順序で指定します。

+- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -
-
<'border-width'>
-
境界の幅です。 {{cssxref("border-width")}} を参照してください。
-
<'border-style'>
-
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
-
<'color'>
-
境界の色です。 {{cssxref("color")}} を参照してください。
-
+## 公式定義 -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -74,36 +89,20 @@ border-inline-end: medium dashed blue;
 .exampleText {
   writing-mode: vertical-rl;
   border-inline-end: 5px dashed blue;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} のうちの 1 つに対応付けられます。 +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start-color/index.md b/files/ja/web/css/border-inline-start-color/index.md index bfe03cfdc8..9aa6b27a45 100644 --- a/files/ja/web/css/border-inline-start-color/index.md +++ b/files/ja/web/css/border-inline-start-color/index.md @@ -4,58 +4,65 @@ slug: Web/CSS/border-inline-start-color tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-color - border-inline-start - border-inline-start-color + - recipe:css-property +browser-compat: css.properties.border-inline-start-color translation_of: Web/CSS/border-inline-start-color --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-start-color は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-start-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}} - +## 構文 -

構文

- -
border-inline-start-color: red;
+```css
+border-inline-start-color: red;
 border-inline-start-color: #ee4141;
-
-

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。

+/* グローバル値 */ +border-inline-start-color: inherit; +border-inline-start-color: initial; +border-inline-start-color: revert; +border-inline-start-color: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-color")}}、{{cssxref("border-block-end-color")}}、{{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。 + +### 値 -

{{cssinfo}}

+- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -

値

+## 公式定義 -
-
<'color'>
-
境界の色です。 {{cssxref("color")}} を参照してください。
-
+{{CSSInfo}} -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -65,36 +72,20 @@ border-inline-start-color: #ee4141;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-inline-start-color: red;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start-style/index.md b/files/ja/web/css/border-inline-start-style/index.md index 6f092c539d..b1d3403c5f 100644 --- a/files/ja/web/css/border-inline-start-style/index.md +++ b/files/ja/web/css/border-inline-start-style/index.md @@ -4,60 +4,64 @@ slug: Web/CSS/border-inline-start-style tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-start - border-inline-start-style - border-inline-style + - recipe:css-property +browser-compat: css.properties.border-inline-start-style translation_of: Web/CSS/border-inline-start-style --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-start-style は CSS のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-start-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}} - +## 構文 -

構文

- -
/* <'border-style'> 値 */
+```css
+/* <'border-style'> 値 */
 border-inline-start-style: dashed;
 border-inline-start-style: dotted;
+border-inline-start-style: revert;
 border-inline-start-style: groove;
-
+``` + +関連するプロパティとしては、 {{cssxref("border-block-start-style")}}、{{cssxref("border-block-end-style")}}、{{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。 + +{{cssinfo}} -

関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。

+### 値 -

{{cssinfo}}

+- `<'border-style'>` + - : 境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。 -

値

+## 公式定義 -
-
<'border-style'>
-
境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。
-
+{{CSSInfo}} -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -67,36 +71,20 @@ border-inline-start-style: groove;
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-inline-start-style: dashed;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start-width/index.md b/files/ja/web/css/border-inline-start-width/index.md index f32239ab42..9fbd2eaefe 100644 --- a/files/ja/web/css/border-inline-start-width/index.md +++ b/files/ja/web/css/border-inline-start-width/index.md @@ -4,59 +4,66 @@ slug: Web/CSS/border-inline-start-width tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-start - border-inline-start-width - border-inline-width + - recipe:css-property +browser-compat: css.properties.border-inline-start-width translation_of: Web/CSS/border-inline-start-width --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-start-width は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-start-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}} - +## 構文 -

構文

- -
/* <'border-width'> 値 */
+```css
+/* <'border-width'> 値 */
 border-inline-start-width: 5px;
 border-inline-start-width: thick;
-
-

関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界の幅を定義します。

+/* グローバル値 */ +border-inline-start-width: inherit; +border-inline-start-width: initial; +border-inline-start-width: revert; +border-inline-start-width: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-width")}}、{{cssxref("border-block-end-width")}}、{{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。 + +### 値 -

{{cssinfo}}

+- `<'border-width'>` + - : 境界の幅です。 {{ cssxref("border-width") }} を参照してください。 -

値

+## 公式定義 -
-
<'border-width'>
-
境界の幅です。 {{cssxref("border-width")}} を参照してください。
-
+{{CSSInfo}} -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -66,36 +73,20 @@ border-inline-start-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-inline-start-width: 5px;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start/index.md b/files/ja/web/css/border-inline-start/index.md index 58e1cee709..d723df5379 100644 --- a/files/ja/web/css/border-inline-start/index.md +++ b/files/ja/web/css/border-inline-start/index.md @@ -4,68 +4,83 @@ slug: Web/CSS/border-inline-start tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference - border-inline - border-inline-start - border-inline-start-color - border-inline-start-style - border-inline-start-width + - recipe:css-shorthand-property +browser-compat: css.properties.border-inline-start translation_of: Web/CSS/border-inline-start --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-start は CSS のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

+**`border-inline-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 -
{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
+{{EmbedInteractiveExample("pages/css/border-inline-start.html")}} - +## 構成要素のプロパティ -

構文

+このプロパティは以下の CSS プロパティの一括指定です。 -
border-inline-start: 1px;
+- [`border-inline-start-color`](/ja/docs/Web/CSS/border-inline-start-color)
+- [`border-inline-start-style`](/ja/docs/Web/CSS/border-inline-start-style)
+- [`border-inline-start-width`](/ja/docs/Web/CSS/border-inline-start-width)
+
+## 構文
+
+```css
+border-inline-start: 1px;
 border-inline-start: 2px dotted;
 border-inline-start: medium dashed green;
-
-

border-inline-start は1つ以上の {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+/* グローバル値 */ +border-inline-start: inherit; +border-inline-start: initial; +border-inline-start: revert; +border-inline-start: unset; +``` + +対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -

関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。

+関連するプロパティとしては、 {{cssxref("border-block-start")}}、{{cssxref("border-block-end")}}、{{cssxref("border-inline-end")}} が要素の他の境界を定義します。 -

{{cssinfo}}

+### 値 -

値

+`border-inline-start` は以下の値の内の 1 つ以上を任意の順序で指定します。 -

border-inline-start は以下の値の内の1つ以上を任意の順序で指定します。

+- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -
-
<'border-width'>
-
境界の幅です。 {{cssxref("border-width")}} を参照してください。
-
<'border-style'>
-
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
-
<'color'>
-
境界の色です。 {{cssxref("color")}} を参照してください。
-
+## 公式定義 -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -74,36 +89,20 @@ border-inline-start: medium dashed green;
 .exampleText {
   writing-mode: vertical-rl;
   border-inline-start: 5px dashed blue;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} のうちの 1 つに対応付けられます。 +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-style/index.md b/files/ja/web/css/border-inline-style/index.md index 6ba5ffd0e9..2e7971f0c6 100644 --- a/files/ja/web/css/border-inline-style/index.md +++ b/files/ja/web/css/border-inline-style/index.md @@ -4,52 +4,58 @@ slug: Web/CSS/border-inline-style tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference + - recipe:css-property +browser-compat: css.properties.border-inline-style translation_of: Web/CSS/border-inline-style --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-style は CSS のプロパティで、要素の論理的なインライン方向の境界のスタイルを、要素の書字方向やテキストの向きに応じて物理的な境界のスタイルに割り当てて定義します。これは {{cssxref("border-top-style")}} および {{cssxref("border-bottom-style")}}、または {{cssxref("border-left-style")}} および {{cssxref("border-right-style")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に応じて対応します。

+**`border-inline-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}} と {{cssxref("border-bottom-style")}}、または {{cssxref("border-left-style")}} と {{cssxref("border-right-style")}} の組み合わせのどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
/* <'border-style'> の値 */
+{{EmbedInteractiveExample("pages/css/border-inline-style.html")}}
+
+他の方向の境界スタイルについては {{cssxref("border-block-style")}} で設定することができ、これは {{cssxref("border-block-start-style")}} および {{cssxref("border-block-end-style")}} を設定することができます。
+
+## 構文
+
+```css
+/* <'border-style'> の値 */
 border-inline-style: dashed;
 border-inline-style: dotted;
+border-inline-style: revert;
 border-inline-style: groove;
-
+``` -

他の方向の境界スタイルは {{cssxref("border-block-style")}} で設定することができ、これは {{cssxref("border-block-start-style")}} および {{cssxref("border-block-end-style")}} を定義します。

+### 値 -

{{cssinfo}}

+- `<'border-style'>` + - : 境界線のスタイルです。 {{ cssxref("border-style") }} を参照してください。 -

構文

+## 公式定義 -

値

+{{CSSInfo}} -
-
<'border-style'>
-
境界線のスタイルです。 {{ cssxref("border-style") }} を参照してください。
-
- -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -59,36 +65,20 @@ border-inline-style: groove;
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-inline-style: dashed;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}{{Spec2("CSS Logical Properties")}}初回定義。
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは物理的な境界のプロパティ {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応します +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-width/index.md b/files/ja/web/css/border-inline-width/index.md index 23969d144c..df056a6d0c 100644 --- a/files/ja/web/css/border-inline-width/index.md +++ b/files/ja/web/css/border-inline-width/index.md @@ -4,52 +4,63 @@ slug: Web/CSS/border-inline-width tags: - CSS - CSS Logical Property - - CSS Property - CSS プロパティ - - CSS 論理的プロパティ - - Experimental + - 実験的 - Reference + - recipe:css-property +browser-compat: css.properties.border-inline-width translation_of: Web/CSS/border-inline-width --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

border-inline-width は CSS のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} の組み合わせのどちらか対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。

+**`border-inline-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} の組み合わせのどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 -
/* <'border-width'> 値 */
+{{EmbedInteractiveExample("pages/css/border-inline-width.html")}}
+
+他の方向の境界の幅については {{cssxref("border-block-width")}} で設定することができ、これは {{cssxref("border-block-start-width")}} および {{cssxref("border-block-end-width")}} を設定することができます。
+
+## 構文
+
+```css
+/* <'border-width'> 値 */
 border-inline-width: 5px 10px;
 border-inline-width: 5px;
 border-inline-width: thick;
-
-

他の方向の境界の幅については、 {{cssxref("border-block-width")}} によって、 {{cssxref("border-block-start-width")}} と {{cssxref("border-block-end-width")}} を設定することができます。

+/* グローバル値 */ +border-inline-width: inherit; +border-inline-width: initial; +border-inline-width: revert; +border-inline-width: unset; +``` -

{{cssinfo}}

+### 値 -

構文

+- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 -

値

+## 公式定義 -
-
<'border-width'>
-
境界の幅です。 {{cssxref("border-width")}} を参照してください。
-
+{{CSSInfo}} -

形式文法

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

例

+

例

-

HTML

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

Example text

+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -59,36 +70,20 @@ border-inline-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-inline-width: 5px 10px;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-inline-width", "border-inline-width")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応します +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} -- cgit v1.2.3-54-g00ecf