【CSS Modules】orderプロパティの使い方
orderプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
orderプロパティは、CSS FlexboxまたはCSS Gridのレイアウトにおいて、コンテナ内のアイテムの表示順序を制御する値を保持するプロパティです。このプロパティをアイテムに適用することで、HTMLのソースコード（DOM）における記述順序とは独立して、画面上での並び順を自由に指定することができます。
orderプロパティは整数値を受け付け、デフォルト値は0です。値が小さいアイテムほどコンテナの開始位置に近い場所に表示され、値が大きいアイテムほどコンテナの終了位置に近い場所に表示されます。例えば、order: -1;と設定されたアイテムは、order: 0;（デフォルト値）のアイテムよりも先に表示されます。複数のアイテムが同じorder値を持つ場合は、それらのアイテムはHTMLの記述順に従って表示されます。
このプロパティは視覚的な順序のみを変更し、ドキュメントの論理的順序やアクセシビリティ関連の順序には影響を与えません。そのため、アクセシビリティを考慮する際には、orderプロパティの使用によって論理的な順序と視覚的な順序が大きく乖離しないよう、慎重な利用が求められます。
公式リファレンス: order
構文(syntax)
1order: <integer>;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません