diff options
Diffstat (limited to 'files/ja/web/css/css_logical_properties')
5 files changed, 785 insertions, 0 deletions
diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/index.html b/files/ja/web/css/css_logical_properties/basic_concepts/index.html new file mode 100644 index 0000000000..e190281ba3 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/basic_concepts/index.html @@ -0,0 +1,77 @@ +--- +title: 論理的プロパティと値の基本概念 +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - 書字方向 + - 概念 +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +<div>{{CSSRef}}</div> + +<p class="summary">「論理的プロパティと値」仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。</p> + +<h2 id="Why_do_we_need_logical_properties" name="Why_do_we_need_logical_properties">なぜ論理的プロパティが必要なのか</h2> + +<p>CSS は従来、画面の物理的な方向に沿って寸法を取っていました。従って、ボックスを {{CSSxRef("width")}} および {{CSSxRef("height")}} を用いて記述したり、アイテムを <code>top</code> および <code>left</code> で配置したり、 left で浮動させたり、境界、マージン、パディングを <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> で割り当てたりします。<a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a>はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。 — 例えば <code>start</code> と <code>end</code> は <code>left</code> と <code>right</code>/<code>top</code> と <code>bottom</code> に対応します。</p> + +<p>なぜこれらの対応付けが必要なのかは以下の通りです。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために {{CSSxRef("align-self")}} および {{CSSxRef("justify-self")}} を使用していたとします。これらのプロパティはフローに相対的です。 — <code>justify-self: start</code> はインライン方向の始点にアイテムを配置し、 <code>align-self: start</code> はブロック方向の始点にアイテムを配置します。</p> + +<p><img alt="横書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> + +<p>このコンポーネントの書字方向を、 <code>vertical-rl</code> を {{CSSxRef("writing-mode")}} プロパティに設定することで変更すると、配置は同様の方向で動作し続けます。インライン方向は垂直になり、ブロック方向は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。</p> + +<p><img alt="縦書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> + +<p><code>width</code> プロパティの代わりに論理的プロパティである {{CSSxRef("inline-size")}} を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。</p> + +<p><img alt="縦書きモードでのグリッドレイアウト" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p> + +<p>以下のライブデモを試してみることができます。 <code>.box</code> の <code>writing-mode</code> を <code>vertical-rl</code> から <code>horizontal-tb</code> へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p> + +<p>When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.</p> + +<h2 id="Block_and_inline_dimensions" name="Block_and_inline_dimensions">ブロック方向とインライン方向</h2> + +<p>A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of <code>block</code> and <code>inline</code> rather than <code>right</code> and <code>left</code>/<code>top</code> and <code>bottom</code> when aligning items.</p> + +<p>The <code>inline</code> dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is <em>horizontal</em>. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now <em>vertical</em>, as lines in that writing mode run vertically.</p> + +<p>The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.</p> + +<p>The below diagram shows the inline and block directions in a horizontal writing mode:</p> + +<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p> + +<p>This diagram shows block and inline in a vertical writing mode:</p> + +<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p> + +<h2 id="Browser_support" name="Browser_support">ブラウザーの互換性</h2> + +<p>Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example {{CSSxRef("inline-size")}} for {{CSSxRef("width")}} or {{CSSxRef("margin-inline-start")}} rather than {{CSSxRef("margin-left")}}. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the <a href="/ja/docs/Web/CSS/CSS_Logical_Properties#Reference">reference here on MDN</a> you will see that Edge is the only modern browser currently missing these.</p> + +<p>There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be {{CSSxRef("margin-block")}}, which is a shorthand setting for {{CSSxRef("margin-block-start")}} and {{CSSxRef("margin-block-end")}}. These currently have no browser support.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the {{CSSxRef("margin")}} property. We would need some kind of modifier if we were to reuse <code>margin</code> for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p> +</div> + +<h3 id="Testing_for_browser_support" name="Testing_for_browser_support">ブラウザーの互換性のテスト</h3> + +<p>You can test for support of logical properties and values using feature queries. For example you could set a {{CSSxRef("width")}}, test for {{CSSxRef("inline-size")}} and, if it is supported, set the <code>width</code> to <code>auto</code> and the <code>inline-size</code> to the original <code>width</code> value.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスレイアウトのボックス配置</a></li> + <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Understanding Logical Properties and Values</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">書字方向</a></li> +</ul> diff --git a/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html new file mode 100644 index 0000000000..c245570080 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html @@ -0,0 +1,139 @@ +--- +title: 浮動と位置指定の論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - ガイド + - 位置指定 + - 浮動 +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +<div>{{CSSRef}}</div> + +<p class="summary"><ruby><a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a><rp> (</rp><rt>Logical Properties and Values specification</rt><rp>) </rp></ruby>には、 {{cssxref("float")}} および {{cssxref("clear")}} の物理的な値の論理的な対応付けと、<a href="/ja/docs/Web/CSS/CSS_Positioning">位置指定レイアウト</a>で使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。</p> + +<h2 id="Mapped_properties_and_values" name="Mapped_properties_and_values">マッピングされるプロパティと値</h2> + +<p>以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の {{cssxref("writing-mode")}} は、左書きを想定しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">論理的プロパティまたは値</th> + <th scope="col">物理的プロパティまたは値</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("float")}}: inline-start</td> + <td>{{cssxref("float")}}: left</td> + </tr> + <tr> + <td>{{cssxref("float")}}: inline-end</td> + <td>{{cssxref("float")}}: right</td> + </tr> + <tr> + <td>{{cssxref("clear")}}: inline-start</td> + <td>{{cssxref("clear")}}: left</td> + </tr> + <tr> + <td>{{cssxref("clear")}}: inline-end</td> + <td>{{cssxref("clear")}}: right</td> + </tr> + <tr> + <td>{{cssxref("inset-inline-start")}}</td> + <td>{{cssxref("left")}}</td> + </tr> + <tr> + <td>{{cssxref("inset-inline-end")}}</td> + <td>{{cssxref("right")}}</td> + </tr> + <tr> + <td>{{cssxref("inset-block-start")}}</td> + <td>{{cssxref("top")}}</td> + </tr> + <tr> + <td>{{cssxref("inset-block-end")}}</td> + <td>{{cssxref("bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("text-align")}}: start</td> + <td>{{cssxref("text-align")}}: left</td> + </tr> + <tr> + <td>{{cssxref("text-align")}}: end</td> + <td>{{cssxref("text-align")}}: right</td> + </tr> + </tbody> +</table> + +<p>これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは {{cssxref("inset")}} プロパティを除いて物理的なプロパティに対応付けられていません。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">論理的プロパティ</th> + <th scope="col">目的</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("inset-inline")}}</td> + <td>上記のインライン方向における両方の inset 値を同時に設定します。</td> + </tr> + <tr> + <td>{{cssxref("inset-block")}}</td> + <td>上記のブロック方向における両方の inset 値を同時に設定します。</td> + </tr> + <tr> + <td>{{cssxref("inset")}}</td> + <td>4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。</td> + </tr> + </tbody> +</table> + +<h2 id="Float_and_clear_example" name="Float_and_clear_example">浮動と解除の例</h2> + +<p>{{cssxref("float")}} および {{cssxref("clear")}} プロパティで用いられる物理的な値 <code>left</code>, <code>right</code>, <code>both</code> です。論理的プロパティの仕様書は、 <code>inline-start</code> および <code>inline-end</code> の値を <code>left</code> および <code>right</code> に対応付けて定義しています。</p> + +<p>下記の例では、二つのボックスがあります。 — 一つ目は <code>float: left</code> で、二つ目は <code>float: inline-start</code> で浮動させています。 <code>writing-mode</code> を <code>vertical-rl</code> に変更したり、 <code>direction</code> を <code>rtl</code> に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 <code>inline-start</code> で浮動させたアイテムは <code>direction</code> や <code>writing-mode</code> に従います。</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p> + +<h2 id="Example_Inset_properties_for_positioned_layout" name="Example_Inset_properties_for_positioned_layout">例: 位置指定レイアウトにおける inset プロパティ</h2> + +<p>一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} の物理的なプロパティを使用してきました。</p> + +<p>これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面寸法に関連します。</p> + +<p>論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} になります。</p> + +<p>以下の例では、 <code>inset-block-start</code> と <code>inset-inline-end</code> プロパティを使用して、青枠を灰色の点線で囲まれた領域 (<code>position: relative</code>) の内側に絶対位置を使用して配置しています 。 <code>writing-mode</code> プロパティを <code>vertical-rl</code> に変更するか、 <code>direction: rtl</code> を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p> + +<h2 id="New_two-_and_four-value_shorthands" name="New_two-_and_four-value_shorthands">新しい2または4値の一括指定</h2> + +<p>仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。</p> + +<ul> + <li>{{cssxref("inset")}} — 物理的な対応付けを使用して四辺をすべて設定します。</li> + <li>{{cssxref("inset-inline")}} — 論理的なインライン方向の内側の距離を両方設定します。</li> + <li>{{cssxref("inset-block")}} — 論理的なブロック方向の内側の距離を両方設定します。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 論理的プロパティ仕様書をを実装しているブラウザーは、これまでのところ直接マッピングを実装しており、新しい一括指定は実装していません。詳細については、各プロパティページのリファレンスにあるブラウザーの互換性データの節を参照してください。</p> +</div> + +<h2 id="Example_Logical_values_for_text-align" name="Example_Logical_values_for_text-align">例: text-align の論理値</h2> + +<p>{{cssxref("text-align")}} プロパティは、テキストの方向に関連する論理値を持っています。 <code>left</code> と <code>right</code> に代わり、 <code>start</code> と <code>end</code> を使用することができます。以下の例では、最初のブロックで <code>text-align: right</code>、2番目のブロックで <code>text-align: end</code> を設定しています。</p> + +<p><code>direction</code> の値を <code>rtl</code> に変更すると、最初のブロックでは配置が右に留まりますが、2番目のブロックでは論理的な末尾が左になることがわかります。</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p> + +<p>これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。</p> diff --git a/files/ja/web/css/css_logical_properties/index.html b/files/ja/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..71c78974aa --- /dev/null +++ b/files/ja/web/css/css_logical_properties/index.html @@ -0,0 +1,178 @@ +--- +title: CSS 論理的プロパティと値 +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - CSS Logical Properties + - CSS 論理的プロパティ + - Landing + - Reference + - 概要 +translation_of: Web/CSS/CSS_Logical_Properties +--- +<p>{{CSSRef}}</p> + +<p class="summary"><ruby><strong>CSS 論理的プロパティと値</strong><rp> (</rp><rt>CSS Logical Properties and Values</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。</p> + +<p>このモジュールは以前に <abbr title="Cascading Stylesheets">CSS</abbr> 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。</p> + +<h3 id="Block_vs._inline" name="Block_vs._inline">ブロックとインライン</h3> + +<p>論理プロパティと値は、<em>ブロック</em>と<em>インライン</em>という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存します。</p> + +<dl> + <dt id="block-dimension">ブロック方向</dt> + <dd>行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。</dd> + <dt id="inline-dimension">インライン方向</dt> + <dd>行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。</dd> +</dl> + +<h2 id="Reference" name="Reference">リファレンス</h2> + +<h3 id="Properties_for_sizing" name="Properties_for_sizing">寸法のプロパティ</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("block-size")}}</li> + <li>{{CSSxRef("inline-size")}}</li> + <li>{{CSSxRef("max-block-size")}}</li> + <li>{{CSSxRef("max-inline-size")}}</li> + <li>{{CSSxRef("min-block-size")}}</li> + <li>{{CSSxRef("min-inline-size")}}</li> +</ul> +</div> + +<h3 id="Properties_for_margins_borders_and_padding" name="Properties_for_margins_borders_and_padding">マージン、境界、パディングのプロパティ</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("border-block")}}</li> + <li>{{CSSxRef("border-block-color")}}</li> + <li>{{CSSxRef("border-block-end")}}</li> + <li>{{CSSxRef("border-block-end-color")}}</li> + <li>{{CSSxRef("border-block-end-style")}}</li> + <li>{{CSSxRef("border-block-end-width")}}</li> + <li>{{CSSxRef("border-block-start")}}</li> + <li>{{CSSxRef("border-block-start-color")}}</li> + <li>{{CSSxRef("border-block-start-style")}}</li> + <li>{{CSSxRef("border-block-start-width")}}</li> + <li>{{CSSxRef("border-block-style")}}</li> + <li>{{CSSxRef("border-block-width")}}</li> + <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> + <li>{{CSSxRef("border-inline")}}</li> + <li>{{CSSxRef("border-inline-color")}}</li> + <li>{{CSSxRef("border-inline-end")}}</li> + <li>{{CSSxRef("border-inline-end-color")}}</li> + <li>{{CSSxRef("border-inline-end-style")}}</li> + <li>{{CSSxRef("border-inline-end-width")}}</li> + <li>{{CSSxRef("border-inline-start")}}</li> + <li>{{CSSxRef("border-inline-start-color")}}</li> + <li>{{CSSxRef("border-inline-start-style")}}</li> + <li>{{CSSxRef("border-inline-start-width")}}</li> + <li>{{CSSxRef("border-inline-style")}}</li> + <li>{{CSSxRef("border-inline-width")}}</li> + <li>{{CSSxRef("border-start-start-radius")}}</li> + <li>{{CSSxRef("border-start-end-radius")}}</li> + <li>{{CSSxRef("border-end-start-radius")}}</li> + <li>{{CSSxRef("border-end-end-radius")}}</li> + <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> + <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> + <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> + <li>{{CSSxRef("margin-block")}}</li> + <li>{{CSSxRef("margin-block-end")}}</li> + <li>{{CSSxRef("margin-block-start")}}</li> + <li>{{CSSxRef("margin-inline")}}</li> + <li>{{CSSxRef("margin-inline-end")}}</li> + <li>{{CSSxRef("margin-inline-start")}}</li> + <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li> + <li>{{CSSxRef("padding-block")}}</li> + <li>{{CSSxRef("padding-block-end")}}</li> + <li>{{CSSxRef("padding-block-start")}}</li> + <li>{{CSSxRef("padding-inline")}}</li> + <li>{{CSSxRef("padding-inline-end")}}</li> + <li>{{CSSxRef("padding-inline-start")}}</li> +</ul> +</div> + +<h3 id="Properties_for_floating_and_positioning" name="Properties_for_floating_and_positioning">浮動と位置指定のプロパティ</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li> + <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li> + <li>{{CSSxRef("inset")}}</li> + <li>{{CSSxRef("inset-block")}}</li> + <li>{{CSSxRef("inset-block-end")}}</li> + <li>{{CSSxRef("inset-block-start")}}</li> + <li>{{CSSxRef("inset-inline")}}</li> + <li>{{CSSxRef("inset-inline-end")}}</li> + <li>{{CSSxRef("inset-inline-start")}}</li> +</ul> +</div> + +<h3 id="Other_properties" name="Other_properties">その他のプロパティ</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li> + <li>{{CSSxRef("overflow-block")}}</li> + <li>{{CSSxRef("overflow-inline")}}</li> + <li>{{CSSxRef("overscroll-behavior-block")}}</li> + <li>{{CSSxRef("overscroll-behavior-inline")}}</li> + <li>{{CSSxRef("resize")}} (<code>block</code> and <span style="white-space: nowrap;"><code>inline</code> keywords)</span></li> + <li>{{CSSxRef("text-align")}} (<code>end</code> および <span style="white-space: nowrap;"><code>start</code> キーワード)</span></li> +</ul> +</div> + +<h3 id="Deprecated_properties" name="Deprecated_properties">非推奨になったプロパティ</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-end")}} {{Experimental_Inline}} に置き換え)</span></li> + <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-start")}} {{Experimental_Inline}} に置き換え)</span></li> + <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-end")}} {{Experimental_Inline}} に置き換え)</span></li> + <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-start")}} {{Experimental_Inline}} に置き換え)</span></li> +</ul> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">論理的プロパティと値の基本概念</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Sizing">寸法の論理的プロパティ</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">マージン、境界、パディングの論理的プロパティ</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">浮動と位置指定の論理的プロパティ</a></li> +</ul> + +<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")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>全般的な対応:</p> + +<ul> + <li>Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。</li> + <li>Chrome はバージョン69から、プロパティの対応付けに対応しました。</li> + <li>Edge はバージョン79から Chrome と同様に対応しています。</li> + <li>Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。</li> + <li>Internet Explorer は対応していません。</li> +</ul> + +<p>互換性情報全体は、それぞれのプロパティページを参照してください。</p> diff --git a/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html new file mode 100644 index 0000000000..cf4cf1ac51 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html @@ -0,0 +1,298 @@ +--- +title: マージン、境界、パディングの論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +tags: + - CSS + - CSS 論理的プロパティ + - ガイド + - 書字方向 + - 概念 +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +<p>{{CSSRef}}</p> + +<p class="summary"><ruby><a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a><rp> (</rp><rt>Logical Properties and Values specification</rt><rp>) </rp></ruby>では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。</p> + +<p><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティと値</a>のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺についての4つの個別指定値と、すべてを一括指定するものであるためです。</p> + +<h2 id="Mappings_for_margins_borders_and_padding" name="Mappings_for_margins_borders_and_padding">マージン、境界、パティングの対応付け</h2> + +<p>The specification details mappings for each logical value to a physical counterpart. In the table below I have given these mapped values assuming that the {{cssxref("writing-mode")}} in use is <code>horizontal-tb</code> — with a left to right direction. The inline direction therefore runs horizontally — left to right — and {{cssxref("margin-inline-start")}} would be equivalent to {{cssxref("margin-left")}}.</p> + +<p>If you were using a <code>horizontal-tb</code> writing mode with a right-to-left text direction then {{cssxref("margin-inline-start")}} would be the same as {{cssxref("margin-right")}}, and in a vertical writing mode it would be the same as using {{cssxref("margin-top")}}.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">論理的プロパティ</th> + <th scope="col">物理的プロパティ</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("border-block-end")}}</td> + <td>{{cssxref("border-bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-end-color")}}</td> + <td>{{cssxref("border-bottom-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-end-style")}}</td> + <td>{{cssxref("border-bottom-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-end-width")}}</td> + <td>{{cssxref("border-bottom-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start")}}</td> + <td>{{cssxref("border-top")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start-color")}}</td> + <td>{{cssxref("border-top-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start-style")}}</td> + <td>{{cssxref("border-top-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start-width")}}</td> + <td>{{cssxref("border-top-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end")}}</td> + <td>{{cssxref("border-right")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end-color")}}</td> + <td>{{cssxref("border-right-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end-style")}}</td> + <td>{{cssxref("border-right-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end-width")}}</td> + <td>{{cssxref("border-right-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start")}}</td> + <td>{{cssxref("border-left")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start-color")}}</td> + <td>{{cssxref("border-left-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start-style")}}</td> + <td>{{cssxref("border-left-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start-width")}}</td> + <td>{{cssxref("border-left-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-start-start-radius")}}</td> + <td>{{cssxref("border-top-left-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("border-start-end-radius")}}</td> + <td>{{cssxref("border-bottom-left-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("border-end-start-radius")}}</td> + <td>{{cssxref("border-top-right-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("border-end-end-radius")}}</td> + <td>{{cssxref("border-bottom-right-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-block-end")}}</td> + <td>{{cssxref("margin-bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-block-start")}}</td> + <td>{{cssxref("margin-top")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-inline-end")}}</td> + <td>{{cssxref("margin-right")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-inline-start")}}</td> + <td>{{cssxref("margin-left")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-block-end")}}</td> + <td>{{cssxref("padding-bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-block-start")}}</td> + <td>{{cssxref("padding-top")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-inline-end")}}</td> + <td>{{cssxref("padding-right")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-inline-start")}}</td> + <td>{{cssxref("padding-left")}}</td> + </tr> + </tbody> +</table> + +<p>There are also some additional shorthands, made possible because we have the ability to target both block or both inline edges of the box simultaneously. These shorthands have no physical equivalent.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col">目的</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("border-block")}}</td> + <td>Sets {{cssxref("border-color")}}, {{cssxref("border-style")}}, and {{cssxref("border-width")}} for both block borders.</td> + </tr> + <tr> + <td>{{cssxref("border-block-color")}}</td> + <td>Sets <code>border-color</code> for both block borders.</td> + </tr> + <tr> + <td>{{cssxref("border-block-style")}}</td> + <td>Sets <code>border-style</code> for both block borders.</td> + </tr> + <tr> + <td>{{cssxref("border-block-width")}}</td> + <td>Sets <code>border-width</code> for both block borders.</td> + </tr> + <tr> + <td>{{cssxref("border-inline")}}</td> + <td>Sets <code>border-color</code>, <code>-style</code>, and <code>-width</code> for both inline borders.</td> + </tr> + <tr> + <td>{{cssxref("border-inline-color")}}</td> + <td>Sets <code>border-color</code> for both inline borders.</td> + </tr> + <tr> + <td>{{cssxref("border-inline-style")}}</td> + <td>Sets <code>border-style</code> for both inline borders.</td> + </tr> + <tr> + <td>{{cssxref("border-inline-width")}}</td> + <td>Sets <code>border-width</code> for both inline borders.</td> + </tr> + <tr> + <td>{{cssxref("margin-block")}}</td> + <td>Sets all the block {{cssxref("margin")}}s.</td> + </tr> + <tr> + <td>{{cssxref("margin-inline")}}</td> + <td>Sets all the inline <code>margin</code>s.</td> + </tr> + <tr> + <td>{{cssxref("padding-block")}}</td> + <td>Sets the block {{cssxref("padding")}}.</td> + </tr> + <tr> + <td>{{cssxref("padding-inline")}}</td> + <td>Sets the inline <code>padding</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Margin_examples" name="Margin_examples">マージンの例</h2> + +<p>The mapped margin properties of {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, and {{cssxref("margin-inline-end")}} can be used instead of their physical counterparts.</p> + +<p>In the example below I have created two boxes and added different sized margins to each edge. I have added an extra container with a border in order to make the margin more obvious to see.</p> + +<p>One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to <code>rtl</code> to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.</p> + +<p>You can also try changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>. Again, notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p> + +<h3 id="Margin_shorthands" name="Margin_shorthands">マージンの一括指定</h3> + +<p>As we can now target both sides of a box — either both inline sides or both block sides — there are new shorthands available, {{cssxref("margin-inline")}} and {{cssxref("margin-block")}}, which accept two values. The first value will apply to the start of that dimension, the second to the end. If you only use one value it is applied to both.</p> + +<p>In a horizontal writing mode this CSS would apply a 5px margin to the top of the box and a 10px margin to the bottom.</p> + +<pre class="brush: css">.box { + margin-block: 5px 10px; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: The shorthand properties <code>margin-inline</code> and <code>margin-block</code> shipped in Firefox 66. As these are new properties check browser support before using.</p> +</div> + +<h2 id="Padding_examples" name="Padding_examples">パディングの例</h2> + +<p>The mapped padding properties of {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, and {{cssxref("padding-inline-end")}} can be used instead of their physical counterparts.</p> + +<p>In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a <code>writing-mode</code> of <code>horizontal-tb</code>, both boxes should appear the same.</p> + +<p>Try changing the <code>direction</code> property to <code>rtl</code> to cause the boxes to display in a right-to-left direction. The padding on the first box will stay in the same place, whereas the padding on the inline dimension of the second box will switch.</p> + +<p>You can also try changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>. Again, notice how the padding stays in the same place for the first box, but switches around to follow the text direction in the second.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p> + +<h3 id="Padding_shorthands" name="Padding_shorthands">パディングの一括指定</h3> + +<p>As with margin, there are two-value shorthands for padding — {{cssxref("padding-inline")}} and {{cssxref("padding-block")}} — which allow you to set the padding of the two inline, and two block dimensions, respectively.</p> + +<p>In a horizontal <code>writing-mode</code> this CSS would apply <code>5px</code> of padding to the top of the box and 10px of padding to the bottom:</p> + +<pre class="brush: css">.box { + padding-block: 5px 10px; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: The shorthand properties <code>padding-inline</code> and <code>padding-block</code> shipped in Firefox 66. As these are new properties check browser support before using.</p> +</div> + +<h2 id="Border_examples" name="Border_examples">境界の例</h2> + +<p>The border properties are the main reason that Logical Properties and Values seems to have so many properties, as we have the longhands for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. As with margin and padding we have a mapped version of each physical property.</p> + +<p>The demo below uses some longhands and three shorthand values. As with the other demos try changing the <code>direction</code> property to <code>rtl</code> to cause the boxes to display in a right-to-left direction, or changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p> + +<h3 id="New_border_shorthands" name="New_border_shorthands">新しい境界の一括指定</h3> + +<p>There are two-value shorthands to set the width, style and, color of the block or inline dimension, and two-value shorthands to set all three values in the block or inline dimension. The below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right.</p> + +<pre class="brush: css">.box { + border-block: 2px solid green; + border-inline-width: 4px; + border-inline-style: dotted; + border-inline-color: rebeccapurple; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: these two value shorthands shipped in Firefox 66, check browser support before using as other browsers may not have implemented them yet.</p> +</div> + +<h3 id="Flow_relative_border-radius_properties" name="Flow_relative_border-radius_properties">フローに関連した border-radius プロパティ</h3> + +<p>The specification has fairly recently added flow-relative values for the {{cssxref("border-radius")}} longhands. These have not yet been implemented by any browser. The below example, in a horizontal <code>writing-mode</code>, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px.</p> + +<pre class="brush: css">.box { + border-end-start-radius: 1em; + border-end-end-radius: 0; + border-start-end-radius: 20px; + border-start-start-radius: 40px; +}</pre> + +<h2 id="Indicating_logical_values_for_the_4-value_shorthand_syntax" name="Indicating_logical_values_for_the_4-value_shorthand_syntax">4つの値の一括指定構文についての論理値による指定</h2> + +<p>The specification makes a suggestion for the four-value shorthands such as the <code>margin</code> property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in <a href="https://github.com/w3c/csswg-drafts/issues/1282">this issue</a>.</p> + +<p>Using any four-value shorthand such as margin, padding, or border will currently use the physical versions, so if following the flow of the document is important, use the longhand properties for the time being.</p> diff --git a/files/ja/web/css/css_logical_properties/sizing/index.html b/files/ja/web/css/css_logical_properties/sizing/index.html new file mode 100644 index 0000000000..d6cbf58fb6 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/sizing/index.html @@ -0,0 +1,93 @@ +--- +title: 寸法の論理的プロパティ +slug: Web/CSS/CSS_Logical_Properties/Sizing +tags: + - CSS + - CSS 論理的プロパティ + - Guide + - 寸法 + - 書字方向 +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +<div>{{CSSRef}}</div> + +<p class="summary">このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。</p> + +<p>アイテムの寸法を指定するときに、<a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値</a>仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。</p> + +<h2 id="Mappings_for_dimensions" name="Mappings_for_dimensions">長さへの対応付け</h2> + +<p>以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような <code>horizontal-tb</code> の書字方向を想定しており、この場合は {{CSSxRef("width")}} が {{CSSxRef("inline-size")}} に対応付けられます。</p> + +<p>縦書きモードの場合は、 {{CSSxRef("inline-size")}} は {{CSSxRef("height")}} に対応付けられます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">論理的プロパティ</th> + <th scope="col">物理的プロパティ</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{CSSxRef("inline-size")}}</td> + <td>{{CSSxRef("width")}}</td> + </tr> + <tr> + <td>{{CSSxRef("block-size")}}</td> + <td>{{CSSxRef("height")}}</td> + </tr> + <tr> + <td>{{CSSxRef("min-inline-size")}}</td> + <td>{{CSSxRef("min-width")}}</td> + </tr> + <tr> + <td>{{CSSxRef("min-block-size")}}</td> + <td>{{CSSxRef("min-height")}}</td> + </tr> + <tr> + <td>{{CSSxRef("max-inline-size")}}</td> + <td>{{CSSxRef("max-width")}}</td> + </tr> + <tr> + <td>{{CSSxRef("max-block-size")}}</td> + <td>{{CSSxRef("max-height")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Width_and_height_example" name="Width_and_height_example">幅と高さの例</h2> + +<p>{{CSSxRef("width")}} と {{CSSxRef("height")}} の論理的な対応付けでは、 {{CSSxRef("inline-size")}} がインライン方向の長さを設定し、 {{CSSxRef("block-size")}} がブロック方向の長さを設定します。英語の場合は、 <code>width</code> を <code>inline-size</code> で、 <code>height</code> を <code>block-size</code> で置き換えると同じレイアウトになります。</p> + +<p>以下のライブデモでは、書字方向を <code>horizontal-tb</code> に設定しました。これを <code>vertical-rl</code> に変更すると、最初の例 — <code>width</code> と <code>height</code> を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — <code>inline-size</code> と <code>block-size</code> を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p> + +<h2 id="Min-width_and_min-height_example" name="Min-width_and_min-height_example">最小幅と最小高さの例</h2> + +<p>{{CSSxRef("min-width")}} と {{CSSxRef("min-height")}} も、 {{CSSxRef("min-inline-size")}} と {{CSSxRef("min-block-size")}} に対応付けられます。これらは <code>inline-size</code> および <code>block-size</code> プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。</p> + +<p>最初の例のように、以下の例を <code>vertical-rl</code> に変更してみて、その作用を確認してみてください。最初の例では <code>min-height</code> を使用しており、二番目の例では <code>min-block-size</code> を使用しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p> + +<h2 id="Max-width_and_max-height_example" name="Max-width_and_max-height_example">最大幅と最大高さの例</h2> + +<p>最後に {{CSSxRef("max-inline-size")}} と {{CSSxRef("max-block-size")}} を、 {{CSSxRef("max-width")}} と {{CSSxRef("max-height")}} の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p> + +<h2 id="Logical_keywords_for_resize" name="Logical_keywords_for_resize">大きさ変更の論理キーワード</h2> + +<p>{{CSSxRef("resize")}} プロパティは、アイテムの大きさが変わるかどうかを物理的な値である <code>horizontal</code> および <code>vertical</code> で指定します。 <code>resize</code> プロパティは論理的なキーワード値にも対応しています。 <code>resize: inline</code> を使用すると、インライン方向の大きさが変わることを許可し、 <code>resize: block</code> を使用すると、ブロック方向の大きさが変わることを許可します。</p> + +<p>both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。</p> + + + +<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p> + +<div class="blockIndicator warning"> +<p>なお、現在のところ大きさ変更の論理的プロパティは Firefox のみが対応しています。</p> +</div> |