全1208文字
Google Chrome、Microsoft Edge、Firefox、Safariといった今どきのWebブラウザーでは、ユーザーの使いやすさを向上するようなWebの表現を、ブラウザーの違いを気にすることなく実装できる。シンプルなコードでWebの表現力をアップさせる最新機能を紹介する。
画像や動画などのアスペクト比（縦横比）を固定してWebページの拡大縮小ができるCSSを紹介します。「aspect-ratio」というCSSプロパティーを使います（表3）。
表3 ●aspecti-ratioプロパティー
[画像のクリックで拡大表示]
aspect-ratioを使うと、例えば、横幅と高さが16:9の動画をWebページに表示するときに、16:9の縦横比を維持しながら、ウインドウの横幅に合わせて動画の表示サイズを変えることができます。
アスペクト比の指定のためには、従来のブラウザーでは複雑なCSSのコードを書く必要がありました。モダンブラウザーで使えるようになったaspect-ratioは、長年開発者から要望の高かった機能です。従来の方法はあまり直観的なコードの書き方ではなかったからです。
図5のように動画のアスペクト比を16:9に固定する例を考えます＊3。図5の左では、YouTubeの動画がブラウザーのウインドウいっぱいに広がっています。図5の右のようにウインドウの横幅を狭くすると、アスペクト比を16:9に保ったまま、動画の表示サイズが小さくなります。
図5 ●ウインドウの横幅に合わせてアスペクト比16:9を維持したまま動画の表示サイズが小さくなる
[画像のクリックで拡大表示]
＊3 サンプルのデモを、 https://tonkotsuboy.github.io/2207_web_nikkeibp/aspect-ratio/index.html で確認できます。
