Webサイトのコーディング時に表示が崩れてしまうことがあります。
自分で原因を見つけて修正できれば、一発で完璧なコーディングができなくても全く問題ありません。
問題は自分で原因発見が出来なかったり、時間がかかってしまったりすることです。
スムーズに修正を行えるようになるには、ブラウザに搭載されている検証ツールを使いこなす必要があります。
検証ツールとは
検証ツールとは、Webページの構造、つまりHTMLやCSSの状態を確認できる機能のことです。
Google Chromeなどのブラウザにも搭載されています。
ブラウザで表示しているページのHTMLや適用されているスタイルを確認したり、変更したりすることが出来ます。
検証ツールが起動している状態を、デベロッパーモードや検証モード、開発者モードなどと呼ぶこともあります。
検証ツールで出来ること
検証ツールを使うと、例えば次のようなことが可能になります。
- スマートフォンやタブレットでの表示確認
- HTMLの閉じタグ抜けの発見
- レイアウト崩れの原因特定
- 表示崩れをその場で仮修正
- marginやpaddingの値の調整・確認
つまり、推測ではなく、確認しながら修正できるのです。
その結果、コーディングの完成スピードは大きく向上します。
検証ツールはプロのWebコーダーも使っている、業務にも必要不可欠な基本ツールです。
これらのメリットは、制作するWebサイトのデザインや構成が複雑になるほど強く感じられます。
スタイルシートが何千行になってくると、自分で書いた指定を忘れていたり、スタイル指定が何重にも重なっているなんて事もありますしね。
Web制作、特にフリーランスでお仕事を受ける場合は「崩れました、直し方を教えて」とは言えません。
そんな状況で、慣れていないツールを手探りで使うのは非常に大変です。
だからこそ、学習初期の今から検証ツールに慣れておくことが重要なのです。
コーディング力と、自分で解決できる力。
この2つを同時に伸ばすために、検証ツールは欠かせません。
この講座で、実務に入った時にも役立つ「自分で解決できる力」を身につけていきましょう。
次のレッスンでは、実際にChromeで検証ツールを開いて見方を紹介します。