プログラミング

【Web制作に必須】Chromeデベロッパーツールの使い方

イケゾー
この記事は、こんな人におすすめ!
・Webページ作成の表示確認をしたい
・Chromeのデベロッパーツールってなに?便利なの?
・レスポンシブデザインが完成しているか確認したい
・スマホでの表示をPCで確認したい

このような疑問にお答えします。

本記事の内容

  • Chromeのデベロッパーツールの使い方
  • PC、タブレット、スマホでの表示を確認したい

筆者情報

Ikezooo

 
  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定2級保有
  • Twitterフォロワー3,100人
   

Web制作をするとき、ページの表示確認にデベロッパーツールを使用します。

スマホやPCでの表示を確認できるので、レスポンシブ対応に便利です。
また、HTMLとCSSが設計通りできているかの確認も可能です。

Web制作の仕事をしたい方は、ぜひ使えるようにしてください。

それでは、どうぞ!

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

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

使い方は、簡単です。

Chromeを開いて、ショートカット「option+command+I」で開きます。
メニューバーから、表示>>開発/管理>> デベロッパーツールをクリックする方法でも良いです。

下記のように、ソースコードが表示されているのが、デベロッパーツールです。

デベロッパーツール

この画面を使って、便利な機能を紹介していきます。

どんな便利な機能があるか解説してきます

イケゾー

特定のデバイスでの表示を確認する

レスポンシブデザインを作成するにあたって、様々なデバイスでの見え方を確認ができます。

  • 「Toggle device toolbar」をクリックします。
  • 画面サイズ、またはデバイス名を選択します。

この機能により、特定の画面サイズやデバイスで、表示を確認できます。

デベロッパーツール上で確認できるとはいえ、全デバイスを確認するのは、現実的ではありません。
私の場合は、スマホ用375pxPC用1366pxの画面幅のみ確認します。

実機がなくても見え方を確認できるのはスゴイね

イケゾー

ボックスの構造を確認する

デベロッパーツールの「要素の確認ツール」を使用して、ボックスの構造を確認します。

  • 「要素の確認ツール」をクリックします
  • カーソルを要素の上に重ねる

HTMLでマークアップした要素は、ボックスを構成します。
ボックスは、幅、高さ、マージン、ボーダー、パディングをそれぞれ設定されています。
CSSにて設定した値が、設計通りになっているか確認できます。

ボックスの構造を見ながら、デザインを調整してもいいね

イケゾー

Flexbox・CSS Gridの構造を確認する

FlexboxやCSS Gridなどの配置機能の確認もできます。

ボックスの並びや配置を、デベロッパーツールの中で変更して、プレビューすることも可能です。

  • FlexboxやCSS Gridを使用している要素の「flex」「grid」ボタンをクリック(青色にする)
  • FlexboxやCSS Gridの構造が表示される
  • Stylesタブをクリックし、ボタンをクリックする
  • FlexboxやCSS Gridの設定を変更し、プレビューを確認できる

レイアウトの確認と変更ができるのは便利だね

イケゾー

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

まとめ

Web制作に便利なデベロッパーツールの使用方法を解説しました。

ポイント

・特定のデバイスでの表示を確認できる

・ボックスの構造を確認できる

・Flexbox・CSS Gridレイアウトの構造を確認できる

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング