どうもお久しぶりです。
FlashDeveloperだったんですが、最近はHTMLも書くようになりました。
HTMLを作ってると、細かいところで面倒だなぁーと思うことが多いです。慣れてないだけかもしれませんが…。
変数が使えないというのが一番大きな問題で、ヘッダフッタを変更しようものなら全部変更というのがね…。慣れない。うまいやり方を見つけたいです。
それはさておきとして、表題の件です。imgのサイズはやはり指定したほうが良い、ということなので、全部指定しているのですが、コピペしたり、変更があったり、間違って入力してたりで、実際のサイズとは違うサイズがimgタグのwidth/heightに入ってたりします。大きい画像で少ないpixelであればそんなに目立ちませんが、やはりデザイン通りに配置しないと、ということで。
で、これを何とかできないかと思って、ブックマークレットを作ってみました。FirefoxでFirebugを使ってる前提の作りになっていますが、他の環境でもconsole.logを確認できれば使えると思います。
追加するには、適当にどこかのページをブックマークした上で、タイトルをわかり易い名前に変更し、以下のリンクのURLをコピーしてください。そのまま下のリンクをブックマークにドラッグ&ドロップでも大丈夫なブラウザもあるかもしれません。
使い方:
- 調査したいページを開く
- FirebugのJavaScriptコンソールなど、console.logを見れる画面を開く
- ブックマークレットを実行
- 画像サイズが実際のサイズと異なるものがあれば、赤く枠がつき、コンソールに現在の画像サイズと、実際の画像サイズが表示されます。(now:現在の表示サイズ, real:実際の画像のサイズ)
ブラウザによっては動作しないかもしれませんが、Win7+Firefox16,Mac10.6+Firefox17では動作してくれました。
jQueryを使うために1秒待つ、ということをしています。読み込み完了が検知できればもっといいんですが…。このあたりは機能向上も含めて考えてみようと思います。
HTMLをやり始めるに当たって環境を整えたりしたので、次回はそれについて何か書こうとおもいます。