HTMLタグのミスをチェックできるブックマークレット

今回は非常にお世話になっているブックマークレットを紹介していきます。HTMLのタグの閉じ忘れやミスを調べてくれるブックマークレットです。

ブログのカスタマイズをしていると時々ちょっとしたミスに気が付かないという事が多々あるのでこのブックマークレットは今や必需品となっています(個人的に)。

調べたいページを開いてこのタグチェックのブックマークレットをクリックするとこんな感じに指摘してくれます。

タグチェック-1

ある程度HTMLの知識があればどこが間違っていたのかすぐに分かりますし、カスタマイズした時にレイアウトが崩れた!という場合等にも原因がすぐに分かるので私は結構使います。

スポンサーリンク
アフィリエイトBパートナー募集

タグチェックツールの特徴

このブックマークレット名前がない?のでタグチェックツール(仮)としておきます。このツールでできる事は次の点です。

  • タグの閉じ忘れを検索する
  • 開きタグがない閉じタグを検索する
  • 親より先に閉じちゃってる子がないか検索する
  • タグ対応エラーの一覧と、ソースコード中のハイライト表示

冒頭でも画像で紹介したようにタグのミスをチェックしてそのページのソースコードと一緒に表示してくれます。ミスのあるソースコードはハイライトされて探しやすいようにしてあるので非常に便利!という特徴があります。

もちろんブックマークレットなので一度ブックマークバーに入れておけばいつでも1クリックでチェックできます。という訳でこのブックマークレットをブックマークバーに追加していく手順を紹介しておきます。

ブックマークレットを追加する

まずはこのブックマークレットを公開してくれているページへ移動。
HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]|とっくりばー

このページでこのブックマークレットの解説がされていますが、下の方にスクロールして「インストール」という見出しの下の「タグ対応をチェック」というリンク部分をドラッグしてブックマークバーに追加します。

タグチェック-2

これでブックマークレットの追加は完了。ブラウザにブックマークバーが表示されていないという場合にはこの記事を参考に。
ブックマークバーを表示させる方法

さて、ブックマークレットが追加できたら実際に自分のブログでも他の人のブログでもいいので、チェックしたいページを開いてこの追加した「タグ対応をチェック」というブックマークレットをクリックしてみます。

タグチェック-1

こんな感じでチェック画面になったらOKです。

タグチェックツールの注意点

先ほどブックマークレットを追加したページにもこのような注意書きがありました。

このスクリプトは現在は特に悪いことしてないと思いますが、急に僕が悪気を起こして利用者の個人情報をぶっこ抜くスクリプトに書き換えちゃわないとも限りません。もしかしたら僕のFC2アカウントがクラッキングされてスクリプトを置き換えられちゃうかもしれません。

そんなわけで、例えば個人情報リストを表示してるような画面で利用することは避けて下さい。もしくは、現時点のスクリプトをダウンロードして、自分が信頼するサーバーに置いて使ってください。

この部分をちょっと補足説明しておきます。まずね、さっき追加したブックマークレット(ブックマークバーに追加したやつ)を右クリックして「編集」をクリックしてみましょう。

タグチェック-3

URLの部分をスクロールしながら見ていくと、「src=’http://tkr-net.tk/tagcheck/tagcheck2.js」という部分がありますよね。

タグチェック-4

つまりね、「http://tkr-net.tk/tagcheck/tagcheck2.js」のURLにこのツールの作者の方の作成したJavascriptのコードが書いてあってそこのプラグラムコードを参照している訳です。

まあ、コード自体が結構長いのでこれは当然なんだけど、例えばこの「http://tkr-net.tk/tagcheck/tagcheck2.js」というファイルを作者の方が削除した場合にはこのブックマークレットは使えない訳です。

注意書きにもあったようにもしかするとクラッキング(不正にネットワークに侵入)されたりする事もあるかも分かりません。不正に侵入されてソースコードを書き換えられるという事もあるかも知れないという事です。

なので「個人情報リストを表示してるような画面で利用することは避ける」という事は覚えておきましょう。

もしくはちょっと難しいですが「http://tkr-net.tk/tagcheck/tagcheck2.js」で書かれているJavaScriptのコードを全部コピーしたファイルを作成して「信頼できるサーバー」にアップしておき、先ほど書いたブックマークレットのURLの「http://tkr-net.tk/tagcheck/tagcheck2.js」という部分だけを自分のファイルの場所のパス(URL)に書き換えたら安心です。

これも試してみたけど文字コードは「shift-jis」がいいみたい。文字化けするので。

ただ、この場合も自分のサーバーがクラッキング(不正侵入)される可能性だってありますよね。なのでどちらにしても「個人情報リストを表示してるような画面で利用することは避ける」これは重要。
おすすめの便利なブックマークレットまとめ

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。