WEBVTT

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

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

3
00:00:03.417 --> 00:00:06.123
今回のテーマは、アスペクトレシオです。

4
00:00:06.123 --> 00:00:10.395
幅と高さの比率、つまり箱の形の縦横比を決めるプロパティです。

5
00:00:10.395 --> 00:00:18.084
たとえば横がじゅうろく、縦がきゅうと指定すれば、幅が変わっても、その比率を保ったまま高さが自動で決まります。

6
00:00:18.084 --> 00:00:21.572
これまでは高さを別に計算したり、余白のテクニックを使ったりしていた場面で、

7
00:00:21.572 --> 00:00:25.061
今はこの一行が主役です。

8
00:00:25.061 --> 00:00:29.831
この動画では、じゅうろく対きゅうと、いち対いちを比べながら、値の読み方や、

9
00:00:29.831 --> 00:00:34.601
比率が効く条件、効かないときの確認まで、順番に見ていきます。

10
00:00:34.601 --> 00:00:40.012
スマートフォンとパソコンで画面幅が変わる今の時代に、特に頼りになる指定です。

11
00:00:40.012 --> 00:00:41.631
まず基本の書き方です。

12
00:00:41.631 --> 00:00:49.136
スライドのように、対象のクラスにアスペクトレシオと、幅と高さの比率をスラッシュで区切って書くだけです。

13
00:00:49.136 --> 00:00:55.022
プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。

14
00:00:55.022 --> 00:00:59.879
クラス名は、エイチティーエムエルのクラス属性と一致させてください。

15
00:00:59.879 --> 00:01:01.939
仕様上の初期値はオートです。

16
00:01:01.939 --> 00:01:06.207
これは、内容や要素自身の固有の比率に任せるという意味です。

17
00:01:06.207 --> 00:01:08.414
通常は親から子へ継承しません。

18
00:01:08.414 --> 00:01:12.829
必要な要素ごとに、自分で指定するものだと覚えておきましょう。

19
00:01:12.829 --> 00:01:19.304
半角スペースの有無など、細かな書き方は自由度がありますが、読みやすい形で統一しましょう。

20
00:01:19.304 --> 00:01:21.053
値の読み方を整理します。

21
00:01:21.053 --> 00:01:23.676
スラッシュの前が幅、後ろが高さです。

22
00:01:23.676 --> 00:01:27.393
じゅうろくスラッシュきゅうは、幅じゅうろくに対して高さがきゅうという意味で、

23
00:01:27.393 --> 00:01:31.110
動画でおなじみの横長です。

24
00:01:31.110 --> 00:01:34.607
いちスラッシュいちは幅と高さが同じ、正方形です。

25
00:01:34.607 --> 00:01:39.271
ほかにも、よん対さんや、さん対に、といった比率が自由に書けます。

26
00:01:39.271 --> 00:01:44.518
数字はピクセル数のような長さではなく、あくまで割合だという点が大切です。

27
00:01:44.518 --> 00:01:50.640
幅が三百二十ピクセルなら、じゅうろく対きゅうの高さは百八十ピクセルに自動でなります。

28
00:01:50.640 --> 00:01:53.846
元の数字を約分しても結果は同じ形になります。

29
00:01:53.846 --> 00:01:59.676
縦長のさん対よんのような比率にすれば、スマートフォン向けの縦長カードも作れます。

30
00:01:59.676 --> 00:02:01.866
ここが一番大切なポイントです。

31
00:02:01.866 --> 00:02:07.559
アスペクトレシオは、幅と高さの少なくとも一方が自動計算される場面で役立ちます。

32
00:02:07.559 --> 00:02:12.230
たとえば幅だけを指定すれば、比率を使って高さが自動で決まります。

33
00:02:12.230 --> 00:02:15.734
逆に高さだけを指定すれば、幅が自動で決まります。

34
00:02:15.734 --> 00:02:21.865
実例でも、幅は親いっぱいのひゃくぱーせんと、高さはオートという組み合わせを使います。

35
00:02:21.865 --> 00:02:29.894
ただし、中身の文章などが多くて、比率で決まる高さに収まらない場合は、内容を守るために箱が伸びることがあります。

36
00:02:29.894 --> 00:02:35.295
比率は希望であり、内容があふれる事態は避けられる、と理解しておきましょう。

37
00:02:35.295 --> 00:02:40.696
幅と高さのどちらを基準にするかは、レイアウト側の都合で決めてかまいません。

38
00:02:40.696 --> 00:02:43.159
初心者がつまずきやすい注意点です。

39
00:02:43.159 --> 00:02:48.953
幅と高さを両方とも固定の値で指定してしまうと、比率が優先されない場合があります。

40
00:02:48.953 --> 00:02:53.734
すでに両辺が決まっているので、計算する余地が残っていないからです。

41
00:02:53.734 --> 00:02:58.659
比率を使いたいときは、どちらか一方をオートのままにしておきましょう。

42
00:02:58.659 --> 00:03:05.903
もう一つ、画像のような要素では、読み込まれた後に、その画像自身が持つ固有の比率との関係も確認します。

43
00:03:05.903 --> 00:03:11.045
なお、オートと比率を並べて書く構文もあり、固有の比率がある場合はそちらを優先し、

44
00:03:11.045 --> 00:03:16.188
ない場合は指定した比率を使う、という細かな使い分けもできます。

45
00:03:16.188 --> 00:03:21.548
指定したつもりで効かないときは、まずこの両辺固定を真っ先に疑ってください。

46
00:03:21.548 --> 00:03:23.043
ここからは実例です。

47
00:03:23.043 --> 00:03:28.876
エイチティーエムエルでは、ステージという親の中に、デモという箱を一つ置きます。

48
00:03:28.876 --> 00:03:32.614
中には、折り返しが確認できる程度の文章を入れます。

49
00:03:32.614 --> 00:03:37.549
シーエスエスでは、デモに内側の余白と、濃い緑色の太い枠線、薄い黄緑色の背景を付け、

50
00:03:37.549 --> 00:03:42.484
幅はひゃくぱーせんと、高さはオートにしておきます。

51
00:03:42.484 --> 00:03:47.345
土台はそのままにして、最後に加えるアスペクトレシオの一行だけを切り替えて、

52
00:03:47.345 --> 00:03:52.205
じゅうろく対きゅうと、いち対いちの違いを比べていきます。

53
00:03:52.205 --> 00:03:57.888
親の幅が変われば、それに連動して箱の高さも変わる様子も観察してみてください。

54
00:03:57.888 --> 00:04:03.720
ファイルを保存してブラウザーで開き、土台の箱が見えることを先に確かめましょう。

55
00:04:03.720 --> 00:04:07.368
土台ができたら、今回変更する一行を加えます。

56
00:04:07.368 --> 00:04:12.839
デモに、アスペクトレシオ、じゅうろくスラッシュきゅうを指定します。

57
00:04:12.839 --> 00:04:17.233
すると、幅いっぱいに広がった箱に対して、そのじゅうろく分のきゅうの高さが自動で決まり、

58
00:04:17.233 --> 00:04:21.626
横長の箱になります。

59
00:04:21.626 --> 00:04:28.093
ブラウザーの幅を狭めても、箱は小さくなりますが、横長の形そのものは崩れません。

60
00:04:28.093 --> 00:04:36.217
動画の埋め込み枠や、サムネイル画像の置き場など、形を保ちたい場所で、まさにこの動きが求められます。

61
00:04:36.217 --> 00:04:40.859
高さを自分で計算していない、という点に注目してください。

62
00:04:40.859 --> 00:04:46.828
横長は映画や動画の画面と同じ形なので、映像の置き場として自然に見えます。

63
00:04:46.828 --> 00:04:52.587
では、最後の一行の値だけを、いちスラッシュいちに変えてみましょう。

64
00:04:52.587 --> 00:04:54.855
他の指定はすべて同じです。

65
00:04:54.855 --> 00:05:03.406
今度は幅と高さが同じ長さになり、先ほどとまったく同じ幅のまま、高さがぐっと増えて正方形になります。

66
00:05:03.406 --> 00:05:09.513
文章の量も、余白も、枠線も変えていないのに、箱の形だけが変わりました。

67
00:05:09.513 --> 00:05:12.829
この比較が、このプロパティの本質です。

68
00:05:12.829 --> 00:05:20.158
比率を変えるとは、幅か高さのどちらか一方を、もう一方から自動で決め直すことなのです。

69
00:05:20.158 --> 00:05:25.916
正方形は、アイコンやサムネイルを並べる場面でもよく使われる形です。

70
00:05:25.916 --> 00:05:32.024
同じ手順で、よん対さんやさん対にに変えれば、好みの形を自由に試せます。

71
00:05:32.024 --> 00:05:33.223
使いどころです。

72
00:05:33.223 --> 00:05:35.772
代表例は、動画や画像の表示枠です。

73
00:05:35.772 --> 00:05:43.868
画像が読み込まれる前から比率で枠の形を確保しておけば、読み込み後にページががたっとずれる現象を抑えられます。

74
00:05:43.868 --> 00:05:48.665
カードやサムネイルを並べるときに形をそろえるのにも向いています。

75
00:05:48.665 --> 00:05:54.662
画像そのものに使う場合は、オブジェクトフィットと組み合わせることが多く、

76
00:05:54.662 --> 00:06:00.659
枠の形はアスペクトレシオで決め、中の画像のはみ出し方はオブジェクトフィットで調整します。

77
00:06:00.659 --> 00:06:05.157
役割分担を意識すると、似たプロパティ同士で迷わなくなります。

78
00:06:05.157 --> 00:06:10.404
あらかじめ形が決まっていると、一覧ページ全体の見た目も整って見えます。

79
00:06:10.404 --> 00:06:12.605
効かないと感じたときの確認です。

80
00:06:12.605 --> 00:06:16.457
最初に疑うのは、幅と高さの両方が固定されていないかです。

81
00:06:16.457 --> 00:06:20.171
どちらか一方がオートになっているかを確認してください。

82
00:06:20.171 --> 00:06:26.362
次に、スタイルシートが読み込めているか、セレクターとクラスの名前が一致しているかを見ます。

83
00:06:26.362 --> 00:06:31.452
開発者ツールでは、スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、

84
00:06:31.452 --> 00:06:36.542
コンピューテッドで最終的な幅と高さの値も調べます。

85
00:06:36.542 --> 00:06:44.246
文章量が多くて箱が伸びているだけ、という場合もありますので、内容を一時的に減らして比べるのも有効な切り分けです。

86
00:06:44.246 --> 00:06:49.336
小さな画面幅でも比率が保たれるかどうかも、あわせて確認しておくと安心です。

87
00:06:49.336 --> 00:06:51.096
最後に互換性とまとめです。

88
00:06:51.096 --> 00:06:56.172
アスペクトレシオは、クローム八十八以降、エッジ八十八以降、ファイアフォックス八十九以降、

89
00:06:56.172 --> 00:07:01.249
サファリ十五以降と、現在の主要ブラウザーで広く対応しています。

90
00:07:01.249 --> 00:07:02.061
まとめます。

91
00:07:02.061 --> 00:07:07.611
アスペクトレシオは、幅と高さの比率を指定し、初期値はオート、継承はしませんでした。

92
00:07:07.611 --> 00:07:14.515
大切な条件は、少なくとも一方が自動計算であることで、両方固定すると比率が優先されない場合がありました。

93
00:07:14.515 --> 00:07:18.983
練習として、実例でじゅうろく対きゅうと、いち対いちの違いを言葉で説明し、

94
00:07:18.983 --> 00:07:23.450
次に親の幅だけを変えて結果がどうなるかも比べてみてください。

95
00:07:23.450 --> 00:07:24.668
お疲れさまでした。

96
00:07:24.668 --> 00:07:29.948
値の意味だけでなく、効く条件まで言えるようになれば、このプロパティは卒業です。