時々、Webサイトで使われているHTMLの特定のブロックや画像のカラーコードを知りたいときがあるけど、わざわざ何かツールを立ち上げて見るのがめんどくさいときに
ブラウザで色を確認する方法.
手順
- Google Chromeで右上の設定ボタンから以下を開く
- 次に「その他のツール」から以下を開く
- 「デベロッパーツール」を開くと以下のような画面が下にでる.
- もし文字の色を調べたいとかだけなら、その要素をクリック
下の画面のcolor : の色や background-colorで色がわかります.
- もし画像の中の色を調べたいなら、以下のようにStylesのタブのcolorやbackground-colorの右にあるカラーパネルの四角をクリックするとスポイトが出てきます.
それを好きな要素を動かせばその位置が拡大されて色が表示されます.
クリックするとその色を取得してくれます.
これで完了.
いちいちなんかの拡張機能入れるのも何かツールを立ち上げるのも面倒臭いのでこれで済ませている.
