「なぜ表示崩れは起きるのか CSSカスタマイズで注意するべき3つのポイント」 | in-Pocket インポケット

現在、CSSによる画面開発はレスポンシブデザインであることが当たり前となっており、Bootstrap・Semantic UI・BulmaなどのCSSフレームワークの充実により、高度なレスポンシブ対応CSSを簡単に生成することができ、AutoprefixerやLinterを含んだ開発環境を構築することで、マークアップ作業時にベンダー個別による不具合やタイプミスによる不具合は考えなくて良いほど少なくなっています。 それでも人が手でCSSをカスタマイズする場合は、表示崩れ、不具合との戦いになります。 しかし、それらの不具合はパターンがバラバラであるように見えて、実は根本的な原因がほぼ同じである可能性が高いです。 この根本的な原因に焦点を当て、特に開発現場で多く発生している原因を3つに絞って解説した上で対策方法を探っていきましょう。 表示崩れの根本的な原因を発生頻度でまとめるとほぼ以下のようになり