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で絶対配置する必要が…

zenn.dev
Related Topics: CSS Web Standards / Browsers
2 comments
  • マネーフォワードのアドベントカレンダーで記事を公開しました💐

    2021年もたくさんのCSSが使えるようになりました。
    中でもとくに便利だと感じた3つの機能を、デモを作って紹介しました✨

    #CSS