CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif

[coliss]

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニック。

[tmayuko312]

ほーん新しいテクニックあるかな〜と見だしたら本当に仕事でよく遭遇する挙動とよく使っている対応方法ばかりでだんだんムカムカしてきてそっ閉じしてしまった。まったりしてる時に見てはいけないものだった。

[yarumato]

“FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決”

[ikkitang1211]

よい

[n-masayuki]

css

[spark7]

「overscroll-behavior-y」混迷を極めすぎてるな...

[fai_fx]

( ..)φメモメモ

[PerolineLuv]

これはコピペで使えそうじゃ！（仕様と挙動理解してから使えよ）

[ko-ya-ma]

よくある崩れの予防策集

[kuracom]

overscroll-behavior と画像の background-color 知らんかった… / flexboxの中の画像が期待通りの幅にならない時は min-width で補正したりする

[field_combat]

細かなtips集