デベロッパーツールのススメ

Web制作にかかせないデベロッパーツール。

本日はデベロッパーツールの使い方を簡単にお話ししたいと思います。

Google Chrome画面上で右クリック。
「検証」
を選んでみましょう。

すると何やら

• html
• css

が画面上に表示されますね。

この、「検証」は
デベロッパーツールと呼ばれるもの。
ブラウザ画面上でいろんなことを検証できるツールです。（そのまんま笑）

コーディング経験者の方は、制作の必須ツールですよね！

デベロッパーツール右上のバツ(×)ボタンで閉じることができます。
一度閉じてみましょう。

本記事ではChromeでデベロッパーツールの使い方についてお話ししますが、他のブラウザでも使用できます。
ですが、ブラウザごとに見た目や使い方異なります。

本記事参考に、「使い方覚えたい！」な方はChromeで操作してみてください^^

ショートカットで開いてみよう

先ほどは右クリックでデベロッパーツールを開きましたが、ショートカットもあります。

何度も表示非表示を切り替える場合、毎回マウス操作するより、ショートカットの方が便利で時短になりますので、覚えていきましょう！

ちなみに、サンプルサイトもありますので、デベロッパーツールの操作練習にご利用ください。

ショートカットでデベロッパーツール開くことができましたね！

閉じる場合も、同じショートカットでOKです。

表示位置を変えてみよう

デベロッパーツール右上に３点リーダがありますよね。

ここをクリックすると、「Dock Side」と出てきます。
これはデベロッパーツールの表示位置です。

選べる項目は４つ。

• Undock into separate window（独立して開く）
• Dock to left（左側に表示）
• Dock to bottom（下側に表示）
• Dock to right（右側に表示）

最初は下側（Dock to bottom）が選ばれていることが多いです。

使っていくうちにどこに表示させると見やすいか、検証しやすいか、わかってきます。

私自身は右側に表示させることが多いですが、検証したい内容によっては下側に表示させることもあります。

まずはご自身の好みの位置に表示させてみましょう！

検証を始めよう

では、早速使ってみましょう。

検証したい部分を選択

デベロッパーツール左上に、矢印マークがあります。
矢印マークをクリックしてみましょう。

すると、矢印マークが水色に変化します。

その状態でWebサイトの中を、マウスカーソルを色々な位置に合わせてみてください。

マウスカーソルの当たった部分が水色になりますね。

検証したい位置にマウスカーソルを当ててクリックしましょう。
「ヘッダーを検証したい！」場合は、ヘッダー部分をクリックです。

すると、デベロッパーツール内のHTML、CSSがヘッダーについての記述となります。

デベロッパーツールのHTMLタグを直接クリックし、検証したい部分を選択することもできます。

「この部分のコードはこうなってるのか、なるほどね〜〜」

と見て確認するだけでなく、編集することもできます！

HTMLを編集してみよう

デベロッパーツール上で、編集したいHTMLタグを右クリック。

すると、さまざまな項目が出てきますが、

Edit as HTML

をクリック。

要素を追加したり、消したり。
HTMLの編集ができます。

編集できたら、枠の外をクリックし、確定しましょう。

Edit as HTML
以外にも、

• Add attribute（アトリビュート追加 class名など）
• Duplicate element（複製）
• Delete element（削除）

など、さまざまな編集項目があるので必要に応じて使ってみてください。

CSSを編集してみよう

編集したい部分のHTMLタグが選択されているか確認しましょう。

もし選択できていなければ、先に選択しておきます。

あとは簡単。
CSS部分をクリックすれば、入力できるようになります。

書き加えたり、消したり！
といったかんじで編集していくことができます。

レスポンシブモードで確認

「スマホやタブレットの見た目を検証したい！」

という目的でベロパーツール使うことも多いです。

実機で確認する前に、ある程度パソコンで検証することができるなんて、嬉しいですよね！

使い方は簡単。

デベロッパーツール左上、矢印マークの隣に、スマホが重なったようなマークがあります。

ここをクリックすると、レスポンシブモードに！

画面上部でさまざまなデバイスが選べます。
スマホやタブレットなど、検証したいデバイスを選んでWebサイト確認していきましょう。

検証したいデバイスがない場合でも、「Responsive」を選択し、画面サイズの数値を直接入力すればOK！

最後に

デベロッパーツールの使い方ご紹介しましたがいかがでしたか？

使えば使うほど、

「こんな使い方もあるのか！！」

と新しい発見もありますし、常にアップデートされているので、どんどん便利に進化しています。

デザインツール上であれこれ考えるより、デベロッパーツールで検証していくことで、作業も時短していくことができます。

ここでちょいと注意事項。

デベロッパーツールはあくまで検証するためのもの。
ブラウザ画面上で編集しても、大元のHTMLファイルやCSSファイルが編集されるわけではありません。

デベロッパーツールで試して、

「これだ！」

にたどり着いたら、大元のファイルも編集しましょう！

また、

「デベロッパーツールで検証して、サイトも完成！
あとはオープンのお知らせだそう！」

というところまできたら、実機でも確認しましょうね^^
ちょうど良いブログがあるので、こちらもどうぞ。

では、また(´︶`)ﾉ”