特定のページに独自のスタイルを適用したい時に使える拡張機能

ページのスタイルはstyle要素やcssファイル等などにスタイルを記載してファイルを読み込むことでページにスタイルが適用されます。
しかし、Webページ制作を行なっていると一時的にスタイルを適用したい場合などにおいて、特定のページやURLに対してスタイルを適用させたい場合があります。
私はこのような場合によく行っていた方法としては、デベロッパーツールを開いてスタイルを追加して確認を行っていましたが、デベロッパーツールの場合、ページリロードを行うと記載したスタイルなどが元に戻ってしまうため、再度書き直さないといけません。恒久的に一時的なスタイルを特定のページに適用させる、そんな時に使えるのが『Stylus』という拡張機能です。

StylusではドメインやURLなど特定のページに対して、自分好みのスタイルにカスタマイズできる拡張機能です。
必要に応じてフィルターのように適用するスタイルも変更でき、チェックや特定の要素をハイライトや出しわけを行うことが可能なため、様々な使用用途があり便利です。

特定のページに対してスタイルを適用できる

Stylusでは下記の条件に一致した場合にスタイルの適用有無を判別できます。条件は「+」「-」で追加削除可能です。

• URL

• 次で始まるURL

• ドメイン上のURL

• 正規表現に一致するURL

適用するスタイルを複数個に分けることができる

適用するスタイルにタイトル、コード、適用条件（適用するURL）を記載して複数保存することが可能になっており、一度作成したスタイルはチェックボックスのON/OFFで適用可否も選択できるため、同じ適用条件でも必要に応じた使い方が可能です。

エディターの設定も可能

Linterや自動保管、タブサイズなどエディターの設定も選択や、スタイルのインポートやエクスポートも可能となっています。

シンプルなUIで設定で使い方も簡単で便利な拡張機能かと思います。単発的なスタイルの適用はデベロッパーツールで、恒久的なスタイルの適用はStylusと組み合わせて使用するのがオススメです！

Stylus