案件概要
下記のような現状のサイトをスマートフォン対応（マルチスクリーン対応）したいとのご要望で、コーディングのみのご依頼です。
- 画面上部にグローバルナビ、画面中央の右側にローカルナビを配置したオーソドックスな企業サイト
- ページ数は100ページ以上
- ナビゲーションはテキストとCSSでスタイリングされている
- コンテンツ内容（グループ）毎にCSSが準備されスタイリングされている
- コンテンツ内容（グループ）内ではモジュールが整備され、ページ間で統一した見栄えを提供している
- .scssファイル等の提供はなし
対応
サイトを拝見したところ、最近ではレスポンシブWebデザインを採用してマルチスクリーン対応するところをPCのみ対応で制作したという状況のようです。モジュール（コンポーネント）のデザインは今でもよく見かけるものばかりで、マルチスクリーン対応のために全面リニューアルする必要は全くなさそうです。
よって、既存のCSSに手を入れる、具体的にはメディアクエリを利用してスタイル付けを行っていくことにより、さまざまなスクリーンサイズに対応することになります。（もちろん、モジュールのデザインによっては部分的に新たなデザインを検討する必要はあるでしょう。）その際の課題として、以下の2点が考えられます。
- .cssファイル数が多い
- .scssファイル等の提供がない
このまま.cssファイルを編集していくか、それとも.scssファイルに変換して編集していくか検討しましたが、どちらも負荷のかかる作業です。そこで、今回はCSSパーサーである「PostCSS」を利用して、既存の.cssを活かしつつ作業の効率化を図ることにしました。
具体的には、以下のPostCSSプラグインを導入しました。
これにより以下の利点がもたらされます。
- 変数（CSS Custom Properties）がどのファイルでも利用可能になる
- custom media queriesを利用することでメディアクエリが管理しやすくなる
- CSSセレクタ毎にメディアクエリを利用してスタイルを記述することができるようになり（既存のセレクタ内にネストして記述できる）、また最終的に「CSS MQPacker」がクエリ毎に設定を集約してくれる
- 最新のブラウザ環境に合わせてベンダープレフィックスの整理が行われる
まとめ
PostCSSを利用して新しいCSSの仕様や有益な処理を取り入れることにより、容易に作業の効率化を図ることができました。現在のCSS構成を変えることなく利用するので、あるページに設定したスタイルが他のページに悪影響を及ぼし始めた、ということを防ぐことができます。
案件に合わせて最適なツールを選択し利用していくことで、提供する作業の品質を向上させていきたいと考えています。