スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

HTMLのタグ

今回は久しぶりの更新となりますね。
というのも最近はHPを作ったり、FC2テンプレートを作成したりといったことが多かったので
ブログの更新は・・・結構長く空いてしまいましたね。

今回は、テンプレート制作時に思ったことなのですが、
テンプレート制作時やHP制作時はそれなりに多いHTML文章の中で開始タグや終了タグを
見つけなければならないことが多々あります。

しかし・・・これらの作業を手作業で一つ一つチェックしていくと

時間がいくらあってもたりないよ!」と言うことに多々なることがあります。

そこで、今回はHTML文章のチェックと対応するHTMLタグをチェックするツール&方法
紹介させていただきます。

長い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」を指定して
文法を指定します。
チェック

HTMLタグチェック文法指定


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

これからチェックだ!

HTML文法チェック

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


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

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


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

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

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

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

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

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

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

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


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


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

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


上へ戻る







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

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

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

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

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

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

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

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

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

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

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

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


上へ戻る







【後書き】

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

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

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


上へ戻る

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

No title

これは便利そうですね~。
本当にテンプレートの文法チェックの時間を大幅に短縮できそうですね。
やっぱり、HTML文法ミスって気になりますよね~。

翻訳プラグインを新しく設置されたようですね。
これもご自分で作成されたのですか・・・。
相変わらず、すごいですね~~。

「めっちゃ便利!なツールたち」が「めっちゃ convenience! な tools」
と翻訳されているのを見て、少し笑ってしまいましたw

あと、中国では国内のウェブサイトしか閲覧できないそうですから、
中国語の翻訳は、あまり意味がないのでは・・・^^?

ええ

>アンタレスさん

本当にこのHTMLの文法チェックというのは重宝できますよ^^
あぁ・・・プログラムって本当に素晴らしい・・・(←痛い子

本当にこれらがなかったらどうなってたことか・・・
いやー本当に助かりましたよ。

>翻訳プラグインを新しく設置されたようですね。
これもご自分で作成されたのですか・・・。
相変わらず、すごいですね~~。

はい、といっても他の翻訳サイトをURL部分を改変して、
対応するようにしただけなんですけどね・・・

見所といえば・・・個別エントリーにも翻訳対応するようになった
というところと各国の語で翻訳性能が高いサイトを使ったというところですね。
英語翻訳はやっぱりYAHOOが一番良いですしね。

ですが。。。このプラグインにはいろいろと弱点があって・・・
やっぱり、JSでURLを取得する形にしないとどのブログでも
使えるようにはならなそうです・・・

というわけで、Windowsプログラミングの傍ら
JSの学習に入りました・・・、果たして習得できるやら・・・

一応、共有プラグイン申請をしておきましたので、
もし宜しければ、見てやってください^^

>「めっちゃ convenience! な tools」

うわっ!。。。本当だ・・・w
これは、気づきませんでしたね。

なかなかフレンドリーな感じに翻訳されましたねw


>あと、中国では国内のウェブサイトしか閲覧できないそうですから、
中国語の翻訳は、あまり意味がないのでは・・・^^?

う~ん。。。確かにそうなんですけど、
中国からの留学生の方や、規制をくぐり抜けて接続している中国人の方もたくさんいると思うんですよ。

日本と中国の関係は確かにあまりよくはありませんが、
それは政府などの上層部関連のお話・・・
反日感情を持つ一般人もたくさんいますが、真実を知ればすぐにわかり合えるでしょうし、
自分としてはどの訪問者にも気持ちよく利用してほしいですから、今回のように作成させていただきました。

No title

これは便利…(・∀・)イイネ!!

どうも^^

>sfujlhさん

気に入って、いただけたようで幸いです^^
今日、共有プラグインに申請致しましたので、
今日には審査がが通れば「World-Word-翻訳」という名前の
プラグインがFC2の共有プラグインに追加されるはずですので、もし宜しければご覧ください^^

しかし、この「World-Word-翻訳」は言ってしまえば
まだまだ未完成・・・
これからJSを習得していかなければ完全な自分の満足の
状態で提供できなさそうなので、Windowsプログラミングの傍ら
JSをただいま学習中です。

JSを完全に習得すれば、今よりブログや記事の精度を
あげることができそうですし、様々な面でも役に立ちますね。

とりあえず、今日(厳密には昨日)いっぱい学習してみて、
構成などは大体わかりました。

Windowsプログラミングに比べればとても楽ですし、
文法もCと似ていて、自分にとっては学習しやすかったですね。
コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。