Webデザインをするときに欠かせないCSSですが、あなたはCSSを書く時にどんなエディターを使っていますか？
僕は以前、CSSを書く時にVisual Studio Codeを使っていました。
もちろんPythonを書くときもHTMLを書くときも、SQLを書くときもすべてこれです。
けれど、CSSに関しては今はもうVSCodeを使わなくなりました。
もっといいエディタが見つかったからです。
最強のCSSエディタとは
VSCodeより使いやすい最強のCSSエディタ、それは「Firefox Developer Edition」です。
Firefoxという名前でもうお分かりかと思いますが、これはCSSエディタではなくてブラウザです。
しかしこのブラウザ、エディタではないとはいえ搭載されている開発者ツールが強力で、とても使いやすいのです。
では、試しにGoogleを開いて、CSSをいじってみましょう。
これは、Googleを普通に開いて開発者ツールを起動したところです。
試しにこのGoogleの背景色をダークグレーに変えてみましょう。
こんな感じで、開発者ツールの「スタイルエディター」内で直接CSSを打ち込みます。
新しくCSSを追加するだけでなく、すでにあるコードも編集できます。
左のリストは、現在読み込まれているCSSファイルの一覧で、ここから編集したいファイルを選ぶこともできます。
今回はGoogleのサイトの背景色をダークグレーにしたいので、このコードを追加しました。
body {
background: #565656;
}
すると、こんな感じに。
リアルタイムにブラウザ上で反映されます。
ローカルにCSSファイルがある場合は、このままctrl+SでCSSファイルを上書き保存することもできて便利。
しかもCSSコードの入力補助機能まであって、途中まで入力すればいくつも候補を表示してくれます。
ブラウザの開発者ツールというよりも、まさにCSSエディタと言ってもいいくらいの仕様。いたれりつくせりです。
そして、もうひとつ、Firefox Developer Editionには超便利な機能があります。
地味に役立つカラーピッカー
Firefox Developer Editionの便利機能、それはカラーピッカーです。
開発者ツールのインスペクターを開いてみると、このようなスポイトのアイコンがあります。
これをクリックするとカラーピッカーを使うことができます。
このカラーピッカーはサイト上の色を拾ってくることができる機能で、ワンクリックで目的の場所のカラーコードをクリップボードにコピーします。
あとは拾ったカラーコードをそのまま貼り付けることもできるというわけですね。
上の画像では、Googleのロゴから黄色をピックアップしているところです。
特筆すべきは、このカラーピッカーはサイト上の画像のカラーコードも拾ってくることができるというところです。
たとえばロゴのある部分の色のカラーコードが知りたいとき、普通は画像編集ソフトなどで一度画像を開く必要がありますよね。
ところが、このカラーピッカーはサイト上の画像の色もピックアップできるので、非常に便利です。
これがあれば、たとえば他サイトに気に入った色があって、それを使いたいときもラクラクに持ってこられる、というわけですね。
いかがでしたでしょうか。
CSSコーディングをする上ではなかなか便利なツールなのでぜひ一度体験してみてください。