Beeeat’s log

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

ブラウザで CSS のちょっとした手直しをしたい時は「Stylus」が便利だった

Webページをある程度コーディングし,ブラウザで表示の確認をした時にその場で CSS のちょっとした手直しをしたい時がある. その時に Chrome の dev ツールをよく立ち上げていたが,不意にリロードをしてしまったり,タブを閉じるとせっかく修正したコードが水の泡になってしまう...

そんな時には「Stylus」という Chrome 拡張機能が便利なことがわかったため,今回はそれについてまとめる.

使い方

ここからダウンロードできる.

chrome.google.com

今回は自分が作った Web ページではないが,自分のブログのこのタイトルの色を変えてみる. f:id:bake0937:20200720212921p:plain

dev ツールを立ち上げ,変更したい箇所の要素を調べる. 今回はタイトルのため#title aだとわかる.

f:id:bake0937:20200720213530p:plain

Stylus をクリックし,「このURL」の部分を押す.

f:id:bake0937:20200720214630p:plain

するとこのようなエディタ画面が開く.

f:id:bake0937:20200720213252p:plain

タイトルの色をオレンジに変更し,「保存」を押す.

f:id:bake0937:20200720213821p:plain

記事のページに戻ると,タイトルの色がオレンジになっていることがわかる.リロードをしても色がオレンジのままになっている.

f:id:bake0937:20200720215607p:plain

自分で書いた CSS を一時期に外したい場合は「すべてのスタイルをオフにする」を押せば OK.

f:id:bake0937:20200720214221p:plain

自分で作ったWebページの場合は,書いた CSS が良い感じになったタイミングでローカルのプロジェクトの CSS ファイルに加えれば良い.

まとめと所感

今回は「Stylus」という Chrome 拡張機能についてまとめてみた.本当はちょっとした手直しをするより,ローカルのプロジェクトの CSS を直せば良いとは思う.

しかし,わざわざローカルのプロジェクトに切り替えずにすぐにパパッと治そうと思い Chrome の dev ツールを立ち上げて直すのは良いが,いつもの癖でリロードしてしまい,手を加えてしまった箇所が水の泡に... というのを一時期ちょこちょこやっていことを思い出した.

ちょっとした手直しは「Stylus」を上手く活用し,「ちょっとした手直しのやり直し」は無くすようにしていこう.