*

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

公開日: : 最終更新日:2013/11/13 勉強

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は、大きな助けになってくれます。

スポンサードリンク

関連記事

no image

文章を書くときの項目番号の付け方(「公用文方式」と「理科系の作文方式」)

1.「公用文方式」または「理科系の作文方式」で項目番号を付けることのすすめ (1) 問題意識 構

記事を読む

no image

『大学で勉強する方法』(A.W.コーンハウザー)は、大学生以外にも役に立つのではないかと思う。

1.『大学で勉強する方法』という本について この本は、文字通り、大学で勉強するための簡潔で実際

記事を読む

no image

思考の枠組みの一例 『武器としての決断思考』における、メリット・デメリットに対する突っ込み方法

1. はじめに 思考の枠組みに従って考えることの実践(1)「ブログを毎日更新するべきか?」(前半)

記事を読む

no image

レポート課題に対して、どのようにレポートを作成し、提出すればよいか

0.まとめ レポート課題に取り組むときには、以下の3つの当たり前なことを大切にするとよい。

記事を読む

no image

『非論理的な人のための論理的な文章の書き方入門』(飯間浩明)のすすめ

1.問題 他者に何かを伝えるための文章を書くコツを、手っ取り早くつかむためには、どうしたらよいか。

記事を読む

no image

「しまう」と「響く」を、勉強に活用する

1.勉強のやる気を上げるために役に立つ、「しまう」と「響く」 (1) 勉強のやる気を上げるために、

記事を読む

no image

feedlyに登録した50のサイトを1日10分未満で全部確認し、読みたい記事の全文をPocketに送る流れ

1.概要 (1) 私が使っているRSSリーダーは、以前はGoogleリーダーだったけれど、Googl

記事を読む

no image

文章の組み立て方0 「文の書き方」と「文章の書き方」

1. 文章の書き方には、「文の書き方」と「文章の書き方」がある 私は、これまで、文章を上手に書ける

記事を読む

no image

物理的な書斎よりも重要な、IT上の書斎の状況を整理する

1.物理的な書斎スペースを整えた 先日、自宅のデスクを買い換えました。以前は120cm幅のシンプル

記事を読む

no image

iPhoneのKindleアプリとKindle Paperwhiteの比較

1.Kindle本を「思考する場所」として使うため、iPhoneのKindleアプリでKindle本

記事を読む

スポンサードリンク

スポンサードリンク

no image
「ハサミスクリプト for MarsEdit irodrawEdition」をキーボードから使うための導入準備(Mac)

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は

no image
AI・BI・PI・BC

AI 『〈インターネット〉の次に来るもの 未来を決める12の法則』を読

no image
[『サピエンス全史』を起点に考える]「それは、サピエンス全体に存在する協力を増やすか?」という評価基準

1.「社会派」に対する私の不信感 (1) 「実存派」と「社会派」 哲学

no image
[『サピエンス全史』を起点に考える]サピエンス全体に存在する協力の量と質は、どのように増えていくのか?

『サピエンス全史』は、大勢で柔軟に協力することがサピエンスの強みだと指

no image
WorkFlowyを「書き上げる」ための道具として機能させるための、2つの条件・3つのイメージ

Tak.さんのTweetに触発されて。 WorkFlowyやOmniO

→もっと見る

  • irodraw
    彩郎 @irodraw 
    子育てに没頭中のサラリーマンです。1980年代生まれ、愛知県在住。 好きなことは、子育て、読書、ブログ、家事、デジタルツールいじり。
    このブログは、毎日の暮らしに彩りを加えるために、どんな知恵や情報やデジタルツールがどのように役に立つのか、私が、いろいろと試行錯誤した過程と結果を、形にして発信して蓄積する場です。
    連絡先:irodrawあっとまーくtjsg-kokoro.com

    feedlyへの登録はこちら
    follow us in feedly

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑