ダレカン和泉Web制作・開発基礎カリキュラム

Step 2 共通基礎 » 授業5

STEP 2 | 授業 5/7

ブラウザと開発者ツール

世界中のWebサイトには、実は「設計図を見せてもらえる窓」がついています。それが開発者ツール。プロが毎日使うこの道具を使えると、世界中のサイトがあなたの教科書になります。

この授業のゴール 開発者ツールで、気になるサイトの色・文字サイズ・構造を調べられるようになる。

1. 開発者ツールを開く

  1. ブラウザでどこかのページを開く自分の suki.html でも、好きなサイトでもOKです。
  2. F12 キーを押す画面の右(または下)に、英語がぎっしりの画面が現れます。これが開発者ツールです。最初は圧倒されますが、使うのは一部だけなので大丈夫です。
  3. 閉じたいときも F12もう一度押せば閉じます。「開く・閉じる」を3回繰り返して、怖くないことを確かめましょう。
別の開き方: ページの上で右クリック →「検証」(Chromeの場合)や「開発者ツールで調査する」(Edgeの場合)でも開けます。こちらは「右クリックした場所」をすぐ調べられるので、慣れるとよく使います。

2. 要素を調べる ― 矢印アイコンが主役

  1. 左上の「矢印が四角に入った」アイコンをクリック開発者ツールの左上すみにあります。クリックすると青く光ります。これが「調べるモード」のスイッチです。
  2. ページの調べたい場所にマウスをのせるのせた部分に色がついて、タグ名や大きさが吹き出しで表示されます。
  3. クリックすると、その部分のHTMLが表示される「要素」(Elements)タブの中で、その部分のHTMLが青く選ばれます。右側(または下)には、効いているCSSが一覧で出ます。

つまり、「この見出しの色は何色? 文字サイズは何px?」が、どんなサイトでも調べられるということです。授業3・授業4で学んだタグやプロパティが、本物のサイトでもそのまま使われていることを確かめてみてください。

3. CSSをその場でいじってみる

開発者ツールのすごいところは、その場でCSSを書き換えて実験できることです。

  1. 調べるモードで、どこかの見出しをクリックして選ぶ。
  2. 右側のCSS一覧の color の値をクリックして、red に書き換えて Enter。
  3. ページの見た目がその場で変わります。数字(font-size など)は、クリックしてからキーボードの ↑↓ でも増減できます。
安心してください: この変更は「自分のブラウザの中の、いまの表示」だけのものです。本物のサイトは1ミリも変わりませんし、ページを再読み込み(F5)すれば全部元通りです。だから、どんなサイトでも自由に実験して大丈夫です。

4. スマホでの見え方を確かめる

  1. スマホとパソコンのアイコンが重なったボタンをクリック調べるモードのスイッチのすぐ右どなりにあります。
  2. 画面がスマホサイズに変わる上のメニューで「iPhone」など機種も選べます。世の中のサイト閲覧の半分以上はスマホなので、プロは必ずこの確認をします。
  3. 自分の suki.html(授業3・4で制作)も見てみるスマホサイズで崩れていないか確認しましょう。崩れていても今は直せなくてOK。「スマホで確認する」習慣だけ持ち帰ってください。

5. やってみよう ― サイト解剖ワーク

やってみよう

好きなサイトを1つ選んで、開発者ツールで「解剖」します。調べた結果をメモして、スタッフに報告しましょう。

  1. 一番大きな見出しの「文字サイズ(font-size)」は何px?
  2. サイトのメインの色(ボタンや見出しの色)のカラーコード(#で始まる6けた)は?
  3. 本文の行間(line-height)はいくつ?
  4. そのサイトをスマホ表示にすると、メニューはどう変わる?
記入例 (山田さんの場合): 見出し = 32px / メインの色 = #2e86ab / 行間 = 1.75 / スマホ表示では、メニューが「三本線のボタン」にしまわれた。― この4行が書ければ合格です。

発展チャレンジ(慣れている方・A型の方向け)

発展チャレンジ
  • 「コンソール」(Console)タブを開いてみましょう。ここはStep 3でJavaScriptの実験場として使う場所です。1 + 1 と打って Enter を押すと…? 計算機として遊んでみてください。
  • 「ネットワーク」(Network)タブを開いてページを再読み込みすると、Step 1 の授業1「Webサイトの仕組みを知る」で学んだ「注文と返事」が実際に流れる様子が見えます。1ページ表示するのに何回の通信が起きているか数えてみましょう。
  • 気に入ったサイトのボタンの CSS(色・角丸・影)を開発者ツールで調べて、同じ見た目のボタンを自分の suki.html に再現してみましょう。「まねして作る」はプロも使う最強の練習法です。

できたチェック