【図解たっぷり】Chrome検証ツールの使い方入門

Webデザイン・コーディング初心者の方がまず覚えたい、Google Chrome検証ツールの使い方をお教えします。レイアウト崩れの原因を素早く発見し、制作時間短縮とストレス軽減を目指しましょう!

※ ログインする必要はありません。


無料

レベル

ビギナー

7レッスン

access_time 0日間

コーディング学習で、こんなイライラはありませんか?

指定したはずのCSSが
なぜか反映されない

崩れてしまったレイアウト…
どこが悪いのか分からない

修正に時間がかかって
ウンザリしてしまった

コーディング時間も学習効率も劇的アップ!検証ツールの活用方法教えます

~実務でも必ず役立つ、Google Chrome検証ツール(デベロッパーモード)の使い方入門~

HTMLやCSSの学習を始めると「見本のように表示されない」「思ったレイアウトにならない」という場面も出てきます。教材を使って学習している時には、見本のコードと見合わせて間違いを探せばよいのですが……時間もかかるし、イライラしてしまいますよね。

そんな時に役立つのが、Google Chromeなどのブラウザに搭載されている検証ツール(デベロッパーツール)。レイアウト崩れの原因発見や、ブラウザ上でどこを直せば修正できるかを検証が可能。

検証ツールを使いこなせるようになると、コーディングスピードが向上し、学習効率も高まります。

短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド

多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、受講したその日に基礎習得という超短期学習を実現することができます。

1

完全未経験でも大丈夫! アニメーション図解でやさしく解説

本講座では、かんたんなコードを使って検証ツールの見かた・使い方を基本から解説しています。文字の説明だけではわかりにくいところも、アニメーションを見ながら実際に操作してみると感覚がつかめますよ。

HTMLやCSSの学習をはじめたばかりの方も、ぜひ受講してみてください。これからのコーディング学習から、実際にお仕事を受けたときまで、使える内容が盛り沢山です。

2

お仕事にも活かせる「考え方」が身につきます

本講座では単なる「使い方」紹介ではなく、間違い探し感覚でチャレンジできる素材をご用意しています。他人がコーディングしたWebページのレイアウト崩れだからこそ、客観的な原因究明・修正がしやすいというメリットもありますよ。

指示されたレイアウトを作るために、HTMLやCSSを修正していく場面はお仕事でも多くあります。「なぜ、ここのレイアウトが崩れているのか」「どう書けば他に影響を与えず修正できるのか」を考えることで、コーディングの応用力も上がっていきます。

3

世界中のWebサイトがあなたの教科書になります

検証ツールでは、CSSプロパティと値がどのような効果を持っているのか、親要素が変わるとどのような影響を受けるのか、画面上で感覚的に確認することが出来ます。 リリースされているWebサイトを見た時、気になったデザインがどの様にコーディングされているかも調査できます。

本講座を終えると、できるようになること

  • 要素に指定されているCSSが分かる
  • Webページのレイアウト崩れの原因が分かる
  • デザイン通りのコーディングができる
  • ブラウザ上でちょっとした修正を試せる
  • レスポンシブ対応コーディングができる

レッスン内容

もっと見る


【図解たっぷり】Chrome検証ツールの使い方入門を 無料で始めましょう!

募集人数には制限があります。サインアップはお早めに。

※ ログインする必要はありません。

無料申し込み期限

5月22日まで


募集
人数

100名 (残りわずか)

×