diff options
Diffstat (limited to 'files')
40 files changed, 1573 insertions, 1753 deletions
diff --git a/files/ja/web/css/border-block-color/index.md b/files/ja/web/css/border-block-color/index.md index 12e92e13f5..8562e81b6a 100644 --- a/files/ja/web/css/border-block-color/index.md +++ b/files/ja/web/css/border-block-color/index.md @@ -3,51 +3,64 @@ title: border-block-color slug: Web/CSS/border-block-color tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-block-color translation_of: Web/CSS/border-block-color --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} + +**`border-block-end-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")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-block-color.html")}} -<p><strong><code>border-block-end-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} および {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} および {{cssxref("border-left-color")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +他の方向の境界については、 {{cssxref("border-block-color")}} によって、 {{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}} の両方を設定することができます。 -<pre class="brush:css no-line-numbers">border-block-color: yellow; +### 構文 + +```css +border-block-color: yellow; border-block-color: #F5F6F7; -</pre> -<p>他の方向の境界については、 {{cssxref("border-block-color")}} によって、 {{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}} の両方を設定することができます。</p> +/* グローバル値 */ +border-block-color: inherit; +border-block-color: initial; +border-block-color: revert; +border-block-color: unset; +``` -<p>{{cssinfo}}</p> +### 値 -<h2 id="構文">構文</h2> +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Border_with_vertical_text">縦書きテキストの境界</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -57,36 +70,22 @@ border-block-color: #F5F6F7; writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応します</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応します +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-block-end-color/index.md b/files/ja/web/css/border-block-end-color/index.md index c5a45ccf49..ff002b0c94 100644 --- a/files/ja/web/css/border-block-end-color/index.md +++ b/files/ja/web/css/border-block-end-color/index.md @@ -3,59 +3,68 @@ title: border-block-end-color slug: Web/CSS/border-block-end-color tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-color - border-block-end - border-block-end-color + - recipe:css-property +browser-compat: css.properties.border-block-end-color translation_of: Web/CSS/border-block-end-color --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>border-block-end-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`border-block-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")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">border-block-end-color: yellow; +```css +border-block-end-color: yellow; border-block-end-color: #F5F6F7; -</pre> -<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。</p> +/* グローバル値 */ +border-block-end-color: inherit; +border-block-end-color: initial; +border-block-end-color: revert; +border-block-end-color: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。 -<p>{{cssinfo}}</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -<dl> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Border_color_with_vertical_text">垂直テキストの境界線の色</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -65,36 +74,22 @@ border-block-end-color: #F5F6F7; writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-end-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{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")}} のうちの一つに対応づけられます +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-block-end-style/index.md b/files/ja/web/css/border-block-end-style/index.md index cdd349eb8d..e1c02707e7 100644 --- a/files/ja/web/css/border-block-end-style/index.md +++ b/files/ja/web/css/border-block-end-style/index.md @@ -3,61 +3,70 @@ title: border-block-end-style slug: Web/CSS/border-block-end-style tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-end - border-block-end-style - border-block-style + - recipe:css-property +browser-compat: css.properties.border-block-end-style translation_of: Web/CSS/border-block-end-style --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>border-block-end-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`border-block-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")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-style'> 値 */ +```css +/* <'border-style'> 値 */ border-block-end-style: dashed; border-block-end-style: dotted; border-block-end-style: groove; -</pre> -<p>関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p> +/* グローバル値 */ +border-block-end-style: inherit; +border-block-end-style: initial; +border-block-end-style: revert; +border-block-end-style: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。 -<p>{{cssinfo}}</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `<'border-style'>` + - : 境界のスタイルです。 {{cssxref("border-style")}} を参照してください。 -<dl> - <dt><code><'border-style'></code></dt> - <dd>境界のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Dashed_border_with_vertical_text">縦書きテキストの破線の境界</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -67,36 +76,22 @@ border-block-end-style: groove; writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-end-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Dashed_border_with_vertical_text", 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-block-end-width/index.md b/files/ja/web/css/border-block-end-width/index.md index 15ded242b3..0d06f39a36 100644 --- a/files/ja/web/css/border-block-end-width/index.md +++ b/files/ja/web/css/border-block-end-width/index.md @@ -3,60 +3,69 @@ title: border-block-end-width slug: Web/CSS/border-block-end-width tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-end - border-block-end-width - border-block-width + - recipe:css-property +browser-compat: css.properties.border-block-end-width translation_of: Web/CSS/border-block-end-width --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>border-block-end-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`border-block-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")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-width'> 値 */ +```css +/* <'border-width'> 値 */ border-block-end-width: 5px; border-block-end-width: thick; -</pre> -<p>関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。</p> +/* グローバル値 */ +border-block-end-width: inherit; +border-block-end-width: initial; +border-block-end-width: revert; +border-block-end-width: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。 -<p>{{cssinfo}}</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Border_width_with_vertical_text">縦書きテキストの境界線の幅</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -66,36 +75,22 @@ border-block-end-width: thick; writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-end-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_width_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-block-end/index.md b/files/ja/web/css/border-block-end/index.md index dbbc94b2db..2cd114ca23 100644 --- a/files/ja/web/css/border-block-end/index.md +++ b/files/ja/web/css/border-block-end/index.md @@ -3,68 +3,85 @@ title: border-block-end slug: Web/CSS/border-block-end tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-end-color - border-block-end-style - border-block-end-width + - recipe:css-shorthand-property +browser-compat: css.properties.border-block-end translation_of: Web/CSS/border-block-end --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} + +**`border-block-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 + +{{EmbedInteractiveExample("pages/css/border-block-end.html")}} -<p><strong><code>border-block-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p> +## 構成要素のプロパティ -<div>{{EmbedInteractiveExample("pages/css/border-block-end.html")}}</div> +このプロパティは以下の CSS プロパティの一括指定です。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +- [`border-block-end-color`](/ja/docs/Web/CSS/border-block-end-color) +- [`border-block-end-style`](/ja/docs/Web/CSS/border-block-end-style) +- [`border-block-end-width`](/ja/docs/Web/CSS/border-block-end-width) -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">border-block-end: 1px; +```css +border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; -</pre> -<p><code>border-block-end</code> は1つ以上の {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-block-end-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +/* グローバル値 */ +border-block-end: inherit; +border-block-end: initial; +border-block-end: revert; +border-block-end: unset; +``` -<p>関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。</p> +`border-block-end` は 1 つ以上の {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-block-end-color")}} の値の組み合わせを使用することができます。対応づけられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。 -<p>{{cssinfo}}</p> +関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<p><code>border-block-end</code> は以下の値のうちの1つ以上を任意の順序で指定します。</p> +`border-block-end` は以下の値のうちの 1 つ以上を任意の順序で指定します。 -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> - <dt><code><'border-style'></code></dt> - <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Border_with_vertical_text">縦書きテキストの境界</h3> -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<pre class="brush: css">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -73,36 +90,22 @@ border-block-end: medium dashed blue; .exampleText { writing-mode: vertical-rl; border-block-end: 5px dashed blue; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-end")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応づけられます。 +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-block-start-color/index.md b/files/ja/web/css/border-block-start-color/index.md index 86dce91d9f..2f22a8302b 100644 --- a/files/ja/web/css/border-block-start-color/index.md +++ b/files/ja/web/css/border-block-start-color/index.md @@ -3,59 +3,68 @@ title: border-block-start-color slug: Web/CSS/border-block-start-color tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-color - border-block-start - border-block-start-color + - recipe:css-property +browser-compat: css.properties.border-block-start-color translation_of: Web/CSS/border-block-start-color --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>border-block-start-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`border-block-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")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">border-block-start-color: blue; +```css +border-block-start-color: blue; border-block-start-color: #4c5d21; -</pre> -<p>関連するプロパティとしては、 {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。</p> +/* グローバル値 */ +border-block-start-color: inherit; +border-block-start-color: initial; +border-block-start-color: revert; +border-block-start-color: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。 -<p>{{cssinfo}}</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `<'color'>` + - : {{cssxref("border-color")}} を参照してください。 -<dl> - <dt><code><'color'></code></dt> - <dd>{{cssxref("border-color")}} を参照してください。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Border_color_with_vertical_text">縦書きテキストの境界線の色</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -65,36 +74,22 @@ border-block-start-color: #4c5d21; writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-start-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li> -</ul> +} +``` + +#### 例 + +{{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")}} のうちの一つに対応づけられます +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-block-start-style/index.md b/files/ja/web/css/border-block-start-style/index.md index b23350e50f..35cc623587 100644 --- a/files/ja/web/css/border-block-start-style/index.md +++ b/files/ja/web/css/border-block-start-style/index.md @@ -3,62 +3,72 @@ title: border-block-start-style slug: Web/CSS/border-block-start-style tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-start - border-block-start-style - border-block-style - - 境界 + - recipe:css-property +browser-compat: css.properties.border-block-start-style translation_of: Web/CSS/border-block-start-style --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>border-block-start-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`border-block-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")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-style'> 値 */ +```css +/* <'border-style'> 値 */ border-block-start-style: dashed; border-block-start-style: dotted; border-block-start-style: groove; -</pre> -<p>関連するプロパティとしては、 {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p> +/* グローバル値 */ +border-block-start-style: inherit; +border-block-start-style: initial; +border-block-start-style: revert; +border-block-start-style: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><'border-style'></code></dt> - <dd>境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> -</dl> +- `<'border-style'>` + - : 境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Dashed_border_with_vertical_text">縦書きテキストでの破線の境界線</h3> -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<pre class="brush: css">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -68,36 +78,22 @@ border-block-start-style: groove; writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-start-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Dashed_border_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに対応づけられます +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-block-start-width/index.md b/files/ja/web/css/border-block-start-width/index.md index f0426c7be9..81b9f1f392 100644 --- a/files/ja/web/css/border-block-start-width/index.md +++ b/files/ja/web/css/border-block-start-width/index.md @@ -3,60 +3,71 @@ title: border-block-start-width slug: Web/CSS/border-block-start-width tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-start - border-block-start-width - border-block-width + - recipe:css-property +browser-compat: css.properties.border-block-start-width translation_of: Web/CSS/border-block-start-width --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>border-block-start-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`border-block-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")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-width'> 値 */ +```css +/* <'border-width'> 値 */ border-block-start-width: 5px; border-block-start-width: thick; -</pre> -<p>関連するプロパティとしては、 {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界の幅を定義します。</p> +/* グローバル値 */ +border-block-start-width: inherit; +border-block-start-width: initial; +border-block-start-width: revert; +border-block-start-width: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> -</dl> +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Border_width_with_vertical_text">縦書きテキストの境界の太さ</h3> -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<pre class="brush: css">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -66,36 +77,22 @@ border-block-start-width: thick; writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-start-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_width_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-block-start/index.md b/files/ja/web/css/border-block-start/index.md index 38f41de009..e7228fb075 100644 --- a/files/ja/web/css/border-block-start/index.md +++ b/files/ja/web/css/border-block-start/index.md @@ -3,69 +3,86 @@ title: border-block-start slug: Web/CSS/border-block-start tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - border-block - border-block-start - border-block-start-color - border-block-start-style - border-block-start-width + - recipe:css-shorthand-property +browser-compat: css.properties.border-block-start translation_of: Web/CSS/border-block-start --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} + +**`border-block-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、個々の論理的なブロック方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 + +{{EmbedInteractiveExample("pages/css/border-block-start.html")}} -<p><strong><code>border-block-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なブロック方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p> +## 構成要素のプロパティ -<div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div> +このプロパティは以下の CSS プロパティの一括指定です。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +- [`border-block-start-color`](/ja/docs/Web/CSS/border-block-start-color) +- [`border-block-start-style`](/ja/docs/Web/CSS/border-block-start-style) +- [`border-block-start-width`](/ja/docs/Web/CSS/border-block-start-width) -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">border-block-start: 1px; +```css +border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; -</pre> -<p><code>border-block-start</code> は1つ以上の {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, {{cssxref("border-block-start-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +/* グローバル値 */ +border-block-start: inherit; +border-block-start: initial; +border-block-start: revert; +border-block-start: unset; +``` -<p>関連するプロパティとしては、 {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。</p> +`border-block-start` は 1 つ以上の {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, {{cssxref("border-block-start-color")}} の値の組み合わせを使用することができます。対応づけられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。 -<p>{{cssinfo}}</p> +関連するプロパティとしては、 {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<p><code>border-block-start</code> は以下の値の家の1つ以上を任意の順序で指定します。</p> +`border-block-start` は以下の値のうちの 1 つ以上を任意の順序で指定します。 -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> - <dt><code><'border-style'></code></dt> - <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Border_with_vertical_text">縦書きテキストの境界線</h3> -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<pre class="brush:css no-line-numbers">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -74,36 +91,20 @@ border-block-start: medium dashed blue; .exampleText { writing-mode: vertical-rl; border-block-start: 5px dashed blue; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-start")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応づけられます。 +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-block-style/index.md b/files/ja/web/css/border-block-style/index.md index 98da64022f..19239bfd8e 100644 --- a/files/ja/web/css/border-block-style/index.md +++ b/files/ja/web/css/border-block-style/index.md @@ -3,61 +3,67 @@ title: border-block-style slug: Web/CSS/border-block-style tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental + - CSS プロパティ + - 実験的 - Non-standard - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property browser-compat: css.properties.border-block-style translation_of: Web/CSS/border-block-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-block-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的なブロック方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}} と {{cssxref("border-bottom-style")}}、または {{cssxref("border-left-style")}} と {{cssxref("border-right-style")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`border-block-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")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/border-block-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block-style.html")}} -<p>他の方向の境界については、 {{cssxref("border-inline-style")}} によって、 {{cssxref("border-inline-start-style")}} と {{cssxref("border-inline-end-style")}} の両方を設定することができます。</p> +他の方向の境界については、 {{cssxref("border-inline-style")}} によって、 {{cssxref("border-inline-start-style")}} と {{cssxref("border-inline-end-style")}} の両方を設定することができます。 -<h2 id="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* <'border-style'> 値 */ +```css +/* <'border-style'> 値 */ border-block-style: dashed; border-block-style: dotted; -border-block-style: groove;</pre> +border-block-style: groove; -<h3 id="Values">値</h3> +/* グローバル値 */ +border-block-style: inherit; +border-block-style: initial; +border-block-style: revert; +border-block-style: unset; +``` -<dl> - <dt><code><'border-style'></code></dt> - <dd>境界のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> -</dl> +### 値 -<h2 id="Formal_definition">公式定義</h2> +- `<'border-style'>` + - : 境界のスタイルです。 {{cssxref("border-style")}} を参照してください。 -<p>{{CSSInfo}}</p> +## 公式定義 -<h2 id="Formal_syntax">形式文法</h2> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example">例</h2> +## 例 <h3 id="Dashed_border_with_vertical_text">縦書きでの破線の境界</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -67,38 +73,22 @@ border-block-style: groove;</pre> writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; -}</pre> +} +``` -<h4 id="Results">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Dashed_border_with_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Dashed_border_with_vertical_text", 140, 140)}} -<h2 id="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの 1 つに対応します</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- このプロパティは {{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-block-width/index.md b/files/ja/web/css/border-block-width/index.md index 4c5996a4aa..ff1573239a 100644 --- a/files/ja/web/css/border-block-width/index.md +++ b/files/ja/web/css/border-block-width/index.md @@ -3,52 +3,65 @@ title: border-block-width slug: Web/CSS/border-block-width tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-block-width translation_of: Web/CSS/border-block-width --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} + +**`border-block-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")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-block-width.html")}} -<p><strong><code>border-block-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロック方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +他の方向の境界の幅は {{cssxref("border-inline-width")}} で設定でき、これは {{cssxref("border-inline-start-width")}} および {{cssxref("border-inline-end-width")}} を設定します。 -<pre class="brush:css no-line-numbers">/* <'border-width'> values */ +## 構文 + +```css +/* <'border-width'> 値 */ border-block-width: 5px; border-block-width: thick; -</pre> -<p>関連するプロパティとしては、 {{cssxref("border-inline-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。</p> +/* グローバル値 */ +border-block-width: inherit; +border-block-width: initial; +border-block-width: revert; +border-block-width: unset; +``` -<p>{{cssinfo}}</p> +### 値 -<h2 id="Syntax" name="Syntax">構文</h2> +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> -</dl> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Border_width_with_vertical_text">縦書きテキストの境界の幅</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -58,36 +71,22 @@ border-block-width: thick; writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応します</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_width_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-block/index.md b/files/ja/web/css/border-block/index.md index f5b1d65978..c3a4a97f56 100644 --- a/files/ja/web/css/border-block/index.md +++ b/files/ja/web/css/border-block/index.md @@ -3,78 +3,82 @@ title: border-block slug: Web/CSS/border-block tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental + - CSS プロパティ + - 実験的 - Non-standard - - Reference + - リファレンス - 'recipe:css-shorthand-property' browser-compat: css.properties.border-block translation_of: Web/CSS/border-block --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>The <strong><code>border-block</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p> +The **`border-block`** は [CSS](/ja/docs/Web/CSS) のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 -<div>{{EmbedInteractiveExample("pages/css/border-block.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-block.html")}} -<p><code>border-block</code> は {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。</p> +`border-block` は {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応づけられます。 -<p>他の方向の境界については、 {{cssxref("border-inline")}} によって、 {{cssxref("border-inline-start")}} と {{cssxref("border-inline-end")}} の両方を設定することができます。</p> +他の方向の境界については、 {{cssxref("border-inline")}} によって、 {{cssxref("border-inline-start")}} と {{cssxref("border-inline-end")}} の両方を設定することができます。 -<h2 id="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<ul> - <li><a href="/ja/docs/Web/CSS/border-block-color"><code>border-block-color</code></a></li> - <li><a href="/ja/docs/Web/CSS/border-block-style"><code>border-block-style</code></a></li> - <li><a href="/ja/docs/Web/CSS/border-block-width"><code>border-block-width</code></a></li> -</ul> +- [`border-block-color`](/ja/docs/Web/CSS/border-block-color) +- [`border-block-style`](/ja/docs/Web/CSS/border-block-style) +- [`border-block-width`](/ja/docs/Web/CSS/border-block-width) -<h2 id="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">border-block: 1px; +```css +border-block: 1px; border-block: 2px dotted; -border-block: medium dashed blue;</pre> +border-block: medium dashed blue; -<h3 id="Values">値</h3> +/* グローバル値 */ +border-block: inherit; +border-block: initial; +border-block: revert; +border-block: unset; +``` -<p><code>border-block</code> は以下の値のうちの 1 つ以上を任意の順序で指定します。</p> +### 値 -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> - <dt><code><'border-style'></code></dt> - <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> - <dt><code><'color'></code></dt> - <dd>境界線の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> +`border-block` は以下の値のうちの 1 つ以上を任意の順序で指定します。 -<h2 id="Formal_definition">公式定義</h2> +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界線の色です。 {{cssxref("color")}} を参照してください。 -<p>{{CSSInfo}}</p> +## 公式定義 -<h2 id="Formal_syntax">形式文法</h2> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example">例</h2> +## 例 <h3 id="Border_with_vertical_text">縦書きテキストの境界</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -83,38 +87,22 @@ border-block: medium dashed blue;</pre> .exampleText { writing-mode: vertical-rl; border-block: 5px dashed blue; -}</pre> +} +``` -<h4 id="Results">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}} -<h2 id="Specification">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat}}</p> +{{Compat}} -<h2 id="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応付けられます。</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応づけられます。 +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-end-end-radius/index.md b/files/ja/web/css/border-end-end-radius/index.md index f2cbdf66ee..29e6a97bcb 100644 --- a/files/ja/web/css/border-end-end-radius/index.md +++ b/files/ja/web/css/border-end-end-radius/index.md @@ -3,66 +3,69 @@ title: border-end-end-radius slug: Web/CSS/border-end-end-radius tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - border-end-end-radius - - 'recipe:css-property' - - writing modes + - recipe:css-property + - 書字方向 +browser-compat: css.properties.border-end-end-radius translation_of: Web/CSS/border-end-end-radius --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>border-end-end-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p> +**`border-end-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)に依存せずにスタイルを構築する際に便利です。 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ -/* 値1つの場合は角を円にする */ +```css +/* <length> 値 */ +/* 値 1 つの場合は角を円にする */ border-end-end-radius: 10px; border-end-end-radius: 1em; -/* 値2つの場合は角を楕円にする */ +/* 値 2 つの場合は角を楕円にする */ border-end-end-radius: 1em 2em; /* グローバル値 */ border-end-end-radius: inherit; border-end-end-radius: initial; +border-end-end-radius: revert; border-end-end-radius: unset; -</pre> +``` -<p>このプロパティは、要素の block-end と inline-end の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-bottom-right-radius")}} プロパティに対応します。</p> +このプロパティは、要素の block-end と inline-end の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 {{CSSxRef("border-bottom-right-radius")}} プロパティに対応します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> +- `<length-percentage>` + - : 円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> +<h3 id="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS Content -<pre class="brush: css notranslate">div { +```css +div { background-color: rebeccapurple; width: 120px; height: 120px; @@ -74,38 +77,22 @@ border-end-end-radius: unset; padding: 10px; background-color: #fff; border-end-end-radius: 10px; -}</pre> +} +``` -<h4 id="Results" name="Results">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-end-end-radius")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応する物理プロパティ: {{CSSxRef("border-bottom-right-radius")}}</li> - <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> -</ul> +- 対応する物理的プロパティ: {{CSSxRef("border-bottom-right-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/ja/web/css/border-end-start-radius/index.md b/files/ja/web/css/border-end-start-radius/index.md index b22198dec5..48c758f764 100644 --- a/files/ja/web/css/border-end-start-radius/index.md +++ b/files/ja/web/css/border-end-start-radius/index.md @@ -3,66 +3,69 @@ title: border-end-start-radius slug: Web/CSS/border-end-start-radius tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - border-end-start-radius - - 'recipe:css-property' - - writing modes + - recipe:css-property + - 書字方向 +browser-compat: css.properties.border-end-start-radius translation_of: Web/CSS/border-end-start-radius --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>border-end-start-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p> +**`border-end-start-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)に依存せずにスタイルを構築する際に便利です。 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ -/* 値1つの場合は角を円にする */ +```css +/* <length> 値 */ +/* 値 1 つの場合は角を円にする */ border-end-start-radius: 10px; border-end-start-radius: 1em; -/* 値2つの場合は角を楕円にする */ +/* 値 2 つの場合は角を楕円にする */ border-end-start-radius: 1em 2em; /* グローバル値 */ border-end-start-radius: inherit; border-end-start-radius: initial; +border-end-start-radius: revert; border-end-start-radius: unset; -</pre> +``` -<p>このプロパティは、要素の block-end と inline-start の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-bottom-left-radius")}} プロパティに対応します。</p> +このプロパティは、要素の block-end と inline-start の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 {{CSSxRef("border-bottom-left-radius")}} プロパティに対応します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> +- `<length-percentage>` + - : 円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> +<h3 id="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: rebeccapurple; width: 120px; height: 120px; @@ -74,38 +77,22 @@ border-end-start-radius: unset; padding: 10px; background-color: #fff; border-end-start-radius: 10px; -}</pre> +} +``` -<h4 id="Results" name="Results">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-end-start-radius")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応する物理プロパティ: {{CSSxRef("border-top-right-radius")}}</li> - <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> -</ul> +- 対応する物理的プロパティ: {{CSSxRef("border-top-right-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/ja/web/css/border-inline-color/index.md b/files/ja/web/css/border-inline-color/index.md index 5b4e31f062..5eccfb5107 100644 --- a/files/ja/web/css/border-inline-color/index.md +++ b/files/ja/web/css/border-inline-color/index.md @@ -3,17 +3,17 @@ title: border-inline-color slug: Web/CSS/border-inline-color tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.border-inline-color translation_of: Web/CSS/border-inline-color --- {{CSSRef}} -**`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-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")}} で定義された値によって決まります。 {{EmbedInteractiveExample("pages/css/border-inline-color.html")}} 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 41f6bcaa64..70f0debc90 100644 --- a/files/ja/web/css/border-inline-end-color/index.md +++ b/files/ja/web/css/border-inline-end-color/index.md @@ -3,10 +3,10 @@ title: border-inline-end-color slug: Web/CSS/border-inline-end-color tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-color - border-inline-end @@ -17,7 +17,7 @@ translation_of: Web/CSS/border-inline-end-color --- {{CSSRef}} -**`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")}} で定義された値によって決まります。 +**`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")}} @@ -89,5 +89,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応付けられます +- このプロパティは {{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 7f11da9519..be094036a4 100644 --- a/files/ja/web/css/border-inline-end-style/index.md +++ b/files/ja/web/css/border-inline-end-style/index.md @@ -3,10 +3,10 @@ title: border-inline-end-style slug: Web/CSS/border-inline-end-style tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-end - border-inline-end-style @@ -17,7 +17,7 @@ translation_of: Web/CSS/border-inline-end-style --- {{CSSRef}} -**`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")}} で定義された値によって決まります。 +**`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")}} @@ -93,5 +93,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応付けられます +- このプロパティは {{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 aeba051814..8224178281 100644 --- a/files/ja/web/css/border-inline-end-width/index.md +++ b/files/ja/web/css/border-inline-end-width/index.md @@ -3,10 +3,10 @@ title: border-inline-end-width slug: Web/CSS/border-inline-end-width tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-end - border-inline-end-width @@ -17,7 +17,7 @@ translation_of: Web/CSS/border-inline-end-width --- {{CSSRef}} -**`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")}} で定義された値によって決まります。 +**`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")}} @@ -92,5 +92,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応付けられます +- このプロパティは {{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 4a7c6b472f..981cc6197e 100644 --- a/files/ja/web/css/border-inline-end/index.md +++ b/files/ja/web/css/border-inline-end/index.md @@ -3,10 +3,10 @@ title: border-inline-end slug: Web/CSS/border-inline-end tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-end - border-inline-end-color @@ -44,7 +44,7 @@ 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")}} で定義された値によって決まります。 +`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")}} が要素の他の境界を定義します。 @@ -104,5 +104,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} のうちの 1 つに対応付けられます。 +- このプロパティは {{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 9aa6b27a45..722fa716a0 100644 --- a/files/ja/web/css/border-inline-start-color/index.md +++ b/files/ja/web/css/border-inline-start-color/index.md @@ -3,10 +3,10 @@ title: border-inline-start-color slug: Web/CSS/border-inline-start-color tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-color - border-inline-start @@ -17,7 +17,7 @@ translation_of: Web/CSS/border-inline-start-color --- {{CSSRef}} -**`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")}} で定義された値によって決まります。 +**`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")}} @@ -87,5 +87,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応付けられます +- このプロパティは {{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 b1d3403c5f..574e3cd05d 100644 --- a/files/ja/web/css/border-inline-start-style/index.md +++ b/files/ja/web/css/border-inline-start-style/index.md @@ -3,10 +3,10 @@ title: border-inline-start-style slug: Web/CSS/border-inline-start-style tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-start - border-inline-start-style @@ -17,7 +17,7 @@ translation_of: Web/CSS/border-inline-start-style --- {{CSSRef}} -**`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")}} で定義された値によって決まります。 +**`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")}} @@ -86,5 +86,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応付けられます +- このプロパティは {{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 9fbd2eaefe..a79e349db0 100644 --- a/files/ja/web/css/border-inline-start-width/index.md +++ b/files/ja/web/css/border-inline-start-width/index.md @@ -3,10 +3,10 @@ title: border-inline-start-width slug: Web/CSS/border-inline-start-width tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-start - border-inline-start-width @@ -17,7 +17,7 @@ translation_of: Web/CSS/border-inline-start-width --- {{CSSRef}} -**`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")}} で定義された値によって決まります。 +**`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")}} @@ -88,5 +88,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応付けられます +- このプロパティは {{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 d723df5379..172220dedb 100644 --- a/files/ja/web/css/border-inline-start/index.md +++ b/files/ja/web/css/border-inline-start/index.md @@ -3,10 +3,10 @@ title: border-inline-start slug: Web/CSS/border-inline-start tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - border-inline - border-inline-start - border-inline-start-color @@ -44,7 +44,7 @@ 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-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")}} が要素の他の境界を定義します。 @@ -104,5 +104,5 @@ div { ## 関連情報 -- このプロパティは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} のうちの 1 つに対応付けられます。 +- このプロパティは {{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 2e7971f0c6..3a3972c1f2 100644 --- a/files/ja/web/css/border-inline-style/index.md +++ b/files/ja/web/css/border-inline-style/index.md @@ -3,17 +3,17 @@ title: border-inline-style slug: Web/CSS/border-inline-style tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.border-inline-style translation_of: Web/CSS/border-inline-style --- {{CSSRef}} -**`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-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")}} で定義された値によって決まります。 {{EmbedInteractiveExample("pages/css/border-inline-style.html")}} diff --git a/files/ja/web/css/border-inline-width/index.md b/files/ja/web/css/border-inline-width/index.md index df056a6d0c..666f3bf977 100644 --- a/files/ja/web/css/border-inline-width/index.md +++ b/files/ja/web/css/border-inline-width/index.md @@ -3,17 +3,17 @@ title: border-inline-width slug: Web/CSS/border-inline-width tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.border-inline-width translation_of: Web/CSS/border-inline-width --- {{CSSRef}} -**`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-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")}} で定義された値によって決まります。 {{EmbedInteractiveExample("pages/css/border-inline-width.html")}} diff --git a/files/ja/web/css/border-inline/index.md b/files/ja/web/css/border-inline/index.md index 61ce9af75e..d25fac3c1d 100644 --- a/files/ja/web/css/border-inline/index.md +++ b/files/ja/web/css/border-inline/index.md @@ -3,21 +3,21 @@ title: border-inline slug: Web/CSS/border-inline tags: - CSS - - CSS Logical Property + - CSS 論理的プロパティ - CSS プロパティ - 実験的 - - Reference + - リファレンス - recipe:css-shorthand-property browser-compat: css.properties.border-inline translation_of: Web/CSS/border-inline --- {{CSSRef}} -The **`border-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 +**`border-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 {{EmbedInteractiveExample("pages/css/border-inline.html")}} -`border-inline` の割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。 +`border-inline` の割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} に設定された値に応じて対応づけられます。 他の方向の境界については、 {{cssxref("border-block")}} によって、 {{cssxref("border-block-start")}} と {{cssxref("border-block-end")}} の両方を設定することができます。 @@ -103,5 +103,5 @@ div { ## 関連情報 -- このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} の何れかに対応付けられます。 +- このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} の何れかに対応づけられます。 - {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} 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 --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>border-start-end-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p> +**`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)に依存せずにスタイルを構築する際に便利です。 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ -/* 値1つの場合は角を円にする */ +```css +/* <length> 値 */ +/* 値 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; -</pre> +``` -<p>このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-top-right-radius")}} プロパティに対応します。</p> +このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 {{CSSxRef("border-top-right-radius")}} プロパティに対応します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> +- `<length-percentage>` + - : 円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> +<h3 id="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">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; -}</pre> +} +``` -<h4 id="Results" name="Results">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-start-end-radius")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応する物理プロパティ: {{CSSxRef("border-bottom-left-radius")}}</li> - <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> -</ul> +- 対応する物理的プロパティ: {{CSSxRef("border-bottom-left-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/ja/web/css/border-start-start-radius/index.md b/files/ja/web/css/border-start-start-radius/index.md index 90d99c3411..224d130a07 100644 --- a/files/ja/web/css/border-start-start-radius/index.md +++ b/files/ja/web/css/border-start-start-radius/index.md @@ -3,66 +3,69 @@ title: border-start-start-radius slug: Web/CSS/border-start-start-radius tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - border-start-start-radius - - 'recipe:css-property' - - writing modes + - recipe:css-property + - 書字方向 +browser-compat: css.properties.border-start-start-radius translation_of: Web/CSS/border-start-start-radius --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>border-start-start-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p> +**`border-start-start-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)に依存せずにスタイルを構築する際に便利です。 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ -/* 値1つの場合は角を円にする */ +```css +/* <length> 値 */ +/* 値 1 つの場合は角を円にする */ border-start-start-radius: 10px; border-start-start-radius: 1em; -/* 値2つの場合は角を楕円にする */ +/* 値 2 つの場合は角を楕円にする */ border-start-start-radius: 1em 2em; /* グローバル値 */ border-start-start-radius: inherit; border-start-start-radius: initial; +border-start-start-radius: revert; border-start-start-radius: unset; -</pre> +``` -<p>このプロパティは、要素の block-start と inline-start の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-top-left-radius")}} プロパティに対応します。</p> +このプロパティは、要素の block-start と inline-start の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 {{CSSxRef("border-top-left-radius")}} プロパティに対応します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> +- `<length-percentage>` + - : 円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> +<h3 id="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: rebeccapurple; width: 120px; height: 120px; @@ -74,38 +77,22 @@ border-start-start-radius: unset; padding: 10px; background-color: #fff; border-start-start-radius: 10px; -}</pre> +} +``` -<h4 id="Results" name="Results">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-start-start-radius")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応する物理プロパティ: {{CSSxRef("border-top-left-radius")}}</li> - <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> -</ul> +- 対応する物理的プロパティ: {{CSSxRef("border-top-left-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/ja/web/css/margin-block-end/index.md b/files/ja/web/css/margin-block-end/index.md index a5ce96938f..a7eddd097b 100644 --- a/files/ja/web/css/margin-block-end/index.md +++ b/files/ja/web/css/margin-block-end/index.md @@ -3,28 +3,27 @@ title: margin-block-end slug: Web/CSS/margin-block-end tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental + - CSS プロパティ + - 実験的 - NeedsContent - - Reference + - リファレンス - margin-block - margin-block-end + - recipe:css-property +browser-compat: css.properties.margin-block-end translation_of: Web/CSS/margin-block-end --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>margin-block-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p> +**`margin-block-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。 -<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div> +{{EmbedInteractiveExample("pages/css/margin-block-end.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ margin-block-end: 10px; /* 絶対的な長さ */ margin-block-end: 1em; /* テキストの大きさに対する相対値 */ margin-block-end: 5%; /* 直近のブロックコンテナーの大きさに対する相対値 */ @@ -35,74 +34,67 @@ margin-block-end: auto; /* グローバル値 */ margin-block-end: inherit; margin-block-end: initial; +margin-block-end: revert; margin-block-end: unset; -</pre> +``` + +これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。 -<p>これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。</p> +### 値 -<p>{{cssinfo}}</p> +`margin-block-end` プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<p><code>margin-block-end</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Setting_block_end_margin">ブロック方向の末尾のマージンを設定</h3> -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<pre class="brush: css">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; height: 120px; } .exampleText { - writing-mode: vertical-lr; + writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.margin-block-end")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_block_end_margin", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 対応づけ先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/margin-block-start/index.md b/files/ja/web/css/margin-block-start/index.md index 77303e2d5a..dcdd27b58f 100644 --- a/files/ja/web/css/margin-block-start/index.md +++ b/files/ja/web/css/margin-block-start/index.md @@ -3,28 +3,27 @@ title: margin-block-start slug: Web/CSS/margin-block-start tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental + - CSS プロパティ + - 実験的 - NeedsContent - - Reference + - リファレンス - margin-block - margin-block-start + - recipe:css-property +browser-compat: css.properties.margin-block-start translation_of: Web/CSS/margin-block-start --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>margin-block-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p> +**`margin-block-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。 -<div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div> +{{EmbedInteractiveExample("pages/css/margin-block-start.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ margin-block-start: 10px; /* 絶対的な長さ */ margin-block-start: 1em; /* テキストの大きさに対する相対値 */ margin-block-start: 5%; /* 直近のブロックコンテナーの大きさに対する相対値 */ @@ -35,35 +34,42 @@ margin-block-start: auto; /* グローバル値 */ margin-block-start: inherit; margin-block-start: initial; +margin-block-start: revert; margin-block-start: unset; -</pre> +``` + +これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。 -<p>これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。</p> +### 値 -<p>{{cssinfo}}</p> +`margin-block-start` プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<p><code>margin-block-start</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Setting_block_start_margin">ブロック方向の先頭のマージンの設定</h3> -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<pre class="brush: css">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -73,36 +79,22 @@ margin-block-start: unset; writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.margin-block-start")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_block_start_margin", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 対応づけ先の物理的プロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/margin-block/index.md b/files/ja/web/css/margin-block/index.md index c68a537ebe..c27b0155a0 100644 --- a/files/ja/web/css/margin-block/index.md +++ b/files/ja/web/css/margin-block/index.md @@ -3,23 +3,21 @@ title: margin-block slug: Web/CSS/margin-block tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - margin-block - - margin-block-end - - margin-block-start - - 一括指定プロパティ + - recipe:css-shorthand-property +browser-compat: css.properties.margin-block translation_of: Web/CSS/margin-block --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p>The <strong><code>margin-block</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、論理的なブロックの先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。</p> +The **`margin-block`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、論理的なブロックの先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。 -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ margin-block: 10px 20px; /* 絶対的な長さ */ margin-block: 1em 2em; /* テキストの大きさに対する相対値 */ margin-block: 5% 2%; /* 直近のブロックコンテナーの大きさに対する相対値 */ @@ -31,76 +29,82 @@ margin-block: auto; /* グローバル値 */ margin-block: inherit; margin-block: initial; +margin-block: revert; margin-block: unset; -</pre> +``` -<p>これらの値は、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。</p> +このプロパティは、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。 -<p>値は {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} で個別に設定することができます。インライン方向のプロパティは {{CSSxRef("margin-inline")}} で、 {{CSSxRef("margin-inline-start")}} と {{CSSxRef("margin-inline-end")}} を設定します。</p> +## 構成要素のプロパティ -<h2 id="Syntax" name="Syntax">構文</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<h3 id="Values" name="Values">値</h3> +- [`margin-block-end`](/ja/docs/Web/CSS/margin-block-end) +- [`margin-block-start`](/ja/docs/Web/CSS/margin-block-start) -<p><code>margin-block</code> プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。</p> +## 構文 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +### 値 -{{CSSSyntax}} +`margin-block` プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。 -<h2 id="Example" name="Example">例</h2> +## 公式定義 -<h3 id="HTML">HTML</h3> +{{cssinfo}} + +## 形式文法 + +{{CSSSyntax}} -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +## 例 -<h3 id="CSS">CSS</h3> +<h3 id="Setting_block_start_and_end_margins">ブロック方向の先頭と末尾のマージンを設定</h3> -<pre class="brush: css">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; - height: 120px; + height: auto; + border: 1px solid green; } -.exampleText { - writing-mode: vertical-rl; +p { + margin: 0; margin-block: 20px 40px; - background-color: #c8c800; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.margin-block")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}}</li> - <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> -</ul> + background-color: tan; +} + +.verticalExample { + writing-mode: vertical-rl; +} +``` + +#### HTML + +```html +<div> + <p>Example text</p> +</div> +<div class="verticalExample"> + <p>Example text</p> +</div> +``` + +#### 結果 + +{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/ja/web/css/margin-inline-end/index.md b/files/ja/web/css/margin-inline-end/index.md index bfbcba1187..6f90efed5e 100644 --- a/files/ja/web/css/margin-inline-end/index.md +++ b/files/ja/web/css/margin-inline-end/index.md @@ -3,28 +3,27 @@ title: margin-inline-end slug: Web/CSS/margin-inline-end tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental + - CSS プロパティ + - 実験的 - NeedsContent - - Reference + - リファレンス - margin-inline - margin-inline-end + - recipe:css-property +browser-compat: css.properties.margin-inline-end translation_of: Web/CSS/margin-inline-end --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>margin-inline-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`margin-inline-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のインライン方向の論理的な末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div> +{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ margin-inline-end: 10px; /* 絶対的な長さ */ margin-inline-end: 1em; /* テキストの大きさに対する相対値 */ margin-inline-end: 5%; /* 直近のブロックコンテナーの大きさに対する相対値 */ @@ -35,33 +34,40 @@ margin-inline-end: auto; /* グローバル値 */ margin-inline-end: inherit; margin-inline-end: initial; +margin-inline-end: revert; margin-inline-end: unset; -</pre> +``` + +関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}} があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}} があります。</p> +### 値 -<p>{{cssinfo}}</p> +`margin-inline-end` プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<p><code>margin-inline-end</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Setting_inline_end_margin">インライン方向の末尾側のマージンの設定</h3> -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<pre class="brush: css">div { +#### CSS + +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -71,37 +77,23 @@ margin-inline-end: unset; writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c800; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.margin-inline-end")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("margin-inline-start")}}</li> - <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_inline_end_margin", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("margin-inline-start")}} +- 対応づけ先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/margin-inline-start/index.md b/files/ja/web/css/margin-inline-start/index.md index 332286161d..4b1ee3f93a 100644 --- a/files/ja/web/css/margin-inline-start/index.md +++ b/files/ja/web/css/margin-inline-start/index.md @@ -3,27 +3,26 @@ title: margin-inline-start slug: Web/CSS/margin-inline-start tags: - CSS - - CSS Logical Property - - CSS Property + - CSS 論理的プロパティ - CSS プロパティ - - CSS 物理的プロパティ - - Experimental - - Reference + - 実験的 + - リファレンス - margin-inline - margin-inline-start + - recipe:css-property +browser-compat: css.properties.margin-inline-start translation_of: Web/CSS/margin-inline-start --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p><strong><code>margin-inline-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +**`margin-inline-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。 -<div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div> +{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ margin-inline-start: 10px; /* 絶対的な長さ */ margin-inline-start: 1em; /* テキストの大きさに対する相対値 */ margin-inline-start: 5%; /* 直近のブロックコンテナーの大きさに対する相対値 */ @@ -33,32 +32,41 @@ margin-inline-start: auto; /* グローバル値 */ margin-inline-start: inherit; -</pre> +margin-inline-start: initial; +margin-inline-start: revert; +margin-inline-start: unset; +``` + +関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-end")}} があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-end")}} があります。</p> +### 値 -<p>{{cssinfo}}</p> +`margin-inline-start` プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<p><code>margin-inline-start</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Setting_inline_start_margin">インライン方向の先頭側のマージンの設定</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -68,37 +76,23 @@ margin-inline-start: inherit; writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.margin-inline-start")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("margin-inline-end")}}</li> - <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_inline_start_margin", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("margin-inline-end")}} +- 対応づけ先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/margin-inline/index.md b/files/ja/web/css/margin-inline/index.md index 67f51f34b8..4e48c141c2 100644 --- a/files/ja/web/css/margin-inline/index.md +++ b/files/ja/web/css/margin-inline/index.md @@ -3,22 +3,21 @@ title: margin-inline slug: Web/CSS/margin-inline tags: - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - CSS 論理的プロパティ - - Experimental - - Reference + - CSS プロパティ + - 実験的 + - リファレンス - margin-inline - - margin-inline-end - - margin-inline-start + - recipe:css-shorthand-property +browser-compat: css.properties.margin-inline translation_of: Web/CSS/margin-inline --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p>The <strong><code>margin-inline</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。</p> +The **`margin-inline`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。 -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ margin-inline: 10px 20px; /* 絶対的な長さ */ margin-inline: 1em 2em; /* テキストの大きさに対する相対値 */ margin-inline: 5% 2%; /* 直近のブロックコンテナーの大きさに対する相対値 */ @@ -30,76 +29,84 @@ margin-inline: auto; /* グローバル値 */ margin-inline: inherit; margin-inline: initial; +margin-inline: revert; margin-inline: unset; -</pre> +``` -<p>これらの値は、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。</p> +このプロパティは、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。 -<p>値は {{CSSxRef("margin-inline-start")}} と {{CSSxRef("margin-inline-end")}} で個別に設定することができます。ブロック方向のプロパティは {{CSSxRef("margin-block")}} で、 {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} を設定します。</p> +## 構成要素のプロパティ -<h2 id="Syntax" name="Syntax">構文</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<h3 id="Values" name="Values">値</h3> +- [`margin-inline-start`](/ja/docs/Web/CSS/margin-inline-start) +- [`margin-inline-end`](/ja/docs/Web/CSS/margin-inline-end) -<p><code>margin-inline</code> プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。</p> +2 つの値を指定した場合は、1 つ目の値で先頭、2 つ目の値で末尾を設定します。1 つの値を指定した場合は、両方のプロパティに同じ値を設定します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 構文 -{{CSSSyntax}} +### 値 + +`margin-inline` プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。 + +## 公式定義 + +{{cssinfo}} -<h2 id="Example" name="Example">例</h2> +## 形式文法 -<h3 id="HTML">HTML</h3> +{{CSSSyntax}} + +## 例 -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +<h3 id="Setting_inline_start_and_end_margins">インライン方向の先頭と末尾のマージンの設定</h3> -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { background-color: yellow; width: 120px; - height: 120px; + height: auto; + border: 1px solid green; } -.exampleText { - writing-mode: vertical-rl; +p { + margin: 0; margin-inline: 20px 40px; - background-color: #c8c800; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.margin-inline")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}}</li> - <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> -</ul> + background-color: tan; +} + +.verticalExample { + writing-mode: vertical-rl; +} +``` + +#### HTML + +```html +<div> + <p>Example text</p> +</div> +<div class="verticalExample"> + <p>Example text</p> +</div> +``` + +#### 結果 + +{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 240)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/ja/web/css/padding-block-end/index.md b/files/ja/web/css/padding-block-end/index.md index d4b9eaebce..9d6ba44e61 100644 --- a/files/ja/web/css/padding-block-end/index.md +++ b/files/ja/web/css/padding-block-end/index.md @@ -3,72 +3,76 @@ title: padding-block-end slug: Web/CSS/padding-block-end tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - padding-block - padding-block-end - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.padding-block-end translation_of: Web/CSS/padding-block-end --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>padding-block-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のブロック方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p> +**`padding-block-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のブロック方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。 -<div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div> +{{EmbedInteractiveExample("pages/css/padding-block-end.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ padding-block-end: 10px; /* 絶対的な長さ */ padding-block-end: 1em; /* テキストの大きさに対する相対値 */ -/* パーセント値 */ +/* <percentage> 値 */ padding-block-end: 5%; /* ブロックコンテナーの幅に対する割合のパディング */ /* グローバル値 */ padding-block-end: inherit; padding-block-end: initial; +padding-block-end: revert; padding-block-end: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> +``` -<p><code>padding-block-end</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p> +### 値 -<h2 id="Description" name="Description">解説</h2> +- {{cssxref("<length>")}} + - : パディングの寸法を固定値で指定します。負の値は指定できません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法をパーセント値で表したもので、含まれるブロックの _inline-size_ に対する相対値です。負の値は指定できません。 -<p>これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +## 解説 +`padding-block-end` プロパティは、{{cssxref("padding-top")}} プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に依存します。したがって、{{cssxref("padding-bottom")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} の何れかに対応づけられる可能性があります。 +関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。</p> +## 公式定義 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +{{cssinfo}} -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_block_end_padding_for_vertical_text" name="Setting_block_end_padding_for_vertical_text">縦書きテキストにおけるブロック方向の末尾のパディングの設定</h3> +<h3 id="Setting_block_end_padding_for_vertical_text">縦書きテキストにおけるブロック方向の末尾のパディングの設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -78,38 +82,22 @@ padding-block-end: unset; writing-mode: vertical-lr; padding-block-end: 20px; background-color: #C8C800; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Setting_block_end_padding_for_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Setting_block_end_padding_for_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.padding-block-end")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- 対応づけ先の物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/padding-block-start/index.md b/files/ja/web/css/padding-block-start/index.md index 4e83390754..04154e4c3a 100644 --- a/files/ja/web/css/padding-block-start/index.md +++ b/files/ja/web/css/padding-block-start/index.md @@ -3,70 +3,76 @@ title: padding-block-start slug: Web/CSS/padding-block-start tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - padding-block - padding-block-start - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.padding-block-start translation_of: Web/CSS/padding-block-start --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>padding-block-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のブロック方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p> +**`padding-block-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のブロック方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。 -<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div> +{{EmbedInteractiveExample("pages/css/padding-block-start.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ padding-block-start: 10px; /* 絶対的な長さ */ padding-block-start: 1em; /* テキストの大きさに対する相対値 */ -/* パーセント値 */ +/* <percentage> 値 */ padding-block-start: 5%; /* ブロックコンテナーの幅に対する割合のパディング */ /* グローバル値 */ padding-block-start: inherit; padding-block-start: initial; +padding-block-start: revert; padding-block-start: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<p><code>padding-block-start</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p> +- {{cssxref("<length>")}} + - : パディングの寸法を固定値で指定します。負の値は指定できません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法をパーセント値で表したもので、含まれるブロックの _inline-size_ に対する相対値です。負の値は指定できません。 -<h2 id="Description" name="Description">解説</h2> +## 解説 -<p>これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +`padding-block-start` プロパティは、{{cssxref("padding-top")}} プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に依存します。したがって、{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} の何れかに対応づけられる可能性があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。</p> +関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="Setting_block_start_padding_for_vertical_text" name="Setting_block_start_padding_for_vertical_text">縦書きテキストにおけるブロック方向の先頭のパディングの設定</h3> +<h3 id="Setting_block_start_padding_for_vertical_text">縦書きテキストにおけるブロック方向の先頭のパディングの設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -76,38 +82,22 @@ padding-block-start: unset; writing-mode: vertical-lr; padding-block-start: 20px; background-color: #C8C800; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Setting_block_start_padding_for_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Setting_block_start_padding_for_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.padding-block-start")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- 対応づけ先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/padding-block/index.md b/files/ja/web/css/padding-block/index.md index 521456f937..f4a6d527b1 100644 --- a/files/ja/web/css/padding-block/index.md +++ b/files/ja/web/css/padding-block/index.md @@ -4,68 +4,73 @@ slug: Web/CSS/padding-block tags: - CSS - padding-block - - 'recipe:css-shorthand-property' + - recipe:css-shorthand-property +browser-compat: css.properties.padding-block translation_of: Web/CSS/padding-block --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>padding-block</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。</p> +**`padding-block`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- {{cssxref("padding-block-end")}} +- {{cssxref("padding-block-start")}} + +## 構文 + +```css +/* <length> 値 */ padding-block: 10px 20px; /* 絶対的な長さ */ padding-block: 1em 2em; /* テキストの大きさに対する相対値 */ padding-block: 10px; /* 先頭と末尾の両方を設定 */ -/* <percentage> 値 */ +/* <percentage> 値 */ padding-block: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */ /* グローバル値 */ padding-block: inherit; padding-block: initial; +padding-block: revert; padding-block: unset; -</pre> +``` -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +`padding-block` プロパティでは、1 つまたは 2 つの値を指定できます。1 つの値が指定された場合は、 {{cssxref("padding-block-start")}} と {{cssxref("padding-block-end")}} の両方の値として使用されます。2 つの値が指定された場合、1 つ目の値が {{cssxref("padding-block-start")}} に、2 つ目の値が {{cssxref("padding-block-end")}} に使用されます。 -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +### 値 -<ul> - <li>{{cssxref("padding-block-end")}}</li> - <li>{{cssxref("padding-block-start")}}</li> -</ul> +`padding-block` プロパティは、 {{CSSxRef("padding-left")}} プロパティと同じ値を取ります。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 解説 -<h3 id="Values" name="Values">値</h3> +これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -<p><code>padding-block</code> プロパティは、 {{CSSxRef("padding-left")}} プロパティと同じ値を取ります。</p> +## 公式定義 -<h2 id="Description" name="Description">解説</h2> +{{cssinfo}} -<p>これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_block_padding_for_vertical_text" name="Setting_block_padding_for_vertical_text">縦書きテキストにおけるブロック方向のパディングの設定</h3> +<h3 id="Setting_block_padding_for_vertical_text">縦書きテキストにおけるブロック方向のパディングの設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -75,38 +80,22 @@ padding-block: unset; writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Setting_block_padding_for_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Setting_block_padding_for_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.padding-block")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- 対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/padding-inline-end/index.md b/files/ja/web/css/padding-inline-end/index.md index 20ccbeafe5..2c52efb204 100644 --- a/files/ja/web/css/padding-inline-end/index.md +++ b/files/ja/web/css/padding-inline-end/index.md @@ -3,70 +3,76 @@ title: padding-inline-end slug: Web/CSS/padding-inline-end tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - padding-inline - padding-inline-end - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.padding-inline-end translation_of: Web/CSS/padding-inline-end --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>padding-inline-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p> +**`padding-inline-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のインライン方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。 -<div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div> +{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ padding-inline-end: 10px; /* 絶対的な長さ */ padding-inline-end: 1em; /* テキストの大きさに対する相対値 */ -/* <percentage> 値 */ +/* <percentage> 値 */ padding-inline-end: 5%; /* ブロックコンテナーの幅に対する割合のパディング */ /* グローバル値 */ padding-inline-end: inherit; padding-inline-end: initial; +padding-inline-end: revert; padding-inline-end: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<p><code>padding-inline-end</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p> +- {{cssxref("<length>")}} + - : パディングの寸法を固定値で指定します。負の値は指定できません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法をパーセント値で表したもので、含まれるブロックの _inline-size_ に対する相対値です。負の値は指定できません。 -<h2 id="Description" name="Description">解説</h2> +## 解説 -これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。 +`padding-inline-end` プロパティは、{{cssxref("padding-top")}} プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に依存します。したがって、{{cssxref("padding-bottom")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} の何れかに対応づけられる可能性があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} があります。</p> +関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} があります。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_inline_end_padding_for_vertical_text" name="Setting_inline_end_padding_for_vertical_text">縦書きテキストにおけるインライン方向の末尾のパディングの設定</h3> +<h3 id="Setting_inline_end_padding_for_vertical_text">縦書きテキストにおけるインライン方向の末尾のパディングの設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -76,38 +82,22 @@ padding-inline-end: unset; writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #C8C800; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Setting_inline_end_padding_for_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Setting_inline_end_padding_for_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.padding-inline-end")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- 対応づけ先の物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/padding-inline-start/index.md b/files/ja/web/css/padding-inline-start/index.md index 92611c4b91..db8aa4951f 100644 --- a/files/ja/web/css/padding-inline-start/index.md +++ b/files/ja/web/css/padding-inline-start/index.md @@ -3,70 +3,76 @@ title: padding-inline-start slug: Web/CSS/padding-inline-start tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス - padding-inline - padding-inline-start - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.padding-inline-start translation_of: Web/CSS/padding-inline-start --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>padding-inline-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p> +**`padding-inline-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のインライン方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。 -<div>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</div> +{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ padding-inline-start: 10px; /* 絶対的な長さ */ padding-inline-start: 1em; /* テキストの大きさに対する相対値 */ -/* パーセント値 */ +/* <percentage> 値 */ padding-inline-start: 5%; /* ブロックコンテナーの幅に対する割合のパディング */ /* グローバル値 */ padding-inline-start: inherit; padding-inline-start: initial; +padding-inline-start: revert; padding-inline-start: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<p><code>padding-inline-start</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p> +- {{cssxref("<length>")}} + - : パディングの寸法を固定値で指定します。負の値は指定できません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法をパーセント値で表したもので、含まれるブロックの _inline-size_ に対する相対値です。負の値は指定できません。 -<h2 id="Description" name="Description">解説</h2> +## 解説 -<p>これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> +`padding-inline-start` プロパティは、{{cssxref("padding-top")}} プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に依存します。したがって、{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} の何れかに対応づけられる可能性があります。 -<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-end")}} があります。</p> +関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-end")}} があります。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="Setting_inline_start_padding_for_vertical_text" name="Setting_inline_start_padding_for_vertical_text">縦書きテキストにおけるインライン方向の先頭のパディングの設定</h3> +<h3 id="Setting_inline_start_padding_for_vertical_text">縦書きテキストにおけるインライン方向の先頭のパディングの設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -76,38 +82,22 @@ padding-inline-start: unset; writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #C8C800; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Setting_inline_start_padding_for_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Setting_inline_start_padding_for_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.padding-inline-start")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- 対応づけ先の物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/padding-inline/index.md b/files/ja/web/css/padding-inline/index.md index d720e2dda6..b95957e579 100644 --- a/files/ja/web/css/padding-inline/index.md +++ b/files/ja/web/css/padding-inline/index.md @@ -3,69 +3,76 @@ title: padding-inline slug: Web/CSS/padding-inline tags: - CSS - - padding-inline - - 'recipe:css-shorthand-property' + - recipe:css-shorthand-property +browser-compat: css.properties.padding-inline translation_of: Web/CSS/padding-inline --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>padding-inline</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、論理的なインライン方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。</p> +**`padding-inline`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、論理的なインライン方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`padding-inline-end`](/ja/docs/Web/CSS/padding-inline-end) +- [`padding-inline-start`](/ja/docs/Web/CSS/padding-inline-start) + +## 構文 + +```css +/* <length> 値 */ padding-inline: 10px 20px; /* 絶対的な長さ */ padding-inline: 1em 2em; /* テキストの大きさに対する相対値 */ padding-inline: 10px; /* 先頭と末尾の両方を設定 */ -/* <percentage> 値 */ -padding-block: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */ +/* <percentage> 値 */ +padding-inline: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */ /* グローバル値 */ padding-inline: inherit; padding-inline: initial; +padding-inline: revert; padding-inline: unset; -</pre> +``` -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +`padding-inline` プロパティでは、1 つまたは 2 つの値を指定できます。1 つの値が指定された場合は、 {{cssxref("padding-inline-start")}} と {{cssxref("padding-inline-end")}} の両方の値として使用されます。2 つの値が指定された場合、1 つ目の値が {{cssxref("padding-inline-start")}} に、2 つ目の値が {{cssxref("padding-inline-end")}} に使用されます。 -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +### 値 -<ul> - <li>{{cssxref("padding-inline-end")}}</li> - <li>{{cssxref("padding-inline-start")}}</li> -</ul> +- {{cssxref("<length>")}} + - : パディングの寸法を固定値で指定します。負の値は指定できません。 +- {{cssxref("<percentage>")}} + - : パディングの寸法をパーセント値で表したもので、含まれるブロックの _inline-size_ に対する相対値です。負の値は指定できません。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 解説 -<h3 id="Values" name="Values">値</h3> +これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -<p><code>padding-inline</code> プロパティは、 {{CSSxRef("padding-left")}} プロパティと同じ値を取ります。</p> +## 公式定義 -<h2 id="Description" name="Description">解説</h2> +{{cssinfo}} -<p>これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_inline_padding_for_vertical_text" name="Setting_inline_padding_for_vertical_text">縦書きテキストにおけるインライン方向のパディングの設定</h3> +<h3 id="Setting_inline_padding_for_vertical_text">縦書きテキストにおけるインライン方向のパディングの設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="exampleText">Example text</p> -</div> -</pre> +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { background-color: yellow; width: 120px; height: 120px; @@ -75,38 +82,22 @@ padding-inline: unset; writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Setting_inline_padding_for_vertical_text", 140, 140)}}</p> +{{EmbedLiveSample("Setting_inline_padding_for_vertical_text", 140, 140)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.padding-inline")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> +- 対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} |