【デベロッパーツール】初心者が最低限のポイントを抑えてすぐに使いこなす方法

2020年11月15日

駆け出しのWeb開発者向けです。

デベロッパーツールって何、名前は知ってるけどいまいち良く分からない、Webサイトのデザインを変更したい、コーディングの練習がしたい

そんな疑問を解消します。

本記事の目的:HTML、CSSの検索・検証ができるようになる

それでは早速見ていきましょう。

デベロッパーツールとは

デベロッパーツールを一言でいうと、Webサイトのコード・表示チェックができるツールです。

Webページ上で実際に書かれているコードを確認したり、編集することができます。これはWebページを作成する時の確認作業や、コーディングの勉強に便利です。

以下、具体的な使い方を紹介していきます。

こんなシーンで使います

デベロッパーツールには以下の特徴があります。

  • デベロッパーツールでは、現在表示中の画面のコードが見れる
  • デベロッパーツールで表示中のコードは、自由に編集できる
  • 編集した内容はデベロッパーツール内で反映される
  • デベロッパーツール内で編集した内容は、実際のWebサイトには反映されない
  • ブラウザをリロードすると、編集内容は消える

この性質を利用して、主にこういったシーンで活躍します。

デザイン変更シミュレーション

実際のサイトを書き換える前に、デベロッパーツール上でコードを書き換え、それがどう反映されるかのシミュレーションが出来ます。

参考例:CSSで出来るヘッダーデザインカスタマイズ

Webサイト上のコード、カラー、フォント等を調べる

Webサイトのコードがどのように書かれているかや、使っているカラーコード、フォントの種類を見ることが出来ます。

参考例:Webサイト上のカラーコードを検索する

レスポンシブデザインの確認

レスポンシブとは、サイトデザインがパソコン、スマホ、タブレットなど、様々な種類のデバイスに対応していることを言います。

サイトを主にいじるのはパソコンですが、アクセスはスマホが1番多い、ということはよくあると思います。そんな時、いちいちスマホで確認するのは面倒ですが、デベロッパーツールを使うことでPCからでもスマートフォンやタブレットで見た場合の表示を確認することが出来ます。

デベロッパーツールを開く

まずはブラウザの、検証したいWebページを開きます。

デベロッパーツールは右クリックでも起動できますが、ショートカットを使って起動すると楽です。

  • Mac : ⌘command + ⌥option + I
  • Windows : ^Ctrl + ⇧Shift + I または F12
  • 今回はこのサイトを検証するとします。デベロッパーツール起動後、下のスクショの様にコードがたくさん書かれた画面が表示されます。

    これがデベロッパーツールです。

    応用:自分が見やすい位置に配置する

    デフォルトでは、デベロッパーツールは画面の下半分に表示されますが、好きな位置に移動できます。

    画面とコードが並列して見やすいので、自分は右側に表示されるようにしています。

    デベロッパーツール内右上の設定メニュー(縦3つドット)から、デベロッパーツールの位置や背景色など様々な設定ができるので、使いやすいようにカスタマイズしてみてくださいね😄

    HTMLとCSSの書かれている場所:ElementsとStyles

    HTMLはElementsパネル内、CSSはStylesパネル内に記述されています。画像で示すとこんな感じです。

    応用:パネルの切り替え

    デフォルトではHTMLとSCCが選択された状態になっていますが、目的に応じてパネルを切り替えることもできます。デベロッパーツールの画面上部のタブをクリックし、好きなタブを選択できます。

    他にもよく使うパネルを下にまとめました😀

    パネル機能
    ElementsHTMLの確認と編集
    StylesCSSの確認と編集
    SourceJavaScript&CSSのコードのデバック
    Computed適用中のCSSの値一覧

    コードを確認・編集したい箇所を選ぶ

    ここでは選んだコードを確認・編集することができます。選び方は2パターンあります。

    • Webページの表示画面から選ぶ
    • HTMLコードをクリックして選ぶ

    よく使うのはWebページの表示画面から選ぶ方法ですが、どちらも使い分けられると便利です。

    基本:Webページ表示画面から選ぶ

    Webページのコードがどう書かれているかを知りたい時に使います。

    1 デベロッパーツール左上の「選択モード切り替えボタン」をクリックします。

    「⌘command + ⇧shift + C」でも切り替えることが出来るよ!

    2 Webページ表示画面内の検証したい(コードを見たい)部分にカーソルを合わせると、ボックスが表示されます。

    3 そこをクリックすると、クリックした画面のコードがハイライト/表示されます。

    表示画面上でコードを見たい部分を選ぶと、
    「Elements」タブ内のHTMLがハイライトされ、
    「Styles」タブに該当箇所のCSSが表示されます。

    応用:Elementsパネル(HTML)から選ぶ

    HTMLコードをクリックして選ぶ方法です。HTMLに対応するCSSを確認するに使います。

    1. Elementsパネル内から、目当てのHTMLコードを探します。
    2. コードを見つけたらクリックします。
    3. クリックしたHTMLに対応したCSSが表示されるのを確認します。

    試しに、Elementsパネル内のHTMLコードを適当にクリックしてみると、それに合わせてCSSが変わるのを確認してみてください。

    選択中のHTMLは青くハイライトされ、対応するCSSはStylesパネル内に表示されます

    選んだコードを編集する

    この機能を使ってサイトのデザイン変更シミュレーションが出来ます。

    基本的に、選択したコードをダブルクリックで編集することが出来ます。

    CSSなどのコードを変更するとリアルタイムで表示が変わりますが、この変更はデベロッパーツール内だけのものです。

    また、ブラウザでページを再度読み込みすると、変更箇所はリセットされ、元の表示に戻ります。

    この機能はサイトデザインを変えたい時に便利です。どういうことかと言うと、

    1. 実際のサイトは直接いじらず、まずはデベロッパーツール内で編集
    2. 思っていたのと違う表示になったり、エラーが出てもうまくいくまで編集・確認を繰り返す(デベロッパーツール内で)
    3. 取り返しがつかなくなったら、ページをリロードして変更をリセットし、1から編集し直す
    4. 編集した内容が正しく表示されるまで、1〜3を繰り返す
    5. デベロッパーツールでの変更が上手くいったら、実際のサイトに同じ変更を加える

    デベロッパーツールでまず上手くいくことを確認してから、実際のサイトをいじります。これでより安全にカスタマイズすることができます。

    CSSでデザインの編集・確認をする

    主にデザインに関する変更をシミュレーションする際に便利です。

    CSSの確認・編集は全て「Styles」タブ内で行います。

    基本的な編集の方法

    1. 表示画面選択モード(command+shift+C)にする
    2. デザインを変えたい部分をクリック
    3. 「Styles」内にCSSが表示される
    4. CSSの変えたい箇所をダブルクリックして編集
    5. CSSが変更され、リアルタイムで表示画面に反映される

    基本中の基本:色を変更する

    これはとても頻出です。

    背景や文字色を変更したい時は、色番号の左隣のカラーボックス(色のついた正方形)をクリックするとカラーパレットが展開されます。

    色の指定はrgbaや16進数カラーコードを入力、もしくはページ上の好きな色をクリックして直接選ぶこともできます。

    背景色を変えてみたところ。
    カラーパレットの下のカラフルな四角はもとのサイトで使われている色の一覧です。

    応用:ハバー時の表示を確認・編集する

    操作は少しややこしいのですが、これも頻出なので2番目に書きました。基本的な手順は以下です。

    1. ハバーエフェクトを見たい箇所を画面上から選ぶ(普段通り)
    2. 「:hov」→「:hover」をクリックすると画面がハバー時の表示になる
    3. それに対応してCSSの表示もハバー時のものに変わる
    4. 出てきたCSSを編集する

    具体的に、当サイトの記事タイトルを使って説明します。

    「Filter」の隣「:hov」(場所は画像参照)ではマウスを重ねたりフォーカスした時の状態を設定することができます。まずはクリックします。

    「:hov」をクリックすると以下の様に展開されるので、さらに「:hover」をクリックします。

    この状態で画面を確認すると、ハバー時の表示になっています。下のスクショでも、記事タイトルがピンクから紫になっています。

    この状態では、CSSもハバー時のものが表示されています。こちらも普段通り、ダブルクリックして試験的に編集することが可能です。

    CSSを消した状態を確認する

    マウスのカーソルをCSSのプロパティ名に当てると、青色のチェックボックスが表示されます。

    クリックしてチェックボックスを外すと、そのコードが適応されていない場合の表示を確認することができます。

    次に、「#head-in」の「background」のチェックを外してみます。要するに背景を指定するコードを外すので、背景がなくなって真っ白になるのが確認できます。

    適応されていない状態。線で消された様になります。

    打ち消し線の意味

    打ち消し線はそのCSSの優先順位が低く、適応されていないことを表します。間違ったコードではありません。

    同じプロパティに対する指令が複数あり、優先順位が低い場合にこうなります。

    応用:CSSの優先順位

    「Styles」タブでは、HTMLに対応するCSSの優先順位も見ることができます。

    上から、HTMLの要素に設定されたCSSが優先順位の高い順に並んでいます。

    右上の「(index):94」は、表示中のCSSがどのファイルの何行目に書かれているかを表しています。

    🌾「user agent stylesheet」となっている時はWebブラウザのデフォルトスタイルシートに書かれていることを意味します。

    応用:CSS内の検索

    Filter欄に検索したいワードを入力し、CSS内を検索することができます。例えば「Font」を検索したとします。

    すると、検索結果が黄色くハイライト表示されます。

    HTMLの編集

    CSSに比べると編集の機会は少ないかもしれませんが、知っておくと便利です。

    変更したい部分のHTMLを選んでダブルクリックすると編集できます。

    例として、ブログタイトルのHTMLをいじってみます。この変更も、実際のサイトには反映されないので大丈夫です。

    編集中の画面

    HTMLの編集が完了したらエンターキーを押します。これで編集内容が反映されました。

    ブログタイトルとしてどうなのっていうツッコミはありますが笑

    コードを検索する

    目当てのコードやテキストを検索することもできます。

    例えば使用中のWPテーマを調べたり、フォントを検索できます。

    「⌘command + F」

    で検索ボックスを表示させ、検索したいワードを打ち込みます。

    例として、本サイトのWordPressテーマを調べてみます。

    まず、ホーム画面を開いて、⌘command + Fで検索ボックスを表示します。

    検索ボックスにwp-contentと入力すると、ヒットした箇所が黄色でハイライトされます。

    🌾テーマによって若干名前が変わりますが大体「wp-content」「wp-themes」でヒットします。

    複数ヒットしたので、🔼🔽を使ってテーマに関係ありそうな箇所を探します。

    「wp-content/themes/luxeritas」と出てきたので、このサイトのテーマはluxeritasだと分かりましたね💡

    スマートフォンやタブレット上での表示を確認する

    これはレスポンシブ対応の時に便利です。

    デベロッパーツール画面上の「デバイスモード切替ボタン」をクリックします。

    「⌘command + ⇧shift +M」でも切替出来るよ!

    デバイスモード選択中はアイコンが青くなります。

    すると、表示画面をスマートフォンやタブレット版に切り替えることが出来ます。

    画面上の「Responsive▼」ボタンから、表示させたい端末の種類を選択できます。

    例:デバイスモードに切り替え、iPhone X の表示にした場合の表示画面

    ただ、実際に動かしてみると実機と異なる挙動をする場合もあるため、実機を使って検証するのがBetterです。

    最後に

    Chromeデベロッパーツールが使えるようになると、断然作業が捗ります。その上ものすごく勉強になるので本当におすすめです。

    最後に軽くまとめます。

    • デベロッパーツールはブラウザ検証機能である
    • 「command+option+i」「F12」で起動
    • デベロッパーツールを使ってサイトのコードが見れるし編集もできる
    • 編集した内容はデベロッパーツール内ですぐに反映される
    • しかし実際のサイトには反映されない
    • これを利用してデザイン変更のシミュレーションが可能

    ここでは、Webページを作成する上で必要な項目だけをまとめましたが、デベロッパーツールには他にもたくさんの機能があるので、今後もアップしていく予定です。

    自分と同じ、駆け出しのWeb開発者の皆さんにとって参考になれば嬉しいです😄

    スポンサーリンク