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

chrome-developertools-min

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

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

SPONSORED LINK

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

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

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

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

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

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

chrome-developertools3-min

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

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

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

chrome-developertools4-min

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

chrome-developertools5-min

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

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

chrome-developertools6-min

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

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

chrome-developertools7-min

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

SPONSORED LINK

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!