Web制作もいろいろなツールが出てきまして、中にはブラウザ上のエディタでCSSの入力も完結させるようなサイトビルダーなんかも珍しくないですよね。ただこういったツールは普通にコード書いてアップロードしたいんだよなぁみたいなことが往々にしてあったります。

そんなときにはChromeのローカルオーバーライド機能を使うと、手元のテキストエディタでCSSファイルを編集してブラウザに即時反映させることが出来るんですね！ローカルにコピーしてローカルサーバーを立ち上げる必要すらなし。これはお手軽！採用！！

ローカルオーバーライドでできること

• 好きなエディタ（VS Codeなど）でCSSを書ける
• 保存するとブラウザに即反映される

ファイルはローカルに保存されているんで、ブラウザが固まって編集内容がパーになりましたみたいなことがないのも嬉しいです。

それではざっとやり方を説明します。数分あればできますよ！

ローカルオーバーライドの手順

私が籍を置いている受託部門のwebページを例にして手順を解説します。実際はこのサイトはノーコードではなくWordPressですが開発者ツール上はどっちでも良いので気にしないでください。
(仕事にかまけてこのサイト更新してないの良くないですね。近くテコ入れをしたいと思っています。)

開発者ツールを開き、Overridesを有効化

難しいことは特にないのでシュババっといきます。F12とかで開きましょう。
上部タブからSoursesタブを選びます。そうすると下にOverridesという部分があるので選択すると、「+ Select folder for overrides」と青い字があります。そこをクリックしてオーバーライドしたCSSファイルを保存するフォルダを任意で指定しましょう。どこでも良いと思います。

フォルダを選ぶとアクセス許可のメッセージが出るのでOKしましょう。

対象のCSSファイルをオーバーライド

保存先フォルダの指定が済んだら、実際にオーバーライドするファイルを指定していきます。

開発者ツールのNetworkタブを開き、編集したいCSSファイルを探します。

今回はstyle.cssを対象にします。対象のCSSファイルを右クリックして、Overide contentを選択します。

これで指定したローカルフォルダにstyle.cssがコピーされます。

ローカル上のcssファイルを編集

こんな具合にOverridesで指定したフォルダ内にCSSファイルが保存されているかと思います。
これをVS Codeなどで編集すると、画面のリロードの必要もなく編集が即時反映されました。

Elementsタブでいじいじするのと違ってページをリロードしてもローカルのCSSは保存されたまま反映されますし、サーバー上のファイルは一切変更されないのでいろいろと試してみるのにも良いかもしれません。

ここで気の済むまでエディタでcssを編集したら、実際のブラウザ上のエディタにコピペして終了です。

活用の機会は限定的だけど知っていて損はないと思います

あんまり出番の多い知識ではないかもしれませんが、本当にピンポイントであると身を助ける知識になる可能性がありますよ。もしかするとStudioのカスタムコードの部分とかでも活用できるかも？

今取り掛かっているWebサイトがブラウザ完結型のWebサイトビルダーで、これを利用して効率よく作業したいなと思っているところです。それではまた！