HTML文法の対応するタグチェック

【メニュー】

【1】～はじめに～よく使われるHTML文法チェックサービス

【2】もっとしっかりと簡単、お手軽にHTML文法をチェックするツール

【3】秀丸エディタのマクロで対応するHTMLタグをチェックしてみよう

【4】～後書き～ちょっとした余談～








【はじめに】

さてさて、HTML文章をチェックするとなればよくでてくるサイトに
以下のようなサービスが良くあげられると思います。

Another HTML-lint

W3C HTML Validation Servic

しかし。。。上記のサイトはHTML文章をチェックする上でそれぞれ欠点があります。
まず最初に上の方にある「Another HTML-lint」のサービスですが、

基本的なHTMLタグの記述などは指摘してくれますが結果があまりにも
時代錯誤な結果が表示されてしまう場合があります。

ここでいう時代錯誤とは要約してしまうと「やや結果が古い」ということです。

どういうことかといいますと。Web上の技術は年々進化していっています。
検索エンジンの構造はもちろんユーザーが使うブラウザの環境なども
年々変わり続けています。

そんな中で、このAnother HTML-lintのサービスはブラウザの実用性や検索エンジンの
面などを考えると、やや遅れている表示なども多々あります。

実際、Another HTML-lintを利用して違和感を持ったユーザーは現代では
多いのではないでしょうか？

それは、実際に企業の実用性の高い構造をしたHPなどを採点してみると
一目瞭然だと思います。

チェック自体はとても厳格なものとなっていますが、
現在の検索エンジンの構造やブラウザの構造を考えるとここまで神経質に
なる必要性や利益は特にないかな～、というような状況です。

しかし、個人的に言わせていただければ、最初にこのサービスを開発した作者には
拍手を送りたい思いです。
現代でこそ古くなってしまいましたが、当初はとても重宝できるサービスだったでしょう。


次に、WebでのHTML記述基準を標準化してしまおうと考えている、
「W3C HTML Validation Servic」と呼ばれる、（以下W3C)（ダブリュースリーシー）
組織のチェックサービスですが、これは見ての通り英語で書かれているため、
すぐにHTML文法をチェックするときにはわかりにくいという方が多いと思います。

そこで、今回は管理人がテンプレート制作時に重宝したツールを紹介させていただきます。


上へ戻る







【HTMLタグチェックツール】

今回使用した、HTMLタグチェックツールは「Crescent Eve」と呼ばれる
HTML専用のエディタを使用させていただきました。
この「Crescent Eve」はHTMLの記述をボタン一つで簡単にチェックしてくれるため
タグの閉じ忘れなどを簡単にチェックできるという優れものです。

HTML専用のエディタとしてもとても優れています。
それでは、早速ダウンロードしてみましょう。

【Crescent Eveのダウンロード】

【Step1】
Crescent Eveダウンロードページにいきページ中部の
｛Crescent Eveのダウンロード (約0.4MB)｝をクリックします。

【Step2】
Crescent Eveを実行ウィザードの命令に従ってインストールします。



【Crescent Eveの使い方】

【Step1】
Crescent Eveを起動します。

【Step2】
調べたいHTML文法をブラウザ上のソースで開き、Ctrl+Cなどでコピーし
Crescent Eveに文章を貼り付けます。

【Step3】
そして、下記のように右上の矢印ボタンをクリックした後に「Transitional」を指定して
文法を指定します。





【Step4】
そして、下記のようにツールから文法チェックをクリックすれば
以下のように簡単にチェックすることが出来ます。





このように、とても簡単にチェックすることが可能となっています。
しかも、このツールは文法をミスしてしまったところに直接ジャンプする機能などもついており
実際にHTML文法を書くときなどもとても重宝が出来るツールとなっています。


しかし・・・このツールには唯一残念なところがあります。。。
それは、「対応するタグ」をチェックする機能がないことです。

対応するタグのチェックとはわかりやすい例を出すと
次のようなことを示します。

<div class="a">
らーめん

<div class="b">
そーめん

<div class="c">
たんめん

</div><!--この/divはclass ｃに対応-->

</div><!--この/divはclass bに対応-->

</div><!--この/divはclass aに対応-->

というような、記述があったとします。
この記述で言えば、タグ<div>のクラスであるaに対応するタグを確かめたいとき、
この場合は一番最後のDIVタグが最初の<div class"a">に対応しています。

しかし。。。これが軽く５００行以上の莫大な量のソースの中から開始タグとその開始タグに対応する 終了タグを探すとなるとどうなるでしょうか？


「そんなことやっていたら、日が暮れちゃうよ！」


そうですね。とてもじゃありませんがそんな一回一回手動で探していくなんてことは
できませんよね。それにもしできたとしてもミスが増える上に莫大な時間の浪費です。

そしてこれが、ブログなどのデザインを構築するとなればさらにこの作業にさく労力が
増えてしまいます。
この対応するタグをチェックする方法を秀丸エディタにて今回は解説させていただきます。


上へ戻る







【秀丸エディタマクロ使用での対応するタグチェック】

それでは、秀丸エディタのマクロを使って今回は対応する開始タグと終了タグを
チェックしてみましょう。

【Step1】
まず、秀丸エディタHTMLタグチェックマクロのダウンロードページに行き
マクロをダウンロードします。

【Step2】
マクロの登録作業についてはこのサイトの
「秀丸エディタマクロ徹底活用術」にて詳しく解説されていますのでそちらをご覧ください

【Step3】
では、実際に使ってみましょう。
まずチェックしたいHTML文法上で、対応をチェックしたいタグを以下のような感じで選択します。


そして、HTML対応するタグをチェックするマクロを使用します。

使用して、以下のように表示されれば見事！対応するタグをチェックすることが可能になります。


上記のように、見事に対応するDIVタグまで移動しているのがわかると思います。

さらに、このマクロのすごいところはコメント間のタグは認識せずに、
正式なタグの部分だけ判定されるので、上記の場合で言えば、
コメント間にDIVタグが含まれていたとしても正常に動作するようになっているのです。

これらのツールやマクロを使用すれば、より簡単にHTMLをチェックする作業時間が
大幅に無料で短縮することが可能になります。

これは、余談ですがこれらのツールやマクロを使用してテンプレートの
文法チェックをしたため大幅に作業時間を短縮することが出来ました＾＾

長いHPやブログのトップページのようなデザインを構築するときには是非とも押さえておきたい
ツールやマクロですね。


上へ戻る






【後書き】

これは、今回のツール紹介とあまり関係がないのですが、
共有テンプレートの審査が残り100番待ちを切りました。
あと100番以内で、審査が実行されることになるのでこのままいけば約一週間ぐらいで
審査されることになりそうです。（緊張＆楽しみ）

それで、今回のFC2共有テンプレート名ですが「The_truth-Sky_blue」
という名前に決定しました！
もし、共有テンプレート審査に受かりますと「The_truth-Sky_blue」という名前のテンプレートが
追加されているはずですので、宜しければご覧ください

結果は追々に報告したいと思いますので、それまで楽しみに待っていただければ幸いです。


上へ戻る

---

関連記事：
直感と想像力でタイトルロゴを作ってみた
秀丸エディタ徹底活用術
大手企業のCSSやScriptを簡単にデバック&チェック