2021年から開発の現場で使える3つの便利CSS

ARANK

この記事はマネーフォワードアドベントカレンダー2021🎄の13日目の記事です。ブラウザは日々進化しています。2021年もブラウザには多くの新機能が追加されました。私はCSSの新機能を1年かけてチェックしてきましたが、その中でもとりわけ便利だと思った3つの機能を紹介します。いずれも、2021年に全モダンブラウザ（Chrome、Firefox、Microsoft Edge、Safari）で使えるようになったもので、日々の開発をラクにしてくれることでしょう。 動画や画像のアスペクト比を指定できるaspect-ratioプロパティaspect-ratioプロパティとは、ボックスのアスペクト比（幅と高さの比率）を指定するプロパティです。構文aspect-ratio: アスペクト比率▼ 簡単な例/* .box要素のアスペクト比を4:3にする */ .box { aspect-ratio: 4 / 3; } 説明次のように、YouTube動画のアスペクト比率を16:9に固定する例を考えます。動画部分は、iframeで表示されています。<iframe src="動画URL"></iframe> 昔のやりかた: padding-topと絶対配置昔は、iframeのラッパー要素を作り、padding-top: 56.25%;（もしくはpadding-top: calc(100% * 16 / 9); を指定し、iframeをabsoluteで絶対配置する必要が…