/*Font Awesome*/ /*Prism.js*/ /*Google Adsense*/

[入門編] 完全初心者向け!Chrome検証機能 デベロッパーツールの使い方を紹介するよ!

Webサイトのデザインを変更したい、気になるあのサイトのソースコードを調べたい…

そう考えている方必見です!

今回の記事は、実際のサイトでコードとかも書いて、少し慣れてきた駆け出しのWeb開発者向けです!

Webページを作成する時は、Webブラウザの検証機能を使うと便利です。

検証機能はFirefoxやSafari等色んなブラウザにありますが、

その中でも個人的には最も使い勝手が高いChromeの検証機能、

デベロッパーツール

の基本的な使い方を紹介していきます。

これが使えるようになるとコーディングの勉強もすごく捗るよ!!

デベロッパーツールで出来ること

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

自身のWebサイトのデザインをテスト的に変えてみたい時

自身のWebサイトのHTML、CSSを書き換えて、表示テストをすることが出来ます。

デベロッパーツール上で編集した内容は、実際のWebサイトには反映されません。

従って、

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

他のWebサイトのコードを調べる

お洒落なWebサイトのコードがどうなっているか知りたい時

他のWebサイトのコードがどのように書かれているかを一部見ることが出来ます。

スマホやタブレット上での表示を確認

違う端末でどう表示されるのかを見たい時

デスクトップ以外にも、スマートフォンやタブレット上でどう表示されるかを確認することが出来ます。

デベロッパーツールを起動

まず、検証したいページを開きます。今回は例として、Googleのホーム画面を使って説明していきます。

次に、以下のショートカットを使ってデベロッパーツールを起動します。

  • Mac : ⌘command + ⌥option + I
  • Windows : ^Ctrl + ⇧Shift + I または F12
  • すると、下の画面が表示されます。

    デフォルトでは、デベロッパーツールは画面の下半分に表示されますが自分は右側に表示されるようにしています。

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

    画面の見方

    デベロッパーツールを使用する時は、画面上部のタブをクリックし、目的に応じてパネルを切り替えます。

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

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

    WEbデザインに関して、この中でも最もよく使用するのが、ElementsとStylesです。

    要素を選択

    要素の選択方法は2パターンあります。

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

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

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

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

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

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

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

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

    Elementsパネル(HTML)から選ぶ

    あるHTMLに対応するCSSを見たい時に使います。

    1 デベロッパーツールの画面上にある「Elements」タブを選択します。

    2 検証したいHTMLコードの左の▶︎マークをクリックすると、要素の展開が出来ます。

    🌾逆に展開中の要素を省略したい時は▼をクリックすると出来るよ!

    3 その中から更に、検証したいコードを選んでクリックします。

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

    要素を編集

    基本的に、選択中の要素をダブルクリックで編集・Deleteキーで削除することが出来ます。

    HTMLやCSSのコードを変更すると、リアルタイムで表示が変わります。

    が、この変更は一時的なものです。

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

    つまりこの機能を使ってサイトのデザイン変更シミュレーションが出来るんだね!

    CSSの確認・編集

    CSSは「Styles」タブで確認/編集します。

    画面の見方

    「Styles」タブでは、要素に設定されたスタイルが優先順位の高い順に上から並んでいます。

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

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

    基本的な編集の方法

    1. 表示画面選択モード(⌘ + ⇧ + C)にする
    2. デザインを変えたい部分をクリック
    3. 「Styles」内にCSSが表示される
    4. 変えたい値を選んでダブルクリック
    5. CSSが変更され、リアルタイムで表示画面に反映されます!いぇい!

    CSSの色変更

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

    色の指定はrgbaや16進数カラーコードを入力もしくは、

    好きな色をクリックして直接選ぶこともできます。

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

    青色のチェックボックスについて

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

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

    ロゴ画像の上のパディングのコードのチェックボックスを外してみました。

    打ち消し線の意味

    打ち消し線はそのCSSの優先順位が低く、適応されていないことを表します。

    同じプロパティに対する指令が複数あり、優先順位が低い場合にこうなります。
    間違ったコードとか、消されたコードではないので注意!

    プロパティの絞り込み表示

    Filter欄にプロパティ名を入力し、プロパティの絞り込み表示ができます。

    「logo」を絞り込み表示したところ。
    隣の「:hov」「.cls」「+」もそれぞれ解説します。

    :hovで出来ること

    右上の:hov(上の画像参照)ではマウスを重ねたりフォーカスした時の状態を設定することができます。

    .clsで出来ること

    その隣の.clsをクリックすると、新しいクラス名を追加できます。

    +で出来ること

    その隣の+では、新しいセレクタを追加できます。

    HTMLの編集

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

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

    例としてロゴ画像の下の「image」の文字をカタカナにしてみました。

    もっと良い例はなかったのか😅
    デベロッパーツール上での変更は実際のWebサイトには反映されないので、思いっきりいじって大丈夫!

    コードを検索する

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

    「⌘command + F」

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

    例として、本サイトを使ってWordPressテーマの調べ方を紹介します。

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

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

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

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

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

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

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

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

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

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

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

    Responsiveボタンをクリック、展開したところ
    例:デバイスモードに切り替え、iPhone X の表示にした場合の表示画面

    ここでの表示は各デバイスのものに近いため、レスポンシブ対応の時にとても便利です。

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

    最後に

    Chromeデベロッパーツールが使えるようになると、断然作業が捗ります。

    その上ものすごく勉強になるので本当におすすめです!

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

    ここでは、Webページを作成する上で必要な項目だけをまとめましたが、

    デベロッパーツールには他にもたくさんの機能があります。

    詳しくはGoogleのページを参考にしてみてください。