メディアクエリを使わずにどこまでレスポンシブレイアウトの調整ができるか挑戦しました。
制作したサイトはこちらよりご覧いただけます。
概要
Webプログラマー養成科の職業訓練では、「自分が身につけた（つけたい）Webサイト制作の技術のシェア」というテーマで朝礼を行いました。
私は、「メディアクエリを使わずに、どこまでレスポンシブレイアウトの調整ができるか挑戦する」というテーマで発表しました。
Gridを使った表組みのデザインは、メディアクエリなしでもレスポンシブ対応ができる代表的な方法ということで、
レスポンシブレイアウトに使える単位などを使用しながら、Gridの使い方を紹介するサイトを作成しました。
制作
Gridの表組みレイアウトを実装したあとは、レスポンシブレイアウトで使える単位を調べて、実際にこのサイト上でテストをしながら組み込んでいきました。
％やemの他に以下のものを使ってみました。
・calc：フォントサイズ
・clamp：ヘッダーの高さ
・vw、vh：ヒーローイメージ内の余白
・aspect-ratio：ヒーローイメージ画像の比率
・minmax：Gridレイアウト
問題点と解決方法
単位の使い分けや、相対値と絶対値の使い所の線引きに悩みました。一つを相対値とするとその周りの要素も相対値で指定しなければ綺麗なレイアウトにならないかな？と思ったからです。
使い分けの線引きとしては、カードやボタンなどテキスト周りの調整にはemを、ヒーローイメージは画面幅が影響しそうだったのでvwやvhを使うなどを考えて実装してみました。
それぞれ、何を基準として計算される単位なのかを知ることが考えのヒントになりました。