CSS3 を採用する理由

CSS（カスケーディング・スタイルシート）は、HTMLで記述した構造に対して、色、文字の大きさ、余白、配置といった見た目を指定するための言語です。CSS3はその大きな拡張で、角丸や影、アニメーション、画面幅に応じて表示を切り替えるメディアクエリ、柔軟なレイアウトを実現するフレックスボックスやグリッドなどが加わりました。これらにより、ひとつのHTMLでパソコンとスマートフォンの両方に対応するレスポンシブデザインが実現できるようになりました。

Webサイトや業務システムの画面を作るうえで、CSSは見た目の品質と使いやすさを左右します。弊社が意識しているのは、「保守しやすいCSS」を書くことです。デザインを場当たり的に上書きしていくと、後から小さな変更をするだけで別の場所が崩れる、といったことが起きがちです。そこで、色や余白の基準をあらかじめ決め、部品ごとに整理した構成で記述するようにしています。また、パソコンとスマートフォンの両方で無理なく使える画面にするため、画面幅に応じた設計をCSSで行い、スマートフォン対応を後付けではなく最初から組み込みます。業務システムの画面では、装飾より入力のしやすさや見落としの少なさを優先し、その方針をCSSの設計に反映しています。Node.js上のツールで整形・圧縮を行い、表示速度にも配慮しています。

CSSの規格は継続的に拡張されていますが、既存の書き方が使えなくなることはほとんどないため、規格自体の更新を強く意識する必要はありません。保守で問題になりやすいのは、長年の修正でルールが積み重なり、どこを変えると何に影響するか分からなくなった状態です。既存サイトを引き継ぐ際は、使われていないルールの整理や、基準となる色・余白の抽出を段階的に行います。特定のブラウザだけで表示が崩れる問題は、対応ブラウザの範囲をあらかじめ決めておくと判断しやすくなります。変更はステージング環境で複数の画面幅を確認してから本番に反映します。