Webページをスキャンして、古いCSSに置き換わるモダンCSSを提案してくれる無料ツール -Modern CSS Radar
Post on:2026年9月10日
sponsorsr
Webページに使用されているHTMLとCSSをスキャンして、古いHTMLとCSSが使用されている箇所を指摘し、それに置き換わるモダンHTMLとCSSを提案してくれるオンラインツールを紹介します。
現在では必要のないプレフィックス付きのプロパティだったり、物理プロパティを論理プロパティにしたり、アスペクト比で実装するためのパーセントのパディングなど、しっかりとした解説と共にモダンHTMLとCSSのコードが提案されます。
Modern CSS Radarは、公開されているWebページをスキャンして、古いHTMLやCSSが使用されている箇所を指摘し、モダンHTMLとCSSを提案してくれるツールです。利用にあたっては無料で、登録やログインといった面倒なことは不要です。
Modern CSS Radarでスキャンするチェック項目は27個に加え、18個のコードおよび動作パターン、9個のCSSの改善点が含まれています。
チェック項目
たとえば、CSSの古いテクニックでアスペクト比で実装するためのパーセントのパディングはaspect-ratioが提案されたり、高さいっぱいがスマホで機能しないときはdvhやsvh単位、プレフィックス付きのline-clampなど、レポート内で個別に表示されます。
チェック項目
Modern CSS Radarを当ブログで使用してみました。
「your-site.com」にWebページのURLを入力し、「Audit my page」をクリックします。
スキャンには約2分かかると表示されました。
モダンCSSへの改善箇所は、10箇所でした。
モダンCSSへの改善箇所
いくつか見てましょう。
-
-webkit-line-clamp: none;- AdSenseにプレフィックス付きの
line-clampがあるようです。
-
padding-left: 0px;
padding-right: 0px;- これは、
padding-inline: 0px;の論理プロパティで設定できます。
-
padding-top: 0px;
padding-bottom: 0px;- これは、
padding-block: 0px;の論理プロパティで設定できます。
10個のほとんどはこの論理プロパティでした。
以下が、モダンCSSへの改善箇所の一覧です。
モダンCSSへの改善箇所の一覧
sponsors
