CSSを簡単カスタマイズ！「Chromeデベロッパーツール」の使い方

久々にCSSをカスタマイズしようとしたらどこの箇所がどのCSSで指定しているのかがわからなくなってしまいました。このようなことがある度に毎回調べるというのは非効率です。

何かいいツールはないものかと探しておりましたところ、便利なツールがあるじゃないですか。「Chromeデベロッパーツール」(以下デベロッパーツール) です。

「あの部分だけを直したい..」「あれをもう少しこうしたい..」

カスタマイズするのにあまり時間をかけたくないですよね。そんな時はこのデベロッパーツールを使えばかなりの効率でCSSカスタマイズを行うことができます。

「Chromeデベロッパーツール」使い方

では使い方を見ていきましょう。

ブラウザ内のどこでもいいので「右クリック」→からの「検証」をクリックします。

するとこのような画面に切り替わります。ブラウザのサイトページ表示部分が小さくなり右側にコードが表示されます。

• 1 … ブラウザ表示画面
• 2 … HTML
• 3 … CSS

この右側部分を見ながら作業していくわけですが、一見どのように使うのかわかりません。難しそうですが覚えてしまえば簡単です。見ていきましょう。

右上、一番左のこちらのアイコンをクリックします。

左側のブラウザ表示部分にカーソルを当てるとページのパーツごとにわかりやすく青色でマークされます。カスタマイズしたい部分のこの青色部分をクリックしてみましょう。

すると「2」の該当HTMLが青色でマークされます。同時に「3」でCSSで編集を行う箇所が表示されます。

これはわかりやすいですね。

「3」の右横に該当の箇所が置いてあるファイル場所が表示されるという親切機能までついています。

そして注目したいのがこちらの機能。チェック項目をクリックするとCSSのスタイルを適用する部分、セレクタやプロパティのどこを外すとどのようにレイアウトが変化するというのが一目瞭然なんです。

これで自分の行いたいレイアウトにカスタマイズすることができますね。以上、今回はChromeデベロッパーツールの紹介でした。