Webサイトを更新したりメンテナンスをしていたりする際に便利なツールは沢山あるのですが、ブラウザそのものにも沢山の機能「ツール」が備わっています。
「F12」もしくは右クリックからの「検証」を選択するとブラウザの右側、もしくは下側に色々表示されます。もう一回F12を押すか、バツボタンを押すことで閉じることが可能です。
今回はGoogleChromeの「CSSの概要」という機能が開発する際に地味に便利なので解説します。
ほてぇ……、使っているCSSを色々調べたいけどめんどうだにゃ。なにか便利なツールはないものかニャ～（チラッチラッ）
ほてちゃん。こっちを見ながら大きい独り言はやめるミャ。とはいえそんなときにはブラウザの「CSSの概要」でできることもあるミャ。
ほてぇ～！こんな機能があるなんて聞いてないニャ！コンソールとか概要くらいしかみてなかったニャ～！！
CSSの概要を開くと色々なステータスが表示されるミャ。カラーパレットも出してくれるし、特に色の使い方に関してはコントラストの問題もしてくしてくれたり便利だミャ。
これは良いにゃ！AAやAAAってなんだにゃ？
WCAGと呼ばれる規格におけるレベルを表してるミャ。A、AA、AAAとなっていてAが多いほど難しいレベルになってるミャ。ここではAAまで適合してない問題を表してるミャ～。
ほてぇぇえええ？！全然意図してないCSSの書き方してるのもまるわかりだニャ？！
もちろん機械的なチェックがエンジニアリングの段階でできていれば良いんだミャ。だけど、チェックをする人間がみんなエンジニアではないからこうしてブラウザで気軽にチェックできるツールは便利だミャ。
今回は「CSSの概要（CSS Overview）」について軽く説明しましたが、ブラウザのツールは沢山存在し、いつの間にか追加されている機能もあります。
定期的にブラウザツールを立ち上げてどんな機能が実装されているのかをチェックすると良いと思います。欲しい機能がいつのまにか備わっているかも？
