COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

最新のCLS対応はaspect-ratioがベスト!padding-topはもう古い

  • Web制作ハウツー
  • UIUX・サイト設計
  • フロントエンド(HTML/CSS)
最新のCLS対応はaspect-ratioがベスト!padding-topはもう古い

以前に自作スライダー作成を交えてCLS対応をご紹介しました。

【CLS改善】CLSスコアがスライダーで低下!原因と改善方法

この時に説明したpadding-topを使って画像分の高さをあからじめ保持させる対応が、CLS対応の手法としてはもう古いようです。現在のトレンドはaspect-ratio。

aspect-ratioを使ったコードの方が、短くシンプルで分かりやすいです。
今回は簡単なサンプルコードと共に、CLS対応のトレンドであるaspect-ratioについてご紹介します。

aspect-ratioとは

aspect-ratioはアスペクト比でボックスのサイズを指定するCSSプロパティです。

アスペクト比とは

アスペクト比とは縦の長さと横の長さの比のことで、縦横比ともいいます。
一般的に「横の長さ:縦の長さ」と表記します。

例
640(横)×480(縦)→640:480→4:3

使い方

さっそくサンプルコードを見てみましょう。

<div></div>

これは中身が空のdivなので表示上のサイズは幅100%・高さ0です。
アスペクト比でいうならば1:0のサイズです。
この空divにaspect-ratioを指定してみます。

<div></div>
<style>
div {
  aspect-ratio: 2/1;
}
</style>

このようにaspect-ratio: 2/1; を指定することで、空divであってもアスペクト比2:1のサイズを作ることができます。
表示されるサイズは、divの幅が100pxならば高さは50px、幅50pxなら高さ25px…と指定したアスペクト比を保った相対的なサイズになります。

用途

aspect-ratioは要素のサイズを要素の中に入るモノのボリュームに依存せずに作れるので、サイズを揃えるシーンで使えます。

以下はその例です。

カード体裁のサイズを揃える

flexを使った場合、行ごとのサイズは揃いますが、全てのサイズを揃えることはできません。
aspect-ratioを使えばアスペクト比のサイズが一律にあたるので、全てのサイズが揃います。

サポートブラウザの状況も見てみましょう。

サポートブラウザ状況

対応 未対応
Edge
Firefox
Chrome
Safari
Opera
Android Browser
Chrome for Android
Firefox for Android
IE
Safari on iOS
Opera Mini
Opera Mobile
UC Browser for Android
Samsung Internet
QQ Browser
Baidu Browser
KaiOS Browser

※2021/07/06現在

主要ブラウザはほぼすべてサポートしている、と言っていいでしょう。
とはいえサポートしていないブラウザもあるので、高さ・サイズを揃えるといった見た目のレイアウト調整を目的として使用する場合は、念のため注意しましょう。

この後にご紹介するCLS対応を目的とした用途であれば全く問題ございません。

最新のサポート状況に関しては以下のサイトを都度ご確認ください。

参考

Can I use

画像のCLS対応

「アスペクト比を保った相対的なサイズが作れる」というaspect-ratioの特長は画像のCLS対応にも応用できます。

比較を兼ねてaspect-ratioを使う例とpadding-topを使う例を2パターンのCLS対応をご紹介します。

はじめに以下がaspect-ratioを使ったCLS対応になります。

1. aspect-ratioを使ったCLS対応

サンプルコード

<figure><img src="200x120.png" alt="幅200px高さ120pxの画像"></figure>
<style>
figure {
  overflow: hidden;
  aspect-ratio: 200/120;
}
figure img {
  width: 100%;
  height: auto;
}
</style>

aspect-ratioの値には分かりやすく画像の幅/高さをそのまま入れました。実際のコードとして書く場合は

200/120→5/3

と最小の値を指定した方がスマートです。

つづいてpadding-topを使ったCLS対応が下記。

2. padding-topを使ったCLS対応

サンプルコード

<figure><img src="200x120.png" alt="幅200px高さ120pxの画像"></figure>
<style>
figure {
  overflow: hidden;
  position: relative;
}
figure:before {
  content: '';
  display: block;
  padding-top: calc(120/200*100%);
}
figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
</style>

2つのコードの長さを比べてください。
aspect-ratioを使うコードの方が少ないですね。指定する値に関してもpadding-topのような計算式ではなく、画像の幅と高さをスラッシュ(/)区切りで入れるだけとシンプルで分かりやすいです。

このように比較してみるとaspect-ratioの方が使いやすさ・実装しやすさで優れているのは明らかです。padding-top は完敗(笑)
今日からはpadding-top をやめてaspect-ratioを使いましょう!

おわりに

今回古い手法としてあらためてご紹介したpadding-topを使ったCLS対応ですが、私の記憶ではpadding-topがCLS対応の技術として紹介されてから、1年経つか経たないか。Webの技術は移り変わりが早いなと、あらためて実感しました。

今後も新しい技術やトレンドにアンテナを張りつつ、何か「おっ!」というモノがあれば、またこのブログを通じてご紹介していきたいと思います。

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2021/08/02

土田

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

UIUX・サイト設計・フロントエンド(HTML/CSS)の関連記事はこちら

  • 【徹底解説】チャットボットとは?機能・導入メリット・作り方まで詳しく解説

    チャットボットの基本機能から、導入メリット、開発方法までをWeb制作会社クーシーが詳しく解説。Webサイトでの問い合わせ対応を自動化し、業務の効率化を実現するポイントとは?Web担当者向けに、成功するチャットボットの運用方法も紹介します。

    • UIUX・サイト設計
    • PM/ディレクション
  • Webデザインとは?依頼する時にも役立つ基礎から徹底解説!

    Webデザインとは、サイトの見た目や使いやすさなどを設計し、制作を行うことを指します。これには、デザインの構築、レイアウト設計、色彩選定、グラフィックの作成、UIUX設計などが含まれます。Webデザイナーが基礎からわかりやすく解説します。

    • UIUX・サイト設計
    • WebデザインTips
  • UI/UXとは?Webデザインに取り入れるための5つのポイント

    UIはUser Interfaceの略。ユーザーがなんらかの対象と接触するとき、その接点となるものです。そしてUXはUser Experienceの略。サービスなどの利用を通じて、ユーザーが得る体験です。UIとUXは比較的似ており、詳しく解説していきます。

    • UIUX・サイト設計
    • WebデザインTips
  • ScrollTriggerで途中から横スクロールさせる方法【GSAP入門】

    この記事では、スクロールすると画面が横に推移していくページをサンプルに「GSAP(ジーサップ)」と、その拡張機能である「ScrollTrigger」の基本や導入についてご紹介していきます。

    • フロントエンド(HTML/CSS)
  • Webアクセシビリティ入門:誰もが使いやすいWebサイトを作るための第一歩

    本記事では、Webアクセシビリティの基本概念、なぜそれが必要なのか、Webアクセシビリティのポイントついて詳しく解説していきます。

    • UIUX・サイト設計
  • 【アクセシビリティ法規制】世界各国の動向とあなたのサイトへの影響

    今後必ず必要となってくるWebアクセシビリティへの対応の準備として、Webアクセシビリティに関する世界各国の法規制とその動向を探って行きます。

    • UIUX・サイト設計
  • 真似したい!404ページ秀逸デザイン11選【海外サイトもあり】

    ユーザーにユーモアを提示できる、404ページの秀逸デザインを国内・国外から厳選して10個紹介します!

    • 採用サイト
    • UIUX・サイト設計
  • 【おすすめ6選】サイト内検索の導入方法やツールを徹底解説!

    サイト内検索とは、特定のウェブサイト内での情報を検索するための機能やツールのことです。この記事では実際の導入方法やおすすめツールも紹介しています。

    • UIUX・サイト設計

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • Core Web Vitals(パフォーマンス最適化)

    専門家がサイト表示速度を改善し、ユーザー満足度を向上。Google推奨のパフォーマンス指標最適化でSEO効果も高めます。

  • UIUX設計

    人間中心設計で価値ある体験を創造。SEO・AIOにも貢献し、LTV向上につながる直感的な画面デザインを実現します。

  • Web制作

    コーポレートサイト、採用サイト、ECサイトまで。最新AI技術を掛け合わせ、各サイトの特性に合わせたUIUX設計を実現します。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • 最新のCLS対応はaspect-ratioがベスト!padding-topはもう古い
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.