diff options
Diffstat (limited to 'files/ja/web/css/order/index.md')
| -rw-r--r-- | files/ja/web/css/order/index.md | 129 |
1 files changed, 59 insertions, 70 deletions
diff --git a/files/ja/web/css/order/index.md b/files/ja/web/css/order/index.md index 16092e59ff..ec63e07ab0 100644 --- a/files/ja/web/css/order/index.md +++ b/files/ja/web/css/order/index.md @@ -5,107 +5,96 @@ tags: - CSS - CSS フレックスボックス - CSS プロパティ - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.order translation_of: Web/CSS/order --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>order</code></strong> プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは <code>order</code> の値の昇順に配置され、さらにソースコード内の順序で配置されます。</p> +**`order`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは `order` の値の昇順に配置され、さらにソースコード内の順序で配置されます。 -<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div> +{{EmbedInteractiveExample("pages/css/order.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">/* <integer> 値 */ +```css +/* <integer> 値 */ order: 5; order: -5; /* グローバル値 */ order: inherit; order: initial; -order: unset;</pre> +order: revert; +order: unset; +``` -<div class="note"> -<p><strong>メモ</strong>: <code>order</code> は要素の<strong>視覚上の順序</strong>にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。<code><strong>order</strong></code> を <a href="/ja/docs/Web/CSS/@media#speech">speech</a> など、視覚的ではないメディアで使用してはいけません。</p> -</div> +`order` は要素の*視覚上の順序*にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。`order` を [speech](/ja/docs/Web/CSS/@media#speech) など、視覚的ではないメディアで使用してはいけません。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<integer>")}}</dt> - <dd>アイテムが割り当てられる順序グループを表します。</dd> -</dl> +- {{cssxref("<integer>")}} + - : アイテムが割り当てられる順序グループを表します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## アクセシビリティの考慮事項 -{{csssyntax}} +`order` プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、画面リーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、画面リーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。 + +- [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/) +- [Source Order Matters | Adrian Roselli](https://adrianroselli.com/2015/09/source-order-matters.html) +- [MDN "WCAG を理解する ― ガイドライン 1.3 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html) -<h2 id="Example" name="Example">例</h2> +## 公式定義 -<p>基本的な HTML 一式:</p> +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} -<pre class="brush:html; notranslate"><header>...</header> -<main> - <article>Article</article> - <nav>Nav</nav> - <aside>Aside</aside> -</main> -<footer>...</footer></pre> +## 例 -<p>以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。</p> +<h3 id="Ordering_items_in_a_flex_container">フレックスコンテナー内のアイテムの並べ替え</h3> -<pre class="brush:css; notranslate">main { display: flex; text-align:center; } -main > article { flex:1; order: 2; } -main > nav { width: 200px; order: 1; } -main > aside { width: 200px; order: 3; }</pre> +以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout モジュールでは、垂直方向のサイズが同じで水平方向の空間を可能な限り多く使用するブロックを、自動的に作成します。 -<h3 id="Result" name="Result">結果</h3> +#### HTML -<p>{{ EmbedLiveSample('Example') }}</p> +```html +<header>...</header> +<main> + <article>Article</article> + <nav>Nav</nav> + <aside>Aside</aside> +</main> +<footer>...</footer> +``` -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +#### CSS -<p><code>order</code> プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。</p> +```css +main { display: flex; text-align:center; } +main > article { flex:1; order: 2; } +main > nav { width: 200px; order: 1; } +main > aside { width: 200px; order: 3; } +``` -<ul> - <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the keyboard navigation disconnect — Tink</a></li> - <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> -</ul> +#### 結果 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{ EmbedLiveSample('Ordering_items_in_a_flex_container') }} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.order")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li> - <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの並べ替え</a></em></li> - <li>CSS グリッドガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></em></li> -</ul> +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスアイテムの並べ替え](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ +- CSS グリッドガイド: _[CSS グリッドレイアウトとアクセシビリティ](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)_ |