デベロッパーツールを使えるか使えないかで、コーディングに掛かる時間に雲泥の差が生まれます。
私がWeb制作の勉強を始めたばかりの頃は、「まずHTMLとCSSを覚えなきゃ！」とデベロッパーツールの使い方の勉強を後回しにしていましたが、これが大間違いでした。
もっと早い段階でデベロッパーツールの使い方を理解していれば、無駄なことに時間を費やすこと無くHTML、CSSの勉強が出来たのに・・・と、未だに後悔しているほどです。
ということで、本記事はWeb制作未経験の人でもわかるように「デベロッパーツールとは？」から、「どのように使う物なのか」まで解説していきます。
少々ボリュームのある記事になりますが、私と同じ後悔をしないためにも是非、取り組んで頂ければと思います。では早速いきましょう！
デベロッパーツールとは？
デベロッパーツールは、Webサイト制作を効率化するための機能がたくさん詰まった神ツールです。
Web制作の三種の神器に数えても文句無いレベル。
そしてデベロッパーツールはChrome、Internet Explorer、Firefox、Microsoft Edgeなど、主要どころのWebブラウザに必ずと言っていいほど搭載されています。
ブラウザってインターネットを閲覧するだけの物と思ってた・・・。
詳しくは後ほど解説しますが、デベロッパーツールで下記機能を使いこなすことが出来れば、Webサイト制作の効率が劇的に上がります。
- ブラウザで表示させたWebサイトのコードを見る
- デベロッパーツールでWebサイトのHTML、CSSを編集して検証を行う
- スマホやタブレットで見た時のWebサイトのデザインを確認する
デベロッパーツールは日本語に対応していないため、初見だと取っ付き辛いのが難点ですが、一度使い方を覚えてしまえば、Webサイト制作をうえで欠かせないツールになります。
Web制作の勉強を始めたばかりの方へ、繰り返しになりますが、今の段階でデベロッパーツールの使い方を覚えなければ、後で後悔する事になります！
この機会にしっかりと使い方を覚えて、効率的にWeb制作を行っていきましょう！
デベロッパーツールの起動方法、画面の見かたを覚えよう
デベロッパーツールの起動方法
Chromeで適当なWebサイトを表示させ、Windowsを使っている方はキーボードの「F12キー」を、Macを使っている方は「Command + Option + Iキー」を押してデベロッパーツールを起動しましょう。
※ほとんどのブラウザで共通のキーになっています。
するとブラウザの右もしくは、下の方にデベロッパーツールが表示されます。
HTMLやCSSは、改行が多いと視認性が悪くなります。
右にデベロッパーツールが表示されている方は、下の方に移動させて幅広で見られるようにしましょう。
右にあるデベロッパーツールを下へ移動する方法
デベロッパーツールの右上にあるお団子マークをクリックします。
下記の様んアイコンが４つ表示されますので、右から2番目をクリック。
これでデベロッパーツールが下に移動しました。
高さが狭くて見づらい場合は「Elements」や「Console」と書いてある部分の上にあるバーをドラッグして（マウスを押しながら動かして）サイズを調整してください。
使うのは「Elements」だけ
デベロッパーツールを見ると、「Elements」「Console」「Sources」「Network」といった様々なメニューが並んでいるのがわかるかと思います。
ボタンが沢山あるので不安になってしまうかもしれませんが、これら全ての機能を使いこなす必要はありません。
「Elements」の使い方を覚えるだけで、充分デベロッパーツールの恩恵を受けられます。
Elementsの見かた
Elementsをクリックすると、左右に分割されたウィンドウが表示されます。
これらはそれぞれ下記の役割があります。
※本来は別の名称があるかもしれませんが、本記事では下記の名称を使用して解説していきます。
HTMLパネル・・・現在表示しているWebサイトのhtmlファイルの中身を表示
CSSパネル・・・現在表示しているWebサイトのcssファイルの中身を表示
セレクター・・・html、cssを表示したい要素を選択するためのツール
レスポンシブツール・・・Webサイトをスマホやタブレットで表示した場合の見え方が確認出来るツール
この４つのツールのみ使っていきます。
Web制作初心者がデベロッパーツールで使い方を覚えたい機能3つ
使い方を覚えて頂きたい機能は、全部で以下の３つです。
- 現在表示しているWebサイトのhtml、cssのコードを見る
- デベロッパーツールでWebサイトのHTML、CSSを編集して検証を行う
- スマホやタブレットで見た時のWebサイトのデザインを確認する
画像付きでサクサク説明していきます。
早速行きましょう。
現在表示しているWebサイトのhtml、cssのコードを見る
先ほど説明した通り、デベロッパーツールの「Elements」を選択するとHTMLパネル、CSSパネルが表示され、現在表示しているWebサイトのhtml、cssのコードが見れます。
でも、それだけだといまいち使いどころがわからないですよね？
実際はコードの内容を確認したいポイントを指定して使います。
以下、使い方を見ていきましょう。
まずはGoogle Chromeを使って適当なwebサイトを開きます。
上記サイトの「事業内容」と書かれている横の部分に、斜めの線が入っています。
これがどのように表現されているのか、デベロッパーツールで調べましょう。
キーボードの「F12キー（Windows）」または「Command + Option + Iキー（MAC）」を押して、デベロッパーツールを起動します。
次にデベロッパーツール左上にあるセレクタアイコンをクリック
アイコンをクリックした後にサイト上をカーソルで動き回ると・・・。
少し見えづらいかもしれませんが、カーソル位置の移動に連動して、左下のHTMLパネルに表示される内容が変わっているように見えます。これは、その時カーソルが乗っている要素のhtmlがパネルに表示されているためです。
また、カーソルが乗った要素に、半透明の青や緑の四角いボックスと、白い吹き出しが表示されている事にも注目して下さい。それぞれ以下の役割を持っています。
- 半透明のボックス：選択している要素の領域を表す。
- 白い吹き出し：マウスを乗せている要素のサイズ（ヨコ × タテ）やフォント情報（カラー、字体）が記載されている。
なお調べたい要素にカーソルを乗せた状態でクリックすることで、HTMLパネルの表示を固定することができます。その際にCSSパネルにも選択した要素のcssが表示されます。
CSSパネルを拡大して見てみましょう。
先ほど選択した「#service .leftTitle」という要素のcssが表示されています。
ここで下にあるクラスを見てみましょう。「div」の中の「display: block;」という記載に横線が入っていますね。これは「display: block;」が無効になっている事を意味します。
「div」で「display: block;」指定しているが、より優先度の高いleftTitleクラスで「display: table-cell;」を指定しているため、非優先（サイトに反映されない）になっていることわかります。
自分でサイトを制作してて「何故かcssが反映されない！」っていう時、このようにして原因を特定することが出来ます。これが本当に最高！
では話を戻して「斜めをどの様に表現しているか」についてでしたね。
CSSの記述内容を見ると、赤枠で囲った部分が怪しいですね。
以下でご紹介する機能で、この値を弄って確認してみましょう。
デベロッパーツールでWebサイトのHTML、CSSを編集して検証を行う
デベロッパーツールのHTMLパネルとCSSパネルに表示されたコードは、自由に編集することが出来ます。編集内容は実際にブラウザ上で反映され、更新ボタンを押すまで保持されます。
他の人が作ったWebサイトを改造出来ちゃうの！？
もちろん編集内容は自分のPCの中でしか反映されませんのでご安心を！
では使い方を見ていきましょう。と言ってもパネル内の編集したい箇所をクリックし、キーボードを使って編集したい内容を入力するだけです。
先ほどの項目で表示していたcssを以下の通り編集してみます。
以下、実際に編集した時の動き。
右下のCSSパネルで編集し、サイト上で編集結果が反映されている事がわかります。
斜めの部分の傾く向きが変わりましたね！
この結果から、斜めを表現しているのは
・あなたが制作したサイトの不具合の原因を探る
・WordPressのテーマをアレンジしたい時に、要素のクラス名を確認する。
スマホやタブレットで見た時のWebサイトのデザインを確認する
最後にレスポンシブツールの使い方です。
「レスポンシブWebデザイン（後述）」に対応したサイトを制作するうえで必須のツールですので、今回で使い方を覚えてしまいましょう。（といっても、すごく簡単です。）
まずはデベロッパーツールの左から2番目のアイコンをクリックすれば起動します。
上の方に赤枠で囲った領域が出現しますので、その中の水色で囲んだ領域をクリックして下さい。
すると以下の様に、スマホやタブレット端末の名称がズラーっと出現します。
今回は【iPhone 6/7/8】をクリック。
すると以下の様にブラウザの表示領域が、iPhone 6/7/8のディスプレイサイズ(375 × 667)になります。それに伴い、webサイトのレイアウトもiPhone上で表示した時のデザインに切り替わります。
次は【Responsive】という項目をクリックしてみましょう。
この項目を選択すると、ブラウザの右側に縦の2本線が出現します。
そこをマウスでドラッグしながら左右にスライドすることで、サイトの表示幅を自由に調整出来ます。
Webサイトを閲覧する端末は、パソコン、スマートフォン、タブレットなど、多様化しています。
そのため、どんなサイズの端末で見られてもデザインが崩れない様、メディアクエリという技術を用いてWebサイトを制作するのが常識になっています。
この技術を用いたWebデザインを「レスポンシブWebデザイン」と呼びます。
クラウドソーシングサイト等で募集されている案件でも、大半が「レスポンシブ対応必須」という文言と共に掲載されています。
今回ご紹介したツールを活用してレスポンシブWebデザイン対応のWebサイトを制作しましょう。
まとめ
- デベロッパーツールとは、Webサイト制作を効率化するための物
- 一般的なブラウザに搭載されているため、誰でも無料で使用可能
- 多くの機能が搭載されているが、３つの機能が使えればオーケー。
- 本記事でご紹介した使い方をマスターし、Web制作を効率化させましょう！
