ブラウザで CSS のちょっとした手直しをしたい時は「Stylus」が便利だった
Webページをある程度コーディングし,ブラウザで表示の確認をした時にその場で CSS のちょっとした手直しをしたい時がある. その時に Chrome の dev ツールをよく立ち上げていたが,不意にリロードをしてしまったり,タブを閉じるとせっかく修正したコードが水の泡になってしまう...
そんな時には「Stylus」という Chrome 拡張機能が便利なことがわかったため,今回はそれについてまとめる.
使い方
ここからダウンロードできる.
今回は自分が作った Web ページではないが,自分のブログのこのタイトルの色を変えてみる.
dev ツールを立ち上げ,変更したい箇所の要素を調べる.
今回はタイトルのため#title a
だとわかる.
Stylus をクリックし,「このURL」の部分を押す.
するとこのようなエディタ画面が開く.
タイトルの色をオレンジに変更し,「保存」を押す.
記事のページに戻ると,タイトルの色がオレンジになっていることがわかる.リロードをしても色がオレンジのままになっている.
自分で書いた CSS を一時期に外したい場合は「すべてのスタイルをオフにする」を押せば OK.
自分で作ったWebページの場合は,書いた CSS が良い感じになったタイミングでローカルのプロジェクトの CSS ファイルに加えれば良い.
まとめと所感
今回は「Stylus」という Chrome 拡張機能についてまとめてみた.本当はちょっとした手直しをするより,ローカルのプロジェクトの CSS を直せば良いとは思う.
しかし,わざわざローカルのプロジェクトに切り替えずにすぐにパパッと治そうと思い Chrome の dev ツールを立ち上げて直すのは良いが,いつもの癖でリロードしてしまい,手を加えてしまった箇所が水の泡に... というのを一時期ちょこちょこやっていことを思い出した.
ちょっとした手直しは「Stylus」を上手く活用し,「ちょっとした手直しのやり直し」は無くすようにしていこう.