HTML,CSSの記述によってCLSのスコアがどう変化するか実験するページ（その２）
Gridレイアウト、固定幅中央寄せ、レスポンシブ
Created:
1. このページの目的
HTML,CSSの記述によってCLSのスコアがどう変化するか実験する。
2. メモ
- HTML, CSS は自由に書き換えて実験する。
- Core Web Vitals といった Chrome 拡張機能を使って CLS のスコアを確認する。
- 毎回、Chrome の新規タブでこのページを開くこと。そうしないと CLS のスコアが 0 くらいしか算出されない。
- 日本語の長い文章がページ端で改行されると、その下の要素に CLS が起きるようだ。
3. ダミー コンテンツ
Dummy patrol cars will be set up beside motorways to frighten speeding motorists.
何もコンテンツがないと実験にならない。
何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく。何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく。。何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく。
何もコンテンツがないと実験にならない。
<img id="img1" src="sample-700.jpg"
alt="" loading="lazy"
srcset="sample-550.jpg 550w,
sample-700.jpg 700w"
sizes="100w">
#img1 {
max-width: 700px;
width: 100%;
/*height: auto;*/
aspect-ratio: 8 / 5;
}