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