やってはいけないCSSシリーズ高さを基準にしたスタイル指定〜 @container 利用でも解決しない高さ検知実装〜

目次・CSSのみで高さを検知して、スタイルを変えたい・コンテナクエリを利用した実装が可能・可能だけど良くないらしい・デザイナーに打診、それでも要求があればJSで実装 CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜対象・業務でCSSを扱う方・モダン寄りなCSSに興味がある方・CSS好きな人

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜自己紹介じょんじろー 2024年 IT企業新卒入社 FE ぬい活美味しいワッフル探し
UI/UX周りを見るニックネーム：経歴：趣味：最近大阪に遊びに行きました

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 CSSのみで高さを検知して、スタイルを変えたいそういう時、ありますよね＼あるある〜／＼それな〜／＼わかりみ〜／

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 https://codepen.io/john_on_ny/pen/KwgNdRJ 従来の実装だと、ほぼほぼJS実装になるはず。 ↓AIに適当に作ってもらったコードプロンプト：画面幅に応じて1行であれば文字色が青色、2行以上であれば文字色が赤色となるように実装を行ってください。 CSSのみで高さを検知して、スタイルを変えたい topic:

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 JS実装の問題点・resizeイベント・保守・運用コスト高 CSSのみで高さを検知して、スタイルを変えたい topic:

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 https://codepen.io/john_on_ny/pen/qEZJmKP コンテナクエリ(@container)を利用すればいけるコンテナクエリを利用した実装が可能 topic:

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜コンテナクエリを利用した実装が可能 topic: コンテナクエリ(@container) とは・設定した要素の幅に応じて、スタイルを付与できる・メディアクエリが画面幅に対応しているのに対し、コンテナクエリは設定要素の幅のみに依存する https://codepen.io/john_on_ny/pen/OPRbzXB

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜コンテナクエリを利用した実装が可能 topic: しかも全ブラウザ対応！

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜コンテナクエリを利用した実装が可能 topic: JS・resizeイベント非利用で最高の実装！

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜コンテナクエリを利用した実装が可能 topic: JS・resizeイベント非利用で最高の実装！それあんまり良くないよ

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜可能だけど良くないらしい topic: 当時の現場上長 CSSが好きな方正直この方が良くないって言うなら、まあ良くないんやろうなぐらいで納得できるそれだと学びがないので聞いた内容 +
調査した内容を話します先ほどの実装あんまり良くないらしい

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜可能だけど良くないらしい topic: 教えてもらった内容 CSSは、高さの演算をすると、処理がループしてしまいエラーとなる可能性がある。実装ができている状態でも、不安定な状態であるため回避する必要がある。 →でも全ブラウザ対応・実装はできてるから…ってなっちゃう CSSの詳細な仕様を理解しているが故にできるアドバイス

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜可能だけど良くないらしい topic: 教えてもらった内容今回はここを深掘り CSSは、高さの演算をすると、処理がループしてしまいエラーとなる可能性がある。実装ができている状態でも、不安定な状態であるため回避する必要がある。 →でも全ブラウザ対応・実装はできてるから…ってなっちゃう
CSSの詳細な仕様を理解しているが故にできるアドバイス

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜可能だけど良くないらしい topic: ブラウザの高さは宇宙 Google

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜可能だけど良くないらしい topic: 横幅の処理 @media や @container type: inline-size;
では、処理が行われる最大幅は指定した有限またはブラウザ横幅が上限となる Google

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜可能だけど良くないらしい topic: 縦の処理は指定した最大値が存在しない限り無限となるレスポンシブ対応を行う場合高さの指定は基本行わない →@container
type: size; の処理がループしてしまう可能性あり Google

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜可能だけど良くないらしい topic: Google あんまし良くなさそう！可能だけど良くないらしい

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 topic: ではどうするべきか可能だけど良くないらしい

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 topic: デザイナーに打診、それでも要求があればJSで実装従来通りの、resizeイベント利用による実装が望ましい反して、1スタイルにresizeイベントを仕込むのはコストが大きすぎる

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 topic: ①デザイナーに相談、resizeイベント不要のスタイルを提案 ②どうしても実装が必要であれば、JSでの実装（スロットル・デバウンス処理も検討）デザイナーに打診、それでも要求があればJSで実装

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 topic: ①デザイナーに相談、resizeイベント不要のスタイルを提案 ②どうしても実装が必要であれば、JSでの実装（スロットル・デバウンス処理も検討）デザイナーに打診、それでも要求があればJSで実装今回はこちらで解決

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 topic: ・CSSのみで、縦の高さを計算してスタイルを変える処理は、実装可能であっても現時点では危険・どうしても実装する場合はJS実装となるが、 resizeイベントが重いため、なるべく不要で実装できるよう相談・@container自体は悪くない、モダンCSSはどんどん使おうまとめ

CSSで高さを計算することはあまり良くなさそう〜コンテナクエリ実装例〜 topic: mdn @container https://developer.mozilla.org/ja/docs/Web/CSS/Reference/At-rules/@container mdn container-type https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/container-type 今回の内容は2026年3月現在に調査した内容です。今後CSSの状況は大きく変化する可能性があります。
当資料は参考とし、実際に実装を行う際には最新の情報を反映いただけますと幸いです。参考

やってはいけないCSSシリーズ高さを基準にしたスタイル指定〜 @container 利用で...

やってはいけないCSSシリーズ高さを基準にしたスタイル指定〜 @container 利用でも解決しない高さ検知実装〜

じょんじろー

Other Decks in Programming

Featured

Transcript