【神ツール解説】デベロッパツールの基本的な使い方
デベロッパツールを使いこなせるようになりたい人「デベロッパツールってなんなんだぁ〜…。Web制作するときに便利らしい？けどどんなことが出来るのか分からない…。あと具体的な使い方も教えて欲しいです。」
今回はこういった問題を解決します。
この記事を読むと以下のようになります。
・ 実際にデベロッパツールを自由に使いこなしてWeb制作が出来るようになる。
デベロッパツールは独学の中で割と初期の頃に勉強したのですが衝撃でした…。
完全初心者がカッコいいWebサイトのカッコいい動きなどの表現をコードを解析することで真似できるようになってしまったんです。
練習が必要というより、「知っているか知ってないかの差」なので勉強すればすぐに使えるようになります。
様々な記事や動画教材で学んだ中で共通して解説されている重要なポイントをピックアップしてまとめたので、この記事の信憑性はある程度高いと思います。
デベロッパツールの解説順
- どんなことが出来るの？
- 具体的な使用方法の解説
- まとめ
この順で解説していきます！
それではさっそく行ってみましょう。
１.デベロッパツールとは？
デベロッパーツールとはGoogleChromeに初期状態で備わっている「要素の検証機能」のことをさします。
私自身ウェブ制作をする時は必ず使用している機能です。
このChromeの検証機能であるデベロッパツールを使うと、例えば以下のようなことが出来ます。
いけてるWebサイトのコードが見れる
文字通り他のWebサイトのコードを見ることが出来ます。
簡単に言ってますがこれが凄い所で、言い換えればイケてるサイトのイケてる表現を簡単に真似ることが出来ます！！
業界で働くプロが書くコードを勝手に覗き見できるんですから、めちゃくちゃ勉強になることは言うまでもありませんよね…。
デザインの変更テスト
「自身が作成中のサイトのデザインや仕様を少し変更したい」と思った時にいきなり本番コードを書き換えてしまうと、どこがが崩れて取り返しのつかないことになるなんてことも起こりえます。
デベロッパツールを使うとこれらの仕様変更をWebページ上でテスト的に行うことが可能で、テストが上手くいったらそのまま本番コードに実装することも出来てしまう優れものです。
様々な画面サイズでの表示をチェックできる
スマホ、タブレット、PCなど様々なデバイスでの表示や挙動を確認しながらWebサイトを作成していくことが出来ます。
スマホ、タブレットの普及が進んで需要が高まる中、各デバイスでの表示状態を確認しながら作成することは今ではもう必須と言えますね。
２.具体的な使用方法の解説
ここまでデベロッパツールで出来ることの代表的な部分を紹介してきました。
ここからは具体的な仕様方法を学んでいきましょう！
（※ GoogleChromeを使用していることを前提とします。）
デベロッパーツールを起動
検証するWebサイトを開いたら、副タップ（Windowsなら右クリック）してメニューの中から「検証」を選択するとデベロッパツールが起動します。
ちなみにショートカットキーも用意されているので参考程度に。
Windows: F12
コードを見る方法
気になる箇所のコードを表示させる手順を解説します。
これだけです。
気になる箇所のコードを見れるようになったら…
デザイン変更テストをする方法
次にデザインの変更テストの手順を見ていきましょう。
試しに「お問い合わせ部分の背景色を変更」してみます
「背景色を#da6b64からskyblue」に変更してみます。
変更できましたね。
変更テストで出来ることは既存のstyleを変更するだけではありません。
新しくstyleを追加してみる
「width（横幅）を500pxにする」というstyleを新たに追加してみます。
追加して、反映されていますね。
このようにコードを書き換えたり、追加していって失敗してもノーダメージなテスト環境の恩恵はなかなか大きいですね！
デバイス別の表示のチェック方法
このように様々な種類のスマホやタブレットのサイズで表示を確認できる。
（上の画像はiphoneXでの表示を確認しています。）
どんなWebサイトもPC表示、スマホ表示は確実に準備されているはずなので今後Web制作をしていく時にこの機能は必ず重宝します。
今のうちに慣れておきましょう。
３.まとめ
- GoogleChromeに初期状態で備わっている「要素の検証機能」
- Webサイトのコードが見れる
- デザインの変更テストが出来る
- 様々な画面サイズでの表示をチェック出来る
いかがだったでしょうか？
デベロッパツールで出来ることと具体的な使い方を解説してきました。
好みというよりはWeb制作をするときはほとんどの場合デベロッパツールで検証しながら進めていくことになるので今のうちから使い慣れておくのが吉かと思います。
今回の記事が良かったと思っていただけたらTwitterものぞいてみてください！
ブログの更新情報の他にもプログラミング、エンジニア転職に関する様々な情報を発信しているのでぜひ。
➡︎りゅうき＠Web制作頑張る人|Twitter
最後までご覧いただきありがとうございました！
ではまた次の記事で。