CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方

CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。 ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。 C

[coliss]

CSSのコンテナ単位は、クエリコンテナのサイズを基準にした幅・高さを指定できる単位。

[gyochan]

親要素の幅に応じて複数のレイアウトを持てるがビューポートには依存しないという考え方はとてもイカス。同じページ内でも2カラムで並べた時と3カラムで並べた時では見栄えが違う、みたいなことができる

[TakamoriTarou]

ヤーポンガロンにやられているので、一瞬「あったらしい単位？　なんだあ？作るんじゃねえよｫ、ﾃﾒｪ、SIで、SIでやれや！」と脊髄反射した。はい。失礼しました。帰ります

[hapilaki]

この説明では、親要素に対する%指定よりもどれだけ便利なのかが分からん。

[sucelie]

良さげだけどChromeにもSafariにもまだこれからと言われるとなぁ。勉強しとくに越したことはないんだろうけど。

[ka2nn]

これは嬉しいなー

[mayumayu_nimolove]

単位覚えるのめんどくさいからよろしくやってくれるライブラリ作ろうかな

[spark7]

幅とかは％指定と変わらんだろうけどcalcの中とかに使えるのは良いな。

[leochang2018]

CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。

[Pasta-K]

へ〜便利じゃんと思ったけど、まだ Chrome Canaryでもフラグ付きなのか

[mumei-0]

“新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。”

[sorosoronemui]

おお、便利。レスポンシブだけど、全体のラッパーの最大値設定してるときとかに、vwだけで制御できないからmediaqueryも使わないとならないが、コンテナ依存の単位ならそれだけでフォントサイズ制御できるな。

[phoope]

広まってから覚えよう

[primedesignworks]

シェアの高いブラウザがデフォルトで適用してくれるまでお預けやな。今やると各方面から文句が飛んでくる。

[localnavi]

便利そうなのはいいんだが、今のところChromeで設定しないと使えないということは、普通に使えるまでには2～3年はかかりそう。

[Shinwiki]

ちっと考えまとめてから発表しろよ

[kenzy_n]

単位仕様