SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、アスペクトレシオです。
  4. 0:06幅と高さの比率、つまり箱の形の縦横比を決めるプロパティです。
  5. 0:10たとえば横がじゅうろく、縦がきゅうと指定すれば、幅が変わっても、その比率を保ったまま高さが自動で決まります。
  6. 0:18これまでは高さを別に計算したり、余白のテクニックを使ったりしていた場面で、
  7. 0:21今はこの一行が主役です。
  8. 0:25この動画では、じゅうろく対きゅうと、いち対いちを比べながら、値の読み方や、
  9. 0:29比率が効く条件、効かないときの確認まで、順番に見ていきます。
  10. 0:34スマートフォンとパソコンで画面幅が変わる今の時代に、特に頼りになる指定です。
  11. 0:40まず基本の書き方です。
  12. 0:41スライドのように、対象のクラスにアスペクトレシオと、幅と高さの比率をスラッシュで区切って書くだけです。
  13. 0:49プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  14. 0:55クラス名は、エイチティーエムエルのクラス属性と一致させてください。
  15. 0:59仕様上の初期値はオートです。
  16. 1:01これは、内容や要素自身の固有の比率に任せるという意味です。
  17. 1:06通常は親から子へ継承しません。
  18. 1:08必要な要素ごとに、自分で指定するものだと覚えておきましょう。
  19. 1:12半角スペースの有無など、細かな書き方は自由度がありますが、読みやすい形で統一しましょう。
  20. 1:19値の読み方を整理します。
  21. 1:21スラッシュの前が幅、後ろが高さです。
  22. 1:23じゅうろくスラッシュきゅうは、幅じゅうろくに対して高さがきゅうという意味で、
  23. 1:27動画でおなじみの横長です。
  24. 1:31いちスラッシュいちは幅と高さが同じ、正方形です。
  25. 1:34ほかにも、よん対さんや、さん対に、といった比率が自由に書けます。
  26. 1:39数字はピクセル数のような長さではなく、あくまで割合だという点が大切です。
  27. 1:44幅が三百二十ピクセルなら、じゅうろく対きゅうの高さは百八十ピクセルに自動でなります。
  28. 1:50元の数字を約分しても結果は同じ形になります。
  29. 1:53縦長のさん対よんのような比率にすれば、スマートフォン向けの縦長カードも作れます。
  30. 1:59ここが一番大切なポイントです。
  31. 2:01アスペクトレシオは、幅と高さの少なくとも一方が自動計算される場面で役立ちます。
  32. 2:07たとえば幅だけを指定すれば、比率を使って高さが自動で決まります。
  33. 2:12逆に高さだけを指定すれば、幅が自動で決まります。
  34. 2:15実例でも、幅は親いっぱいのひゃくぱーせんと、高さはオートという組み合わせを使います。
  35. 2:21ただし、中身の文章などが多くて、比率で決まる高さに収まらない場合は、内容を守るために箱が伸びることがあります。
  36. 2:29比率は希望であり、内容があふれる事態は避けられる、と理解しておきましょう。
  37. 2:35幅と高さのどちらを基準にするかは、レイアウト側の都合で決めてかまいません。
  38. 2:40初心者がつまずきやすい注意点です。
  39. 2:43幅と高さを両方とも固定の値で指定してしまうと、比率が優先されない場合があります。
  40. 2:48すでに両辺が決まっているので、計算する余地が残っていないからです。
  41. 2:53比率を使いたいときは、どちらか一方をオートのままにしておきましょう。
  42. 2:58もう一つ、画像のような要素では、読み込まれた後に、その画像自身が持つ固有の比率との関係も確認します。
  43. 3:05なお、オートと比率を並べて書く構文もあり、固有の比率がある場合はそちらを優先し、
  44. 3:11ない場合は指定した比率を使う、という細かな使い分けもできます。
  45. 3:16指定したつもりで効かないときは、まずこの両辺固定を真っ先に疑ってください。
  46. 3:21ここからは実例です。
  47. 3:23エイチティーエムエルでは、ステージという親の中に、デモという箱を一つ置きます。
  48. 3:28中には、折り返しが確認できる程度の文章を入れます。
  49. 3:32シーエスエスでは、デモに内側の余白と、濃い緑色の太い枠線、薄い黄緑色の背景を付け、
  50. 3:37幅はひゃくぱーせんと、高さはオートにしておきます。
  51. 3:42土台はそのままにして、最後に加えるアスペクトレシオの一行だけを切り替えて、
  52. 3:47じゅうろく対きゅうと、いち対いちの違いを比べていきます。
  53. 3:52親の幅が変われば、それに連動して箱の高さも変わる様子も観察してみてください。
  54. 3:57ファイルを保存してブラウザーで開き、土台の箱が見えることを先に確かめましょう。
  55. 4:03土台ができたら、今回変更する一行を加えます。
  56. 4:07デモに、アスペクトレシオ、じゅうろくスラッシュきゅうを指定します。
  57. 4:12すると、幅いっぱいに広がった箱に対して、そのじゅうろく分のきゅうの高さが自動で決まり、
  58. 4:17横長の箱になります。
  59. 4:21ブラウザーの幅を狭めても、箱は小さくなりますが、横長の形そのものは崩れません。
  60. 4:28動画の埋め込み枠や、サムネイル画像の置き場など、形を保ちたい場所で、まさにこの動きが求められます。
  61. 4:36高さを自分で計算していない、という点に注目してください。
  62. 4:40横長は映画や動画の画面と同じ形なので、映像の置き場として自然に見えます。
  63. 4:46では、最後の一行の値だけを、いちスラッシュいちに変えてみましょう。
  64. 4:52他の指定はすべて同じです。
  65. 4:54今度は幅と高さが同じ長さになり、先ほどとまったく同じ幅のまま、高さがぐっと増えて正方形になります。
  66. 5:03文章の量も、余白も、枠線も変えていないのに、箱の形だけが変わりました。
  67. 5:09この比較が、このプロパティの本質です。
  68. 5:12比率を変えるとは、幅か高さのどちらか一方を、もう一方から自動で決め直すことなのです。
  69. 5:20正方形は、アイコンやサムネイルを並べる場面でもよく使われる形です。
  70. 5:25同じ手順で、よん対さんやさん対にに変えれば、好みの形を自由に試せます。
  71. 5:32使いどころです。
  72. 5:33代表例は、動画や画像の表示枠です。
  73. 5:35画像が読み込まれる前から比率で枠の形を確保しておけば、読み込み後にページががたっとずれる現象を抑えられます。
  74. 5:43カードやサムネイルを並べるときに形をそろえるのにも向いています。
  75. 5:48画像そのものに使う場合は、オブジェクトフィットと組み合わせることが多く、
  76. 5:54枠の形はアスペクトレシオで決め、中の画像のはみ出し方はオブジェクトフィットで調整します。
  77. 6:00役割分担を意識すると、似たプロパティ同士で迷わなくなります。
  78. 6:05あらかじめ形が決まっていると、一覧ページ全体の見た目も整って見えます。
  79. 6:10効かないと感じたときの確認です。
  80. 6:12最初に疑うのは、幅と高さの両方が固定されていないかです。
  81. 6:16どちらか一方がオートになっているかを確認してください。
  82. 6:20次に、スタイルシートが読み込めているか、セレクターとクラスの名前が一致しているかを見ます。
  83. 6:26開発者ツールでは、スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、
  84. 6:31コンピューテッドで最終的な幅と高さの値も調べます。
  85. 6:36文章量が多くて箱が伸びているだけ、という場合もありますので、内容を一時的に減らして比べるのも有効な切り分けです。
  86. 6:44小さな画面幅でも比率が保たれるかどうかも、あわせて確認しておくと安心です。
  87. 6:49最後に互換性とまとめです。
  88. 6:51アスペクトレシオは、クローム八十八以降、エッジ八十八以降、ファイアフォックス八十九以降、
  89. 6:56サファリ十五以降と、現在の主要ブラウザーで広く対応しています。
  90. 7:01まとめます。
  91. 7:02アスペクトレシオは、幅と高さの比率を指定し、初期値はオート、継承はしませんでした。
  92. 7:07大切な条件は、少なくとも一方が自動計算であることで、両方固定すると比率が優先されない場合がありました。
  93. 7:14練習として、実例でじゅうろく対きゅうと、いち対いちの違いを言葉で説明し、
  94. 7:18次に親の幅だけを変えて結果がどうなるかも比べてみてください。
  95. 7:23お疲れさまでした。
  96. 7:24値の意味だけでなく、効く条件まで言えるようになれば、このプロパティは卒業です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

aspect-ratioの役割と主な指定値を解説。同じ幅の箱が横長から正方形へ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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