読者です 読者をやめる 読者になる 読者になる

HoLo's LIFE.zip

就職を機にブログを立ち上げました。

ブラウザの開発者ツールを簡単に解説

CSS Programming

要素について詳細に調べられる

 ブログデザインを変更する際に、

「このボタンはなんていうclass/id名なのだろう。」

「どんなCSSが与えられているのだろう。」

「書き換えたCSSが反映されていないのはなぜ?」

などなど、このような疑問に直面することがあるかと思います。それらの疑問は、ブラウザの機能の一つである「開発者ツール」というもので調べることができます。

 

 

 例えば、一つ前のこちらの記事。

 

 "続きを読む"ボタンは、どんなclass/id名なのか、どんなCSSがあてられているのかを、開発者ツールで非常に簡単に調べることができます。

 

※2017/03/12追記

 

holosline.hatenablog.com

 

 

Google Chromeの場合

開発者ツールの開き方

 開き方は非常に簡単です。[ F12 ]を押して起動する方法と、もう一つはメニューから開く方法です。

 

f:id:holosline:20170304194145p:plain

 

 まずは、画像のこの部分をクリックして、メニューを開きましょう。開いたメニューの下の方にある[ その他のツール ]にカーソルを合わせ、さらに表示されたメニュー最下部の[ デベロッパーツール ]をクリックすることで開発者ツールを開くことができます。

 

開発者ツールの見方

 さて、上記の方法で表示された開発者ツールを見ていきましょう。

 

 

f:id:holosline:20170304200326p:plain

 

 ざっと見ていきましょう。

 赤枠で囲まれている部分に、HTMLが表示されています。情報を見たいHTML要素をクリックすることで、下の緑枠内でCSSを確認することができます。また、緑枠横の青枠部分では、要素のサイズ周り(ボックスモデル)が一目でわかります。

 また、青枠の部分を下へスクロールすると、CSSのプロパティ一覧が表示され、指定されているものは値を、指定されていないものはグレーアウトされています。

 

要素をもっと簡単に選択する方法

 さて、見たい要素を選ぶ方法として、更に簡単な方法があります。

 

f:id:holosline:20170304201200p:plain

 

 赤枠のボタンを押すと、青色にハイライトされます。その状態で見ているWEBページにカーソルを持っていきますと、カーソルが乗っている要素がハイライトされ、「セレクタ」「要素のサイズ」を見ることができます。また、その状態で要素をクリックすると、先ほど説明したCSSの欄に、クリックした要素のCSSが表示されます。

 また、青枠のボタンを押すと、設定メニューが表示されます。一番上にある[ Dock side ]という項目で、開発者ツールの表示場所をウィンドウ下部、ウィンドウ左側、別ウィンドウと切り替えることができます。

 

リアルタイムに値を編集できる

 とても面白いポイントとして、上記のCSS欄の値を直接書き換えることが可能です。そうすることで、値の変更がリアルタイムで反映されます。例えば、[height]を書き換えるとすぐにページに反映され、直接見ながら編集することが可能なのです。

 なお、ここでした変更は、ページを切り替えたり、再度読み込みしたりすると元に戻ってしまいます。あくまで、一時的に変更を確認できるというだけなので、ご注意ください。

 

Firefoxの場合

開発者ツールの開き方

 開き方は、Google Chromeと同様、[ F12 ]で開くことができます。若しくは、左上のハンバーガーアイコン(「三」のようなアイコン)から

開発ツール > 開発ツールを表示

と進めることで開発者ツールを表示することができます。

 

開発者ツールの見方

 さて、Firefoxの開発者ツールもGoogle Chromeと同じようなものです。最初開いたときは、「コンソール」タブにいるかと思いますので、「インスペクター」タブに移動しましょう。

 

f:id:holosline:20170304232712p:plain

 

 赤枠の部分で、開発者ツールの表示場所を選択することができます。ウィンドウの下部、右側、別ウィンドウから選ぶことができます。

 Google Chrome同様、一番左上の「インスペクター」の左側のボタンを押すと、青色にハイライトします。その状態でページにカーソルを持っていくことで、要素のセレクタ、サイズなどの情報を得ることができます。もちろん、クリックした際は、クリックした要素のCSSを右側のCSS欄に表示してくれます。

 

 さて、現在はCSS欄の上部の「ルール」タブが選択されています。これを、隣の「計算済み」というタブに移動してみましょう。

 

f:id:holosline:20170304233109p:plain

 

 すると、このような画面になります。先ほど、Google Chromeの方でもあった、ボックスモデルと、プロパティの一覧が表示されています。

 

リアルタイムに編集することも可能

 こちらもリアルタイムに値を編集することが可能です。

 

他のブラウザも開発者ツールを完備

 この[ F12 ]で開くことのできる開発者ツールですが、上で紹介したGoogle Chrome, Firefox以外のブラウザも同じ方法で表示することが可能です。InternetExplorer, Microsoft Edgeなど、自分が普段使いしているブラウザで使ってみると良いかと思います。

 しかし、使用感はブラウザによって若干の違いがあったりもしますので、自分自身が使いやすいものを選んでください。

 

さいごに

 さて、今回はブラウザの開発者ツールについて簡単に解説していきました。CSS周りを弄るだけでなく、javascriptの動作確認や、どの動作にどれだけの時間がかかっているかなど、解説した以外にもたくさんの便利機能があります。

 CSSを書けるようになると、自分の欲しいデザインをある程度思うままにできますので、興味のある方は是非とも挑戦して欲しいと思います。