CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ

[coliss]

CSSコンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすか。

[ejointjp]

ウェブってhtml cssベースじゃない新しいなにかに置き換えることってできないものなのかな。Wordでイラレみたいなことをやろうとしてとてつもなく複雑化してしまったように感じる

[ustam]

ブラウザが対応していない意外はいいね。

[kuracom]

これ早く広く使えるようになるといいな。画面幅より要素の幅で変化付ける方が理にかなってる。

[otchy210]

これとスコープ付き css が一般化した暁には、HTML メールのレスポンシブ化が理論上可能になるな。やりたいか…は別の話だが。

[d4-1977]

まだまだ先の機能だけれど、気になる

[ku__ra__ge]

後知恵で言えばメディアクエリもbody要素の幅を利用したコンポーネントクエリにすべきだったな

[mimosafa]

media query と同じスコープで記述するのは抵抗があるな。各要素の内部で書くのが良さそう。各ブラウザの対応はよ。

[suika3417]

cssは変化が早く、有能なモノほどあっという間に広がるのでこれも気がついたら標準の知識になってそうだな…

[spark7]

gridと相性良さそうね。確かに何が何でも画面サイズを基準にする必要はなかった。

[shimarisugi]

はやくこいこい

[nonono-notch]

より細やかなコーディング方法が選べるようになるのは良いがコーディングが楽になる物でもない。親幅＝重要度であればいいが、そうじゃない場合はmedia幅によって要素の重要度が変わりかねない。兼ね合い次第って感じ

[kijtra]

けっこう前から必要性を訴えてる人いたよね。はやく標準化してほしい。

[ttkazuma]

選択肢が増えるのはありがたい

[kns_1234]

ビューポートの幅でなく親要素の幅に基づいてレイアウトを変更する