レスポンシブコーディング、“コンテナクエリ”について考える

久しぶりの更新です。
ムダなブログをたくさん作ってしまい、いーかげん整理しないきゃいけないのにいまだ放置気味のやまだです(=゚ω゚)ノ(文章考えるのに時間がかかり下書きばっかりw)

最近、TwitterがXに変わってから情報収集にしか使っていなく、特にこのWeb業界の変化が早くて、どこで折り合いをつけるか常々模索しながらしぶとく生き残っています。
CSSも進化していて、新しい要素がどんどん追加されているけど実際に実務で使えるかどうかが問題なのであれこれ検証しながらなんとかついていってる感じ。

で、最近実務でコンテナクエリを使う機会がありそこで思ったことなど。
結論から言うと、コンテナクエリだけのコーディングはブログとか、テキストベースのサイトに向いてるな、と。

静的なデザインカンプを基準に作業を進めるのが難しくなり、デザインと実装の間でより細かな調整が必要になるかもしれません。

当ブログのレスポンシブコーディングについて

そうなの。
コンテナクエリって便利そうだけど、LPとかピクパー求められるサイトとかスマホ~PCまでがっつりデザインが決まっていると、メディアクエリとコンテナクエリのブレイクポイントのタイミングを合わせるのがなかなか大変で…、特にデザイン性の強いサイトは余白を大事にする傾向があるので、この場合はPXで固定してメディアクエリにした方が都合がよい(メンテナンス調整が大変になるけど…)。

メディアクエリが画面サイズ基準に対して、コンテナクエリの基準はコンポーネント(パーツ)になるので、全体的な余白などは全部統一して文字サイズに合わせて余白を変化せる。
そのためにclamp()で計算するなどパーツ毎でデザインを考えどこのページでも配置できるCSS構成にするのが望ましい。PCだけデザインがあって、あとはデザイニングインブラウザの手法でコーディングするのがいいかも。
だから、デザインとコーディング一緒にやらないと全コンテナクエリでのレスポンシブコーディングは難しそう。そして、デザイナーさんにもコーディング知識がある方がなおいい。

XでフォローしているいるTAKさん、この方の考え方や技術は、毎回勉強になるなー(`・ω・´)
コチラ参考にして、今度自分のブログ全コンテナクエリで作ってみます。