【HTML】【CSS】作業効率がUPするプログラミング初心者さんに教えたい開発ツール

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

今回は、CSS初心者が陥りがちなHTMLファイル、CSSファイル、表示を確認するブラウザの３画面を見ながら作業するのが大変という状況への対策を紹介していきます。

---

CSS初心者の方はのコーディングの際、ソースコードと出力画面を交互に見て、試行錯誤しながらやっていると思います。

「このidでこの要素を取得して、この要素にはこのclassを入れて・・・。」

というふうに、HTML、CSS、そしてブラウザ画面の３画面を交互に見ながら作業するのって、慣れないうちは本当に大変ですよね。さらにコードの記述量が多くなってくると、今自分がCSSでスタイルをあてている要素すら見失ってしまうこともありますよね。

そうなってくるとだんだん作業が億劫になってきて、やる気が続かなくなってしまう傾向があります。

そこで本日ご紹介するのがこちら、

GoogleChrome デベロッパーツールです！

このGoogleChrome デベロッパーツールを使うことで、面倒だった３画面の切り替えや、対象の要素を探す作業の負担を大幅に軽減することができます。

お値段は無料です！

使い方は簡単。
まずは以下のように編集対象のページをChromeブラウザで表示します。

この状態で以下のキーを押しましょう。

Windowsの方は　F12
Macの方は　command + option + I(アイ)

すると、以下のような画面になると思います。

この状態で下記赤枠の矢印ボタンをクリックし、編集対象の要素にカーソルを合わせます。

そうすると、対象の要素のスタイル情報が表示されます。
このままクリックすると、デベロッパーツール上に対象のHTMLソースが現れ、CSSどんなスタイルがあたっているか確認できます。

また、HTMLやCSSをここから編集し、どのようにスタイルが反映されるか見ながら確認できてしまいます。

ソースコードだけでは編集後のイメージができない場合や、どこをいじったらどうなるのか、参考にしたいサイトはどんな構造でどんなスタイル指定をしているのかを調べる時に便利です。

特に、余白は目に見えないためデベロッパーツールで確認できるのが非常にありがたいですね。marginとpaddingも色分けされているので、認識が容易です。

ただし、デベロッパーツール上で行った編集は実際のソースコード(HTMLファイルやCSSファイル)に編集内容が保存されるわけでは無いので注意してください。
あくまで確認用として使用しましょう。反映したい場合は、実際のファイルを編集してください。

以上で解説は終わりです。また次の記事でお会いしましょう！