WEBVTT

1
00:00:00.000 --> 00:00:00.818
こんにちは。

2
00:00:00.818 --> 00:00:03.274
シーエスエス、リファレンス解説です。

3
00:00:03.274 --> 00:00:05.319
今回のテーマは、オーダーです。

4
00:00:05.319 --> 00:00:11.184
これはフレックスボックスやグリッドの中で、項目の見た目の並び順を変えるプロパティです。

5
00:00:11.184 --> 00:00:14.390
エイチティーエムエルに書いた順番はそのままに、画面上だけ先に表示したり、

6
00:00:14.390 --> 00:00:17.595
後に回したりできます。

7
00:00:17.595 --> 00:00:22.369
たとえば二番目に書いた項目を一番前に出したい、といった調整ができます。

8
00:00:22.369 --> 00:00:27.416
ただし変わるのは見た目だけで、読み上げやキーボードの移動順は変わりません。

9
00:00:27.416 --> 00:00:31.235
その大切な注意点も含めて、基本の書き方、値の意味、実例での動き、効かないときの確認まで、

10
00:00:31.235 --> 00:00:35.054
順番に見ていきましょう。

11
00:00:35.054 --> 00:00:39.964
スマートフォンとパソコンで見せ方を変えたいときにも応用できる考え方です。

12
00:00:39.964 --> 00:00:41.673
まず基本の書き方です。

13
00:00:41.673 --> 00:00:46.645
セレクターのあとに、オーダー、コロン、値、セミコロンを書きます。

14
00:00:46.645 --> 00:00:52.705
スライドの例では、デモというクラスを持つ項目に、マイナスいちを指定しています。

15
00:00:52.705 --> 00:00:55.191
ここで大切なのは、書く場所です。

16
00:00:55.191 --> 00:01:02.649
オーダーは親ではなく、並び替えたい子、つまりフレックスアイテムやグリッドアイテム自身に書きます。

17
00:01:02.649 --> 00:01:09.019
親にはあらかじめ、ディスプレイ、フレックスやグリッドを指定しておく必要があります。

18
00:01:09.019 --> 00:01:14.923
親で並べ方を用意し、子で順番を指定する、という役割分担をまず覚えてください。

19
00:01:14.923 --> 00:01:16.633
値に単位は付けません。

20
00:01:16.633 --> 00:01:23.003
ピクセルやレムのような単位は不要で、数字だけを書く点も、このプロパティの特徴です。

21
00:01:23.003 --> 00:01:25.467
指定できる値の読み方を整理します。

22
00:01:25.467 --> 00:01:27.641
オーダーに書けるのは整数です。

23
00:01:27.641 --> 00:01:30.975
プラスの数も、マイナスの数も、ゼロも使えます。

24
00:01:30.975 --> 00:01:35.903
決まりはとてもシンプルで、値の小さい項目から順に画面へ配置されます。

25
00:01:35.903 --> 00:01:41.121
たとえばマイナスいちはゼロより小さいので、指定のない項目より前に出ます。

26
00:01:41.121 --> 00:01:44.454
逆に、いちはゼロより大きいので後ろへ回ります。

27
00:01:44.454 --> 00:01:51.122
あくまで相対的な大小で順番が決まるので、連番でなければならない、といった決まりはありません。

28
00:01:51.122 --> 00:01:54.745
たとえば、ほかの項目より確実に前に出したい場合は、周りより小さい値を選ぶ、

29
00:01:54.745 --> 00:01:58.369
といった考え方で十分です。

30
00:01:58.369 --> 00:02:00.543
大小関係で読むことが大切です。

31
00:02:00.543 --> 00:02:04.446
並び順が決まる仕組みを、もう少し詳しく見ます。

32
00:02:04.446 --> 00:02:09.028
指定しなかった項目の値は、すべてゼロとして扱われます。

33
00:02:09.028 --> 00:02:14.798
そのため、マイナスいちを指定した項目は、ゼロの項目より前に並びます。

34
00:02:14.798 --> 00:02:22.774
そして、同じ値を持つ項目同士では、エイチティーエムエルに書かれた元の順番がそのまま保たれます。

35
00:02:22.774 --> 00:02:27.102
つまりオーダーは、まず値の小さい順に並べ替え、同じ値の中では元の順番を守る、

36
00:02:27.102 --> 00:02:31.429
という二段階のルールです。

37
00:02:31.429 --> 00:02:37.538
数字が大きく離れていても結果は同じで、あくまで順位だけが意味を持ちます。

38
00:02:37.538 --> 00:02:41.951
この仕組みが分かると、前に出したいときは小さく、後ろへ回したいときは大きく、

39
00:02:41.951 --> 00:02:46.363
と自信を持って指定できます。

40
00:02:46.363 --> 00:02:48.363
初期値と継承を確認します。

41
00:02:48.363 --> 00:02:49.748
初期値はゼロです。

42
00:02:49.748 --> 00:02:56.517
何も指定しなければ、すべての項目がゼロとなり、エイチティーエムエルの順番通りに並びます。

43
00:02:56.517 --> 00:02:58.671
そして通常の継承はしません。

44
00:02:58.671 --> 00:03:02.825
親に書いた値が子へ自動で受け継がれることはありません。

45
00:03:02.825 --> 00:03:06.979
項目ごとに自分で指定するプロパティだと考えてください。

46
00:03:06.979 --> 00:03:14.056
また、仕様上の初期値と、ブラウザーの既定の見え方が同じとは限らない点も押さえておきましょう。

47
00:03:14.056 --> 00:03:20.671
インヘリットやイニシャルといった共通キーワードの考え方は、ほかのプロパティと同じです。

48
00:03:20.671 --> 00:03:27.902
特に初期値のゼロは、並び替えの基準点として何度も登場しますので、しっかり押さえておきましょう。

49
00:03:27.902 --> 00:03:29.481
実例を見ていきます。

50
00:03:29.481 --> 00:03:32.324
まずエイチティーエムエルの用意です。

51
00:03:32.324 --> 00:03:36.430
ステージという親の箱の中に、項目が三つ入っています。

52
00:03:36.430 --> 00:03:43.694
一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。

53
00:03:43.694 --> 00:03:49.222
頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。

54
00:03:49.222 --> 00:03:52.064
親と子の構造そのものが例の一部です。

55
00:03:52.064 --> 00:03:58.065
この例では、二番目に書かれた対象を、シーエスエスだけで前や後ろへ動かします。

56
00:03:58.065 --> 00:04:04.698
三つの項目は横並びになる想定で、左から一、二、三と表示される状態がスタート地点です。

57
00:04:04.698 --> 00:04:10.857
エイチティーエムエルは書き換えず、見た目だけがどう変わるかに注目してください。

58
00:04:10.857 --> 00:04:16.366
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

59
00:04:16.366 --> 00:04:23.474
ステージはディスプレイ、フレックスとし、隙間はれい点ごレム、項目は横に並びます。

60
00:04:23.474 --> 00:04:30.049
ステージや項目には、余白や枠線、背景色といった土台の見た目を先に整えます。

61
00:04:30.049 --> 00:04:35.913
そして主役は最後の行で、デモにオーダー、マイナスいちを指定します。

62
00:04:35.913 --> 00:04:41.244
すると二番目に書かれた対象が、一番前へ移動して表示されます。

63
00:04:41.244 --> 00:04:48.352
もともとの並びは一、二、三でしたが、画面上は対象、項目一、項目三の順になります。

64
00:04:48.352 --> 00:04:52.972
土台は共通なので、最後の指定だけに注目してください。

65
00:04:52.972 --> 00:04:59.725
枠線が太く背景が付いた対象が前に来るので、移動したことがひと目で分かります。

66
00:04:59.725 --> 00:05:01.744
値を変えて比べてみましょう。

67
00:05:01.744 --> 00:05:06.358
最後のオーダーの値だけを、マイナスいちから、いちへ置き換えます。

68
00:05:06.358 --> 00:05:09.963
ファイルを保存してブラウザーを再読み込みすると、二番目に書かれた対象が、

69
00:05:09.963 --> 00:05:13.568
今度は一番後ろへ移動します。

70
00:05:13.568 --> 00:05:16.740
画面上は項目一、項目三、対象の順になります。

71
00:05:16.740 --> 00:05:19.769
エイチティーエムエルは一切変えていません。

72
00:05:19.769 --> 00:05:26.258
値の符号ひとつで、前へ出すか後ろへ回すかが切り替わる点が、オーダーの分かりやすい特徴です。

73
00:05:26.258 --> 00:05:30.295
比較のコツは、変えるのはこの値ひとつだけにすることです。

74
00:05:30.295 --> 00:05:37.505
前へ出すマイナスいちと、後ろへ回すいち、この二つを比べるだけでも、オーダーの働きは十分につかめます。

75
00:05:37.505 --> 00:05:39.525
間違えやすい点を整理します。

76
00:05:39.525 --> 00:05:44.142
いちばん大切なのは、見た目の順番と、意味の順番がずれることです。

77
00:05:44.142 --> 00:05:51.644
オーダーで前後を入れ替えても、読み上げソフトやタブキーでの移動は、エイチティーエムエルの順番のままです。

78
00:05:51.644 --> 00:05:55.973
見た目と操作の順番が食い違うと、利用者が迷う原因になります。

79
00:05:55.973 --> 00:06:03.043
意味のある並びは、まずエイチティーエムエル自体で整え、オーダーは見た目の微調整に使うのが基本です。

80
00:06:03.043 --> 00:06:09.102
たとえばボタンやリンクの並びを大きく入れ替えると、視覚と操作のずれが特に目立ちます。

81
00:06:09.102 --> 00:06:16.605
もう一つ、親がフレックスやグリッドになっていないと効かない点も、親と子の混同とあわせて注意してください。

82
00:06:16.605 --> 00:06:18.730
効かないときの確認手順です。

83
00:06:18.730 --> 00:06:25.562
まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。

84
00:06:25.562 --> 00:06:31.179
次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。

85
00:06:31.179 --> 00:06:37.403
スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。

86
00:06:37.403 --> 00:06:45.146
コンピューテッドで最終的な値を確認し、親の表示方式がフレックスかグリッドになっているかも調べましょう。

87
00:06:45.146 --> 00:06:52.433
最後に、三百二十ピクセル程度の画面幅や、キーボード操作でも内容を利用できるかを確かめてください。

88
00:06:52.433 --> 00:06:58.657
ひとつずつ切り分けることで、原因が値なのか、親の設定なのかを特定しやすくなります。

89
00:06:58.657 --> 00:07:00.419
最後に互換性とまとめです。

90
00:07:00.419 --> 00:07:05.502
二千二十六年九月確認の記録では、クロームは二十九以降、エッジは十二以降、

91
00:07:05.502 --> 00:07:10.584
ファイアフォックスは二十以降で補足条件あり、サファリは九以降で対応しています。

92
00:07:10.584 --> 00:07:15.464
アンドロイド版クロームは二十九以降、アイオーエス版サファリは九以降です。

93
00:07:15.464 --> 00:07:22.105
練習は、まずマイナスいちといちの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。

94
00:07:22.105 --> 00:07:22.918
まとめます。

95
00:07:22.918 --> 00:07:27.527
オーダーは値の小さい順に並べる指定で、初期値はゼロ、継承はしません。

96
00:07:27.527 --> 00:07:32.541
関連するアライン・セルフやフレックスもあわせて確認すると理解が深まります。

97
00:07:32.541 --> 00:07:38.505
見た目だけを変える便利な指定だからこそ、意味の順番への配慮とセットで使うことが大切です。

98
00:07:38.505 --> 00:07:39.725
お疲れさまでした。