From 56128e4c267e489e08b5e7108362c6c04b35c362 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Nov 2021 02:17:02 +0900 Subject: CSS フレックスボックス関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/01 時点の英語版に同期 --- files/ja/web/css/order/index.md | 129 ++++++++++++++++++---------------------- 1 file changed, 59 insertions(+), 70 deletions(-) (limited to 'files/ja/web/css/order') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の order プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。

+**`order`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは `order` の値の昇順に配置され、さらにソースコード内の順序で配置されます。 -
{{EmbedInteractiveExample("pages/css/order.html")}}
+{{EmbedInteractiveExample("pages/css/order.html")}} - +## 構文 -

構文

- -
/* <integer> 値 */
+```css
+/*  値 */
 order: 5;
 order: -5;
 
 /* グローバル値 */
 order: inherit;
 order: initial;
-order: unset;
+order: revert; +order: unset; +``` -
-

メモ: order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order を speech など、視覚的ではないメディアで使用してはいけません。

-
+`order` は要素の*視覚上の順序*にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。`order` を [speech](/ja/docs/Web/CSS/@media#speech) など、視覚的ではないメディアで使用してはいけません。 -

値

+### 値 -
-
{{cssxref("<integer>")}}
-
アイテムが割り当てられる順序グループを表します。
-
+- {{cssxref("<integer>")}} + - : アイテムが割り当てられる順序グループを表します。 -

形式文法

+## アクセシビリティの考慮事項 -{{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) -

例

+## 公式定義 -

基本的な HTML 一式:

+{{cssinfo}} + +## 形式文法 + +{{csssyntax}} -
<header>...</header>
-<main>
-  <article>Article</article>
-  <nav>Nav</nav>
-  <aside>Aside</aside>
-</main>
-<footer>...</footer>
+## 例 -

以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。

+

フレックスコンテナー内のアイテムの並べ替え

-
main { display: flex;  text-align:center; }
-main > article { flex:1;        order: 2; }
-main > nav     { width: 200px;  order: 1; }
-main > aside   { width: 200px;  order: 3; }
+以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout モジュールでは、垂直方向のサイズが同じで水平方向の空間を可能な限り多く使用するブロックを、自動的に作成します。 -

結果

+#### HTML -

{{ EmbedLiveSample('Example') }}

+```html +
...
+
+
Article
+ + +
+ +``` -

アクセシビリティの考慮事項

+#### CSS -

order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

+```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; } +``` - +#### 結果 -

仕様書

+{{ EmbedLiveSample('Ordering_items_in_a_flex_container') }} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

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

{{Compat("css.properties.order")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- 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)_ -- cgit v1.2.3-54-g00ecf