<< Prev Page Next Page >>

スポンサーサイト

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


HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]

2013/1/28 サーバーを引っ越しました。お手数ですがブックマークし直してください。ついでにscriptタグとHTMLコメントを除外できるように機能もアップしてますから!

tagcheckスクリーンショット
必要に駆られてタグの閉じ忘れを簡単にチェックするブックマークレットを作ってみた。

ほんとに開いたタグの閉じ忘れしか検出できなくて、たとえば開いてないのに閉じてるタグとか、閉じタグと開きタグが互い違いになっちゃってるとこの検出とかはなにもやってない。(11/29現在)11/30 New! 出来るようになりました


機能


ブックマークレットを実行すると
・タグの閉じ忘れを検索する
・開きタグがない閉じタグを検索する
・親より先に閉じちゃってる子がないか検索する
・タグ対応エラーの一覧と、ソースコード中のハイライト表示
以上。たったこんだけのことをやるツールが意外と無かった…いや、あるけど。W3Cツールじゃいかんのかと。でももっと素早くさっさとチェックする必要が…ごめん。ただ作りたかっただけ。

他のツールを調べてみたけど…
HTMLの閉じ忘れをチェックできる「Page Scanner Tool」:phpspot開発日誌
これよりはずっとイイ!よね!ちゃんと閉じてるタグの数とかどうでもいいもんね。

制限


最初innerHTMLを解析しようとしたら、閉じ忘れたタグを適当に補完してくれたHTMLを返してきてて意味がなかったので、一度XHRで読み込み直してるため、制限が。
・POSTで生成された画面とか、ランダムに変化する画面とかでは使えません。
・UTF-8以外のページではソースが文字化けします。(誰か助けて)
あと、造りの問題による(根気と暇不足による)制限が。
SCRIPT中の"</div>"とかの文字列が無視できません2013/01/28 New! 出来るようになりました
・いまんとこのコードでは同じところを何度も何度も走査するので巨大HTMLだと遅いかも。

お約束


このブックマークレットは、
http://tkr-net.tk/tagcheck/tagcheck2.js
を動的に読み込んで実行します。

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

そんなわけで、例えば個人情報リストを表示してるような画面で利用することは避けて下さい。

もしくは、現時点のスクリプトをダウンロードして、自分が信頼するサーバーに置いて使ってください。

インストール


タグ対応をチェック←このリンクをブックマーク
WinXP, Firefox3, IE6で一応うごいてました

12/1追記 スクリプトの場所を替えました。これでちゃんと動くはずなのでブックマークし直してください。

12/2 追記 この記事アクセス少ないなあ…けっこうイイと思うんだけどなあ。

12/15 追記 ポップアップブロックにひっかからないようにしました。ブックマークレットをブックマークしなおしてください。

2013/1/28 サーバーを引っ越しました。お手数ですがブックマークしなおしてください。加えて、コメントとscriptタグの中身を無視できるようになりました。


スポンサーサイト

FirefoxでXHTMLでページ上部に空白が入っちゃう場合

さて最近悩んでいた問題を最も簡単なサンプルコードを使って解決できたのでここに記すよ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<link rel="index" href="index.html" />
<title></title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
#pageall {
    background-color:blue;
}
#contents {
    background-color:#e0e0e0;
   
}
</style>
</head>
<body>
<div id="pageall">
    <div id="head">
    <h1>[h1]テストページなんだぜ!</h1>
    <div id="subtitle">[subtitle]この辺がヘッダなんだぜ!</div>
    </div>
   
    <div id="contents">[contents]ここに内容を書いたりするんだぜ!</div>
</div>
</body>
</html>
謎の空白

こんなすっごく簡単なXHTMLを作ってFirefoxで表示すると、ページ上部に謎の空白が入っちゃう。どう考えても、DIV id="pageall"はページ上部にぴたっとくっつかなきゃおかしいのに。なんでやー。

調べたらわかった。

h1のマージン。

[3848] Re: IE以外で表示される空白

まじっすか。

h1 { margin:0; }
空白が解決

まじかーー!

なんでh1のマージンが、h1を囲むdivの外側に表示されちゃうの!firefoxしっかり!ていうかこれCSSの仕様なのか?わからん。

あとバッドノウハウついでにメモ。

  • XHTMLにxml宣言をつけるとIE6で後方互換モードになっちゃうので、xml宣言はつけないのが良い。
  • 標準準拠モードにすると、IE6でもmargin-right:auto;margin-left:auto;でブロックの真ん中寄せができる。
  • ちなみに上記のXHTMLで、#pageall {border:1px solid transparent} とやると、Firefoxでは上部空白が消える。ただしIE6で黒い枠線が表示される。
  • さらに * html #pageall {border 0 none !important;} とかやればIE6で枠線が消せる…とか泥沼になるのがやだったの!いやったらいや!

なんとか解決できそうな雰囲気だけど、また望む表示をするためにdivタグをひとつ余計に入れ子にするとかもう、ほんとバカみたいすぎる。だれかこのバカバカしさを終わらせてほんとに。



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