SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのorderの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:40動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、オーダーです。
  4. 0:05これはフレックスボックスやグリッドの中で、項目の見た目の並び順を変えるプロパティです。
  5. 0:11エイチティーエムエルに書いた順番はそのままに、画面上だけ先に表示したり、
  6. 0:14後に回したりできます。
  7. 0:17たとえば二番目に書いた項目を一番前に出したい、といった調整ができます。
  8. 0:22ただし変わるのは見た目だけで、読み上げやキーボードの移動順は変わりません。
  9. 0:27その大切な注意点も含めて、基本の書き方、値の意味、実例での動き、効かないときの確認まで、
  10. 0:31順番に見ていきましょう。
  11. 0:35スマートフォンとパソコンで見せ方を変えたいときにも応用できる考え方です。
  12. 0:39まず基本の書き方です。
  13. 0:41セレクターのあとに、オーダー、コロン、値、セミコロンを書きます。
  14. 0:46スライドの例では、デモというクラスを持つ項目に、マイナスいちを指定しています。
  15. 0:52ここで大切なのは、書く場所です。
  16. 0:55オーダーは親ではなく、並び替えたい子、つまりフレックスアイテムやグリッドアイテム自身に書きます。
  17. 1:02親にはあらかじめ、ディスプレイ、フレックスやグリッドを指定しておく必要があります。
  18. 1:09親で並べ方を用意し、子で順番を指定する、という役割分担をまず覚えてください。
  19. 1:14値に単位は付けません。
  20. 1:16ピクセルやレムのような単位は不要で、数字だけを書く点も、このプロパティの特徴です。
  21. 1:23指定できる値の読み方を整理します。
  22. 1:25オーダーに書けるのは整数です。
  23. 1:27プラスの数も、マイナスの数も、ゼロも使えます。
  24. 1:30決まりはとてもシンプルで、値の小さい項目から順に画面へ配置されます。
  25. 1:35たとえばマイナスいちはゼロより小さいので、指定のない項目より前に出ます。
  26. 1:41逆に、いちはゼロより大きいので後ろへ回ります。
  27. 1:44あくまで相対的な大小で順番が決まるので、連番でなければならない、といった決まりはありません。
  28. 1:51たとえば、ほかの項目より確実に前に出したい場合は、周りより小さい値を選ぶ、
  29. 1:54といった考え方で十分です。
  30. 1:58大小関係で読むことが大切です。
  31. 2:00並び順が決まる仕組みを、もう少し詳しく見ます。
  32. 2:04指定しなかった項目の値は、すべてゼロとして扱われます。
  33. 2:09そのため、マイナスいちを指定した項目は、ゼロの項目より前に並びます。
  34. 2:14そして、同じ値を持つ項目同士では、エイチティーエムエルに書かれた元の順番がそのまま保たれます。
  35. 2:22つまりオーダーは、まず値の小さい順に並べ替え、同じ値の中では元の順番を守る、
  36. 2:27という二段階のルールです。
  37. 2:31数字が大きく離れていても結果は同じで、あくまで順位だけが意味を持ちます。
  38. 2:37この仕組みが分かると、前に出したいときは小さく、後ろへ回したいときは大きく、
  39. 2:41と自信を持って指定できます。
  40. 2:46初期値と継承を確認します。
  41. 2:48初期値はゼロです。
  42. 2:49何も指定しなければ、すべての項目がゼロとなり、エイチティーエムエルの順番通りに並びます。
  43. 2:56そして通常の継承はしません。
  44. 2:58親に書いた値が子へ自動で受け継がれることはありません。
  45. 3:02項目ごとに自分で指定するプロパティだと考えてください。
  46. 3:06また、仕様上の初期値と、ブラウザーの既定の見え方が同じとは限らない点も押さえておきましょう。
  47. 3:14インヘリットやイニシャルといった共通キーワードの考え方は、ほかのプロパティと同じです。
  48. 3:20特に初期値のゼロは、並び替えの基準点として何度も登場しますので、しっかり押さえておきましょう。
  49. 3:27実例を見ていきます。
  50. 3:29まずエイチティーエムエルの用意です。
  51. 3:32ステージという親の箱の中に、項目が三つ入っています。
  52. 3:36一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。
  53. 3:43頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  54. 3:49親と子の構造そのものが例の一部です。
  55. 3:52この例では、二番目に書かれた対象を、シーエスエスだけで前や後ろへ動かします。
  56. 3:58三つの項目は横並びになる想定で、左から一、二、三と表示される状態がスタート地点です。
  57. 4:04エイチティーエムエルは書き換えず、見た目だけがどう変わるかに注目してください。
  58. 4:10次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  59. 4:16ステージはディスプレイ、フレックスとし、隙間はれい点ごレム、項目は横に並びます。
  60. 4:23ステージや項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
  61. 4:30そして主役は最後の行で、デモにオーダー、マイナスいちを指定します。
  62. 4:35すると二番目に書かれた対象が、一番前へ移動して表示されます。
  63. 4:41もともとの並びは一、二、三でしたが、画面上は対象、項目一、項目三の順になります。
  64. 4:48土台は共通なので、最後の指定だけに注目してください。
  65. 4:52枠線が太く背景が付いた対象が前に来るので、移動したことがひと目で分かります。
  66. 4:59値を変えて比べてみましょう。
  67. 5:01最後のオーダーの値だけを、マイナスいちから、いちへ置き換えます。
  68. 5:06ファイルを保存してブラウザーを再読み込みすると、二番目に書かれた対象が、
  69. 5:09今度は一番後ろへ移動します。
  70. 5:13画面上は項目一、項目三、対象の順になります。
  71. 5:16エイチティーエムエルは一切変えていません。
  72. 5:19値の符号ひとつで、前へ出すか後ろへ回すかが切り替わる点が、オーダーの分かりやすい特徴です。
  73. 5:26比較のコツは、変えるのはこの値ひとつだけにすることです。
  74. 5:30前へ出すマイナスいちと、後ろへ回すいち、この二つを比べるだけでも、オーダーの働きは十分につかめます。
  75. 5:37間違えやすい点を整理します。
  76. 5:39いちばん大切なのは、見た目の順番と、意味の順番がずれることです。
  77. 5:44オーダーで前後を入れ替えても、読み上げソフトやタブキーでの移動は、エイチティーエムエルの順番のままです。
  78. 5:51見た目と操作の順番が食い違うと、利用者が迷う原因になります。
  79. 5:55意味のある並びは、まずエイチティーエムエル自体で整え、オーダーは見た目の微調整に使うのが基本です。
  80. 6:03たとえばボタンやリンクの並びを大きく入れ替えると、視覚と操作のずれが特に目立ちます。
  81. 6:09もう一つ、親がフレックスやグリッドになっていないと効かない点も、親と子の混同とあわせて注意してください。
  82. 6:16効かないときの確認手順です。
  83. 6:18まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  84. 6:25次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
  85. 6:31スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
  86. 6:37コンピューテッドで最終的な値を確認し、親の表示方式がフレックスかグリッドになっているかも調べましょう。
  87. 6:45最後に、三百二十ピクセル程度の画面幅や、キーボード操作でも内容を利用できるかを確かめてください。
  88. 6:52ひとつずつ切り分けることで、原因が値なのか、親の設定なのかを特定しやすくなります。
  89. 6:58最後に互換性とまとめです。
  90. 7:00二千二十六年九月確認の記録では、クロームは二十九以降、エッジは十二以降、
  91. 7:05ファイアフォックスは二十以降で補足条件あり、サファリは九以降で対応しています。
  92. 7:10アンドロイド版クロームは二十九以降、アイオーエス版サファリは九以降です。
  93. 7:15練習は、まずマイナスいちといちの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。
  94. 7:22まとめます。
  95. 7:22オーダーは値の小さい順に並べる指定で、初期値はゼロ、継承はしません。
  96. 7:27関連するアライン・セルフやフレックスもあわせて確認すると理解が深まります。
  97. 7:32見た目だけを変える便利な指定だからこそ、意味の順番への配慮とセットで使うことが大切です。
  98. 7:38お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

orderの役割と主な指定値を解説。2番目に書いた対象項目が前後へ移動します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのorderの使い方：指定値・実例・効かない原因とブラウザー互換性 →