Chrome DevToolsの「CSS Overview」の始め方

どうもこんにちはヒロシです★

今回は、最近実装された、Chrome DevToolsの新機能「CSS Overview」について紹介します。

CSS Overviewは、今開いているサイトのhtmlやCSSの情報を一元的に見れたり、カラーやフォントの情報をまとめて見れる機能で、他にも色々便利な機能が揃っています。

HTMLやCSSでコーディングしている方にとってはかなり便利な機能だと思いますので、オススメです。

そして、今回このページでは、CSS Overviewを始める手順を載せていきますので、早速やってみましょう！

ブラウザでデベロッパーツールを開く

まずは、GoogleChromeのページで、デベロッパーツールを開いて、右上のSettingsボタンを押します。

ExperimentsからCSS Overviewにチェックをいれる

ExperimentsをクリックしてCSS Overviewの箇所にチェックをいれます。

あとは、一度画面を閉じて再度デベロッパーツールを開くと、CSS Overviewが使えるようになっています。

以前にこのブログでも紹介した「しまぶーのIT大学」さんがYouTube動画で紹介しています

詳しくは、以前にプログラミング勉強するのに大変参考になるおすすめユーチューバー５選☆でも紹介したしまぶーのIT大学さんがYouTube動画で紹介しています★