HTMLとCSSを勉強するなら、テキストエディタとGoogleChromeがあるとよい

1.HTMLとCSSを勉強するときに、何を揃えるべきか？

ここしばらく、私は、HTMLとCSSを勉強しています。WordPressのテーマを学んだことで、HTMLとCSSをもう少し勉強したいと思ったのがその理由です。

私は、ウェブもデザインも素人です。そんな私が、HTMLとCSSを勉強するときに、非常に助けられているツールが二つあります。それは、テキストエディタ(私の場合は秀丸エディタ)とGoogleChromeです。

2．テキストエディタ(秀丸エディタ)がどのように役に立つか

HTMLもCSSも単なるテキストファイルですから、Windowsに付属されている「メモ帳」で編集することが可能です。それでも、私は、メモ帳ではなく、何らかのテキストエディタを使った方がよいと思います。

テキストエディタには、豊富な検索・置換機能やバックアップ機能などが備わっていますし、マクロなどを利用して、いろいろな定型文を活用することも可能です。これらが、テキストエディタを使うひとつの理由です。

しかしそれよりも強調したいのは、テキストエディタは、HTML、CSSなどに対応した編集モードを持っていて、ファイル形式に応じて、自動でコードを色分けしたり太字にしたりしてくれます。そのため、HTML、CSSの見やすさがかなり向上する上、タグの閉め忘れや要素のスペルミスを、かなりの程度、防ぐことができます。

秀丸エディタは有料ですが、それだけの価値はあると思います。また、たとえばTeraPadなど、フリーで優秀なてぃすとエディタが、多数存在しています。

HTMLとCSSを勉強するなら、まず、テキストエディタを導入するとよいと思います。

3．GoogleChromeの「要素を検証」

(1)「要素を検証」の開き方

GoogleChromeには、「要素を検証」という機能があります。任意のウェブページを表示させた状態で「F12」を押すか、右クリックで「要素を検証」を選択すれば、この機能を使うことができます。

この機能を使うと、ウェブページの下半分に、ソースなどを表示したエリアが出現します。この中でできることは、本当にすごいです。

(2)HTMLを構造的に把握できる

まず、HTMLを構造的に把握することができます。タグの入れ子構造に応じて、折りたたみが可能です。

(3)HTMLの要素ごとに、表示及びサイズを把握できる

次に、「要素を検証」のエリアで特定のHTMLを選択すると、ウィンドウ上部のブラウザ部分において、そのHTMLに対応する箇所に色が付きます。どのHTMLがどのように表示されるのかが、よくわかります。

さらに、この表示においては、HTMLが占めているサイズが表示されます。

おまけに、要素、margin、padding、borderが色分けされて表示されます。

CSSでサイズを指定するとき、これは、大変便利です。

(4)CSSがどんな風に適用されているかを把握できる

最後に、「要素を検証」エリアでHTMLを選択すると、右側に、そのHTMLに適用されるCSS、リストになって表示されます。

CSSがHTML要素に適用されるルールは、何かと複雑です。優先関係があったり、上位要素から引き継がれる場合と引き継がれない場合があったりして、よくわかりません。

しかし、「要素を検証」で確認をすれば、当該HTML要素にどのCSSがどのように適用されているのかを確認することができます。

4．おわりに

HTMLもCSSも、シンプルで優れた言語だと思いますが、素人には、何かと難しい点も多いです。

そんなとき、テキストエディタとGoogleChromeは、大きな助けになってくれます。