デベロッパーツールの使い方を必ず覚えよう
ある程度HTMLやCSSが理解できるようになったら、CSSのデザインはデベロッパーツールで作るようにしましょう。
数十行程度のHTMLでは埋め込むCSSもたかが知れています。
ミスも少ないし単発で終わり、他の要素との兼ね合いや複数のプロパティを使ってレイアウトやデザインを作る事もないでしょう。
ところが本格的なページデザインを作る時、親要素、子要素、隣同士兄弟関係の要素など複数の要素に対し、様々なCSSを埋め込んでいく必要があります。
こういった時、エディタで入力しますと、今自分が入力したり、設定してる内容が、ページ上にどのように影響するのか、どのように変化するのかが、なかなか思い浮かびません。
何年も携わってきた経験者ならCSSのプロパティを見ればある程度、想像できますが、それでもブラウザと同じ表示イメージを完全に頭の中で再現できるエンジニアは少ないです。
初心者ならなおさらです。
デベロッパーツールを使いますと、次のような事をすべて同時に分析・確認ができます。（これらはほんの一例です。）
- 該当する要素にどんなCSSが設定されているかが一目でわかる
親要素があった場合、その祖先要素も含み、影響を与える要素がすべて判る - 該当する要素の領域を色付けで確認する事ができ、また親要素や子要素も含め、互いにどのように干渉しあってるのかが視覚的に判る
- 特定の要素に対し、CSSを追加・訂正・削除・コメントにする事ができ、その設定がリアルタイムで表示され、その変化を視覚的に捉える事ができる
- 1px単位の違いが視覚的に確認でき、キーボードの↑↓キーを使用する事で連続変更ができ細かな設定を画面で確認しながら決める事ができる
デベロッパーツールの使い方
デベロッパーツールには様々な機能があり、すべてを紹介するときりがありません。
そこで解り易く解説くれてるサイトがありますのでそちらをご紹介いたします。
