【CSS】「開発者ツール」の使い方！【デベロッパーツール】
しゅーた（@chibasyuta）です！
この記事ではCSSを書く上での「開発者ツール」の使い方について解説します。
この記事は初心者向けの内容となっています。簡潔に分かりやすく基本的な情報の調べ方について解説しました。
この記事の内容！
- 「開発者ツール」とは何か
- 「開発者ツール」の使い方
- 「開発者ツール」の便利な機能
- 「開発者ツール」を使う上での注意点
「開発者ツール」はめちゃめちゃ便利です。
それでは内容へ入ってきます！
「開発者ツール」とは何か？
「開発者ツール」はとても強力なツールです。
WebサイトがどんなHTMLタグで構成されていて、どの要素にどんなスタイルが当たっているのかなどが分かります。
「どのファイルから」「どんなスタイルが」当たっているか確認できる
HTMLの要素に対して、
- 「どのファイルの」
- 「何行目にあるコードによって」
- 「どんなスタイルが当たっているか」
を確認することができます。
「user agent stylesheet」とは何か
「user agent stylesheet」（ユーザーエージェントスタイルシート）とは「Webブラウザが設定してくれるCSSファイルになります。
例えば、「h1」要素なんかは何もしていなくても、デフォルトで少しフォントサイズが大きくなるかと思います。あれはユーザーエージェントスタイルシートによるスタイルが当たっているからですね。
「開発者ツール」はWebブラウザ側が提供してくれるツール
「開発者ツール」はWebブラウザ側が提供してくれるツールなので、Webブラウザによって機能や表示が微妙に違います。
「Webサイトを作る際に」「メインで使うWebブラウザ」を決めるときは、「開発者ツールの充実度」を比べるというのもいいかもですね。
呼び方は複数ある
「開発者ツール」は「デベロッパーツール」「検証ツール」とも呼ばれることもあります。
「開発者ツール」の起動方法！（Google Chrome）
「開発者ツール」の起動方法について解説します。今回は「Google Chrome」に限定して解説します。
まずWebサイト上で「右クリック」
まずは、Webサイト上の特に何もないところで「右クリック」します。
１番下の「検証」を「左クリック」
「検証」という欄がでてくると思うので、そこを「左クリック」して選択してください。
そしたら「開発者ツール」が起動する！
ここまでの手順を踏むと「開発者ツール」が起動すると思います。
「開発者ツール」の機能と使い方！
「開発者ツール」には便利な機能がたくさんあります。
CSSを書く上で使う基本的な機能は下記の通り。
- 適用されているCSSの確認
- 宣言のオン/オフ
- 値の変更
- 新しい宣言の追加
ではその使い方をここでサクッと解説していきますね！
適用されているCSSの確認
左側にある「Elementパネル」で選択されている要素に対して「どんなスタイルが当たっているのか」が、右の「Styleパネル」で確認できます。
.attention p {
font-size: 14px;
color: #002D72;
text-align: left;
margin-bottom: 16px;
}というCSSが「mystyle.css」の「368行目」以降に書かれているということが読み取れます。
宣言のオン/オフ
宣言の左側にある「チェックボックス」をクリックすると「宣言のオン/オフ」の切り替えができます。
オフにするとその宣言がコメント化されたようになります。Webサイトを更新しなくても即座に変更が反映されるので、簡単に宣言を無効化した時の挙動を試すことができます。
値の変更
プロパティの値を変更してみたりすることも可能です。「こうしたらどうなるんだろう？」というのが手軽に試せます。
またプロパティ自体も変更することもできます。
新しい宣言の追加
さらに、新しい宣言を追加することも可能です。
宣言の右側を「左クリック」するとその宣言の下に「宣言を書く」ことができます。
自由に新しい宣言を追加して試してみてください。
「開発者ツール」の使用例！
「開発者ツール」の使用例についても書いておきますね！
ボックスモデルについて調べられる
「Computed」タブを選ぶと、上の画像のように「ボックスモデル」について調べることができます。
使われている（レンダリングされている）フォントが分かる。
「Computed」タブの１番下に「Rendered Fonts」という欄があります。ここを見ることで使われているフォントが分かります。
使われているというのは「実際にレンダリングされているフォント」という意味です。
「Rendered Fonts」をみると、「font-family」プロパティの値に書かれている「Helvetica, Arial, ～,sans-serif」というCSSで書いたフォントの中から「実際に使われているフォント」が分かります。
例えば「Helvetica」というフォントを１番優先度高く書いておいても、ユーザーのPCの環境にそのフォントが無ければ、次の優先度が高いフォントが使われます。上の画像だと「Arial」ですね。
それで「Rendered Fonts」で分かるのは「実際に使われたフォント」です。
レスポンシブ対応に「デバイスツール」が便利
上の動画のように「デバイスツール」を起動すると、画面幅を変えた時の挙動を観ることができます。
レスポンシブ対応する際に便利です。というか必須ですね笑
スペルミスなどに気づける（理解できないCSSは無視される）
スペルミスなどで上手く効かない場合は上のスクショのようにエラーであることが一目瞭然になります。
「あれ？上手く効かないな、、」となったら「開発者ツール」を観てみましょう！
オーバーライド（上書き）してないかチェックできる
そんな時に使えるのが「開発者ツール」です。どのセレクターによって上書き（オーバーライド）されているか確認できます。また、それがどのファイルのどこに書いてあるかも確認できます。
「開発者ツール」を使う上での注意点！
「開発者ツール」を使う上での注意点についても書いておこうと思います。
- 更新すると変更は消える（注意点）
- コメントも見られる
これらがあります。
更新すると変更は消える（注意点）
「開発者ツール」での変更はあくまでも一時的なものです。
リロードやタブを閉じたりすると、変更は元に戻ってしまいますので、変更を保存したい場合は「VSCode」などのエディターでしっかりCSSファイルに書き込みましょう。
コメントも見られる
コメント化していれば一般のユーザーからは見られないかもしれませんが「開発者ツール」を使うと見えてしますので、それに注意してください。
「開発者ツール」の便利な使い方
「開発者ツール」の便利な使い方についても解説しておきます！
- 起動のショートカットキー
- 「開発者ツール」の表示位置
- スクリーンショット
起動のショートカットキー「Ctrl + Shift + i」
「Ctrl + Shift + i」で「Google Chrome」なら「開発者ツール」を起動することができます。（Windows）
他のWebブラウザをメインで使ってる方も、おそらくショートカットキーがあるので、それを調べておくといいかもです！
「開発者ツール」の表示位置
「開発者ツール」の表示位置を変えることもできます。お好みでどうぞ。
スクリーンショット
「Capture full size screenshop」を押すとページ全体のスクリーンショットが撮れます。
「上級者向け」インスペクタースタイルシート
「+」マークをクリックしてセレクターを追加します。すると「inspector-stylesheet」にCSSが書かれます。
これのどこが便利なの？
「inspector-stylesheet」のところをクリックすると「inspector-stylesheet」のCSSファイルへ移動できるので、ここで他の要素にも書いたCSSなどを一括でコピーすることができます。
ミスを減らすためにも「inspector-stylesheet」を使うと便利です。
まとめ。
「開発者ツール」を使うとWebサイトがどんなHTMLタグで構成されていて、どの要素にどんなスタイルが当たっているのかなどが分かる。
「開発者ツール」はWebブラウザ側が提供してくれるツール。
- 適用されているCSSの確認
- 宣言のオン/オフ
- 値の変更
- 新しい宣言の追加
などができる。
ボックスモデルについても調べられる。
使われている（レンダリングされている）フォントが分かる。
レスポンシブ対応に「デバイスツール」が便利。
スペルミスなどに気づける（理解できないCSSは無視される）。
オーバーライド（上書き）してないかチェックできる。
「開発者ツール」を使う上での注意点は下記の通り。
- 更新すると変更は消える（注意点）
- コメントも見られる
「開発者ツール」の便利な使い方は下記の通り。
- 起動のショートカットキー
- 「開発者ツール」の表示位置
- スクリーンショット
この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！
それではこんな感じでこの記事を終わります！
ではまた！