CSSがとにかく苦手です。
この2つが僕がCSSが苦手な理由の大半を占めています。 今よりも効率的にCSSが書けるようになれば苦手意識も克服できるのではないかと考え、デベロッパーツールを使ったCSSの効率化について調べてみました。
結論
デベロッパーツールのLocal Overrides機能を使えば効率的にCSSが書けるかもしれない
Local Overridesとは
ローカルオーバーライドはアップされているサイトのファイルをローカルファイルに置き換えます。 置き換えたファイルを編集してCSSをサイトに反映することができます。
つまり、デベロッパーツール上で表示しているCSSファイルのコピーを手元に置いて、そのファイルを使って表示しているHTMLにCSSを当てることができるようになります。
- リアルタイムでデベロッパーツールで編集したCSSを手元のCSSファイルに反映できる
- アップロードされているCSSファイルを手元にあるCSSファイルと置換することでブラウザをリロードしても追加したスタイルがリセットされることがない
個人的にはこの2点がLocal Overridesを使う大きなメリットだと思っています。
Local Overridesの使い方
1. CSSファイルのコピーを配置するローカルPCのディレクトリを指定する
cmd + opt + iでデベロッパーツールを開くSourcesタブ内のOverridesタブを選択し、Select folder for overridesでCSSファイルのコピーを配置するディレクトリをローカルPC内から選択する(Desktopなど)デベロッパーツールでは[選択したディレクトリ名]へのフルアクセスがリクエストされます。という表示がブラウザ上部に表示されるので許可を選択
2. コピーするCSSファイルを選択しローカルにコピーする
Networkタブを選択してブラウザをリロード- アップロードされているファイルが
Nameに表示されるのでコピーしたいファイルを選択 - コピーしたいファイルを選択した状態で右クリック、
Save for overridesをクリック Sourcesタブ内のOverridesタブにコピーしたCSSファイルが配置される
3. コピーしたCSSファイルをデベロッパーツールで編集する
4. Local Overridesを停止、解除する
Sourcesタブ内のEnable Local Overridesの左のチェックボックスを外すことで一時停止できるEnable Local Overridesの右のアイコンをクリックすることで解除できる
まとめ
とりあえず試しに使ってみただけですがかなり便利そう。 Local Overridesに慣れてきたらエディタで直接CSSを書くことは殆ど無くなりそうな気がする。 CSSの苦手意識を少しでも和らげてくれることを期待して使い込んでみよう。
