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