GoogleChormeを使われている方は、各種ブラウザの中で一番多いのではないでしょうか。もちろん、私もGoogleChromeをプライベートでも業務でも使っています。
普段はWeb制作に関わる作業が多いので、GoolgeChromeをブラウジング以外のツールとしても使っています。
特にDeveloperTool（デベロッパーツール）は、制作に欠かせないツールです。
この記事ではChromeの Override（オーバーライド）機能を使い、サイトのCSSを調整する上で便利な使い方を紹介します。
今回紹介する方法を使えば、今までデベロッパーツールを使って仮想的に調整していたCSSををもっと便利に早く効率的に編集・更新できる様になります。
一般的なデベロッパーツールを使った編集方法とオーバードライブを使った編集方法を紹介しますので、両方試してみてください。
一般的な編集方法：DeveloperToolでの調整
CSSの調整はDeveloperToolを起動して、Elementsタブから各要素にかかっている部分を、Stylesタブで調整をかけて作業をしていました。
Developertoolで仮想的に調整をしていて困ったこと
- CSSの編集が複数のファイル/箇所にまたがった時、変更した箇所を探すのが大変
仮想的にCSSを触るくらいなら良いのですが、あくまで仮想なので保存されません。修正した箇所を再度CSSファイルに書き込まないといけないので、適用にひと手間がかかる。 - 書き写し忘れがあるとレイアウト崩れて大変
仮想環境や公開前ステージングサーバーがあれば公開前のチェックができるのでミスに気が付きやすいのでしょう。でも、調整→確認→本番アップの流れだと手間がかかりすぎている気がする。 - 調整したとこが消えてしまう。
CSS調整中に誤ってChromeを再起動・再読込してしまうと、調整していた部分が消えてしまい、何をどこまでやったかわからなくなり困る。
DeveloperTool自体はとても便利なものなので助かっているのですが、編集した内容を保存するには更にもう一手間ほどかかります。
下記のオーバーライド機能を使えばCSSの調整+保存がいっぺんにできるので、作業の効率が劇的に変わります。。
オーバーライド機能を使えば楽になること
調整したCSSがファイルとしてローカルに保存されるので編集の手間が少なくなる
修正したCSSは即時保存されるので編集が終わったファイルはそのままサーバーにアップしてしまえばOKです。
公開されているサイトのHTMLを変えずに新しいCSSを確認できる
サーバーからすべてのファイルをダウンロードしてローカルに環境作ってしまえば良いんでしょうが、それすらも必要がなくなり、公開されているページにレスポンシブウェブデザインを適用してみたりすることもできる。
まず、調整したCSSファイルを自動保存の設定
オーバーライド機能ではローカルフォルダへのアクセスをしますので、適用時には設定が必要ですが、一度設定しておけばチェックボックスだけでオン/オフの切替が可能です。
設定方法
CSSをオーバーライドで編集する方法を解説します。
なおバージョンに寄って若干の違いがでてしまいますが、アップデートの早いアプリなのでご容赦ください。
準備
GoogleChromeをインストールしてください。
GoogleChromeの設定
ChromeのDeveloperToolを起動する。
ショートカット
- Windows：F12
- Mac：Command+Option+I（アイ）
そしてDeveloperToolの中の「Sources」タブを開き、さらにその中の「Overrides」タブを選択します。
「Select folder for Overrides」をクリックしてローカルフォルダを選択します。
任意のフォルダを選択もしくは作成します。
オーバーライドフォルダの位置はサイトごとには変えられないので、きちんと考えてフォルダをどこに設定するかを検討してください。
オーバーライドフォルダーの中にサイトごとの設定が保存されていきます。
URLの下に警告が表示されます。内容をよく理解して「許可」を選択してください。
（あくまで自己責任でよろしくお願いします。）
「ネットワークタブ」から任意のCSSファイルを選択して右クリック。一番下の「Save for onerrides」を選択する 。
ローカルにファイルとして保存されました。
オーバーライドでの編集方法
編集は今まで通りElementsタブを開き、修正したいCSSを変更してください。編集内容をDeveloper Tool内で確定をすると自動的にローカルに保存されているCSSファイルが更新されます。
また、オーバーライドフォルダの中のローカルファイルを編集しても即時ブラウザに反映されます。
編集は自分の使いやすいソフト（VS Codeなど）でも行えるので、編集と反映が同時に行え、効率アップになります。
さらに便利な機能
オーバーライドさせたCSSから参照されている画像もローカルフォルダーに配置しておけば、ブラウザ上に表示させることができます。
使いみちとしては前述の通り、公開しているサイトに新しくレスポンシブwebデザインでのスマホレイアウトを適用したいときなどで、オーバーライド機能を使えば、適用イメージを確認しながらCSS調整ができます。
また、公開サーバーにアップできない状況で検証する必要があるときなども使えるかもしれませんね。
有効/無効の切り替え
注意点
- オーバーライドを有効化にしたままであることに気付かず、サイトの見た目がわかっててビビる。
- ローカルCSSを無意識に更新してしまうことが有るのでバックアップとしてアップロードしたファイルは別で保存しておいたほうが良い。
- CSSを直接編集するので、SassやSCSSなどコンパイルが必要なファイルで構築されている場合は、編集は可能ですが実際のアップロードして配置する場合は不都合が起こる場合があります。。
オーバーライド機能のメリット
オーバーライド機能を使った編集のメリットは以下です。
- 表示を確認しながら編集できるので作業効率化
- 態々調整した内容をCSSに書き写さなくて良いのでミスも減る
- 公開しているサイトに影響を与えずにCSSの変更がシミュレーションできる。
- 作業を途中で止めてることが出来る。
設定は難しくないので編集のスピードアップのためにも、オーバーライド機能を使ってみてください。