【図解たっぷり】Chrome検証ツールの使い方入門
Webデザイン・コーディング初心者の方がまず覚えたい、Google Chrome検証ツールの使い方をお教えします。レイアウト崩れの原因を素早く発見し、制作時間短縮とストレス軽減を目指しましょう！
無料で今すぐはじめる※ ログインする必要はありません。
レベル
ビギナー
7レッスン
0日間
コーディング学習で、こんなイライラはありませんか？
指定したはずのCSSが
なぜか反映されない
崩れてしまったレイアウト…
どこが悪いのか分からない
修正に時間がかかって
ウンザリしてしまった
コーディング時間も学習効率も劇的アップ！検証ツールの活用方法教えます
～実務でも必ず役立つ、Google Chrome検証ツール(デベロッパーモード)の使い方入門～
HTMLやCSSの学習を始めると「見本のように表示されない」「思ったレイアウトにならない」という場面も出てきます。教材を使って学習している時には、見本のコードと見合わせて間違いを探せばよいのですが……時間もかかるし、イライラしてしまいますよね。
そんな時に役立つのが、Google Chromeなどのブラウザに搭載されている検証ツール(デベロッパーツール)。レイアウト崩れの原因発見や、ブラウザ上でどこを直せば修正できるかを検証が可能。
検証ツールを使いこなせるようになると、コーディングスピードが向上し、学習効率も高まります。
短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、受講したその日に基礎習得という超短期学習を実現することができます。
完全未経験でも大丈夫! アニメーション図解でやさしく解説
本講座では、かんたんなコードを使って検証ツールの見かた・使い方を基本から解説しています。文字の説明だけではわかりにくいところも、アニメーションを見ながら実際に操作してみると感覚がつかめますよ。
HTMLやCSSの学習をはじめたばかりの方も、ぜひ受講してみてください。これからのコーディング学習から、実際にお仕事を受けたときまで、使える内容が盛り沢山です。
お仕事にも活かせる「考え方」が身につきます
本講座では単なる「使い方」紹介ではなく、間違い探し感覚でチャレンジできる素材をご用意しています。他人がコーディングしたWebページのレイアウト崩れだからこそ、客観的な原因究明・修正がしやすいというメリットもありますよ。
指示されたレイアウトを作るために、HTMLやCSSを修正していく場面はお仕事でも多くあります。「なぜ、ここのレイアウトが崩れているのか」「どう書けば他に影響を与えず修正できるのか」を考えることで、コーディングの応用力も上がっていきます。
世界中のWebサイトがあなたの教科書になります
検証ツールでは、CSSプロパティと値がどのような効果を持っているのか、親要素が変わるとどのような影響を受けるのか、画面上で感覚的に確認することが出来ます。 リリースされているWebサイトを見た時、気になったデザインがどの様にコーディングされているかも調査できます。
本講座を終えると、できるようになること
- 要素に指定されているCSSが分かる
- Webページのレイアウト崩れの原因が分かる
- デザイン通りのコーディングができる
- ブラウザ上でちょっとした修正を試せる
- レスポンシブ対応コーディングができる
レッスン内容
-
1
Webサイトコーディングをしていると表示が崩れてしまうことがあります。ブラウザに搭載されている検証ツールを活用し、スムーズに修正を行えるように学習していきましょう。
-
2
Chrome検証ツール（デベロッパーモード）を使ってみましょう。本レッスンでは検証モードの開き方、コーディングで使用するパネルとその見かたを解説します。
-
3
Google Chromeの検証ツールで、確認したい要素を選択する方法を解説します。選択した要素はエディタでHTMLを書くのと同じ感覚で、編集・変更してみることも可能です。
-
4
Google Chromeの検証ツールにあるスタイルパネルを使って、適用されているCSSを調べる方法を解説します。実際のWeb制作/コーディングで、最もよく使う部分です。
-
5
Google Chromeの検証ツールでは、PCモニター以外でサイトを見た時、どのように表示されるかも確認できます。スマホ/タブレット幅での表示確認に活用しましょう。
-
6
練習用Webページを使って、検証ツールでレイアウト崩れの原因を探してみましょう。このレッスンでは修正して頂きたい5つのポイントを紹介します。
-
7
練習ファイルにある5つのレイアウト崩れを、Google Chromeの検証ツールを使って原因発見・修正する方法を解説します。
もっと見る
【図解たっぷり】Chrome検証ツールの使い方入門を 無料で始めましょう！
無料申し込み期限
12月8日まで
募集
人数
100名 （残りわずか）
