長く運用しているサイトほど、気づかないうちに古い書き方のCSSがそのまま残っていたりします。
そんな「古いCSS」を見つけて、モダンな書き方を提案してくれる無料ツールがあるという話を見かけたので、改めて調べてみました。
「Modern CSS Radar」とは
「Modern CSS Radar」は、WebページのURLを入力するだけで、そのページに使われているHTMLとCSSをスキャンしてくれるオンラインツールです。
外部リンク：Modern CSS Radar
古い実装が見つかった場合には、それに置き換わる「モダンな書き方」を具体的に提案してくれます。
たとえば、今では不要になった「ベンダープレフィックス」や、より簡潔に書ける「モダンなセレクタ」「新しいレイアウト手法」などが対象になっているようです。手元のコードを見返さなくても、ツールが自動でチェックしてくれるのはありがたいポイントだと感じました。
自分も昔書いたコードを見返すと「これ、今なら1行で書けるのに…」ということがよくあります。こういうツールがあると、振り返りのきっかけになりそうです。
使い方はとてもシンプル
使い方は難しくなく、対象のWebページのURLを入力してスキャンを実行するだけのようです。
結果は一覧で表示され、どの部分が古い書き方なのか、どう置き換えればいいのかが分かりやすくまとまっています。特別な環境構築も不要なので、ブラウザさえあればすぐに試せるのも嬉しいところです。
こんな場面で役立ちそう
- 長年運用している既存サイトのCSSを見直したいとき
- 他の人が書いたコードを引き継いだとき
- 自分の書き方が今の時代に合っているか確認したいとき
- コーディングの学習中に「今どきの書き方」を知りたいとき
特に引き継ぎ案件では「なぜこう書いてあるんだろう」と悩む時間が減りそうだなと感じました。
導入前に意識しておきたいこと
便利なツールではありますが、提案された内容をそのまま反映するのではなく、プロジェクトの状況に応じて判断することも大切なようです。以下のような点を意識しておくと、より安心して活用できるかもしれません。
- 対応ブラウザの確認: 提案されたモダンな書き方が、案件で必要な対応ブラウザで問題なく動作するか事前に確認する
- 既存デザインへの影響: 置き換えによってレイアウトや見た目が崩れないか、実装後にきちんと目視確認する
- チーム内での共有: ツールの提案をそのまま適用せず、チームやクライアントと方針をすり合わせる
- 段階的な導入: 大きなサイトの場合は一気に置き換えず、部分的に試しながら進める
こうした点を押さえつつ活用すれば、コードの見直し作業をぐっと効率化できそうです。
特にフリーランスで一人で複数案件を抱えている場合、こうした自動チェックの仕組みは心強い味方になってくれそうです。
さいごに
古いCSSをそのままにしておくのはなんとなく気になっていても、後回しにしがちな部分でもあります。
まずは自分のサイトや過去の案件のURLを一度スキャンしてみて、どんな提案が出てくるか気軽に試してみるのがよさそうです。
