メモ

Adobe BrowserLab アドビに登録が必要（AdobeIDとかいうので、確か無料で誰でも作れたと思います）ですが、無料で使えるブラウザ表示のシミュレートツール。 任意のページについて、選んだブラウザでの表示をサーバー上でシミュレーションして画像として見せてくれます。 今日現在で見られるOSとブラウザの組み合わせは以下の通り Chrome 3.0 - WinXP FireFox 2.0、FireFox 3.0、FireFox 3.5 - WinXP、OSX IE6.0、IE7.0、IE8.0 - WinXP Safari 3.0、Safari 4.0 - OSX 横に並べたり、重ねて透明度を変えて比較することもできます。 あくまで擬似的なものですが、簡易的なチェックには役にたつでしょう。 ちょっと時間が掛かるのが玉に瑕ですね。 というか、こういう機能はDreamWeaverに入れてくれればいいのに。

cssだけに限りませんね。jsとかphpでincludeするファイルとか、要するにそれらの文字コードが揃っていないと文字が化け化けになった結果、タグに使う文字（三角括弧やクォーテーション）が出てきてしまうと全体のタグ構成がおかしくなるので崩れます。 最近では基本UTF-8で組めば良いんだろうけど、携帯対応とか古いプログラムの流用とかでShift-JISを使わざるを得ない場合もあったりして、DreamWeaverの設定を切り替えながら作業していると、たまに忘れちゃうときがあるんですね。複数スタッフで１つのサイトを時なんかに紛れ込んだりもします。 文字コードって重要ですね。。。

新人がよくはまります。 classやidの名前を数字で始めてはいけないんですね。 文字としては使えるんですけど、最初はアルファベットを使うと。 ところがなぜかブラウザによってちゃんと見えてしまったり、そもそもDreamWeaverのプレビューでOKだったりしちゃうので、ハマルと気づかないのです。たしかIEでcssが利かないと思った。 基本的なチェックポイントなんだけど、あまりに基本過ぎて見落としてしまう事があるので記録。

DD_belatedPNGに付いての過去のエントリはこちら IE6でのPNG透過 DD_belatedPNGとOperaの組み合わせで、意図しない隙間ができる不具合？ 便利に使えていたDD_belatedPNGですが、テーブルのthの背景に、200ピクセル四方の半透明PNGをリピートで敷き詰めたところ、該当ページを表示し要素したときに読み込み中のまま先に進まなくなるという現象が発生しました。 DD_belatedPNGのバグと言えるのかどうかはハッキリしないけど、意図した動作をしないという意味で、なんらかバグ的なものというレベルでしょうか。まぁ、元々難しいことを簡単にできるようにして頂いているので、その辺は広い心で受け入れよう。 具体的には、画面が真っ白のまま、一切の操作を受け付けなくなります。（落ちたりはしない） リピートしたときの負荷的な問題だろうか？ 原因についてはそのうちもう少し調査してみるつもりだけど、とりあえず今回は単に半透明の背景色を敷いて、さらにその下が透けるようにしたかっただけで、角丸とかドロップシャドウは使っていない単純なものだったので、IE6での透過表示は諦めて、該当箇所でのDD_belatedPNG使用をやめました。

CSSにはtext-justifyというプロパティがありますが、残念ながら実用的には使えません。 そう言うときにはjQueryで補う！ということで、探してみたところ、やっぱりありました。 左右いっぱいに文字をそろえる均等割り付け、印刷ではよく使われますが、Webでこれを表現するのはいかがなものかなぁと思います。別に必要ないんじゃないか、と。 困るのは、印刷畑の人が持ち込んできたデザインをコーディングする時ね。 基本的にこれはできないと言ってきたので、今回も断るのですが（笑）、一応切り札としてはjQueryでやる方法もありそうです。 でも、やっぱりWebに均等割り付けはなければないで良いと思う。。。 普通に使えるようになるのなら、デザイン的に使いたいところもあるけど、ここまでしてやることだろうか。 Character Justification Pluginのダウンロードページ 均等割付の話の続き（オチ？）はこちら

３連休に何冊か取り込みをしてみました。試したのは文庫の小説、詰碁（笑）２冊です。 結果分かったこと。 (1)文字などの黒色が薄い本は、コントラストが結構甘めになる。 (2)紙の色が白でない本は、紙の色がきれいに出ない。 （ベタッと全体が同じような色で出て欲しいが、グラデーションしてしまう） (3)適当設定で取り込んでも読めるが、やはりレベル補正をかける方が断然きれい。 (4)携帯（940SH）にJpegを転送して見てみたが、思いの外きれいに見えて感動！ (1)文字などの黒色が薄い本は、コントラストが結構甘めになる。 本はだいたい白黒の二色で印刷されていますが、黒と言っても真っ黒になっているわけではなくて、どうしても濃いグレーになってしまう。 scansnapは基本的にグレーの設定で取り込んでいるが、文字が少し薄めの色になるだけで、取り込み結果では割と差が出る。 もってないけどKindleとか、携帯の液晶画面で見る分には全然気にしなくても良いのかと思うんだけど、取り込み直後にPCで確認しているから結構気になってしまう。 (2)古くて紙の色が変わってしまう事もあるけど、文庫本の紙の色って少し色が付いている事が多い。これも(1)と同様、文字とのコントラストを下げる原因になるので、取り込み後の画像も文字が薄めになってしまったりする。 (3)上記を解決するためにはやはりレベル補正（あるいはトーンカーブ）で補正をした方が良い。 特に本はオリジナルを処分してライブラリ化する予定なので、一応このくらいはしておきたい。 レベル補正については、サンプル画像も入れつつ、別途やってみたい。 (4)最終的にはiPadなどのタブレット機で読むのがゴールなのだが、まだ手元になので（あたりまえ）、とりあえず携帯電話940SHにJpegで転送して、読んでみた。 文庫サイズの詰碁の本で、詰め碁というのは問題の図（碁盤の絵）は一部分だけだから大きいし、文字も小説よりも大きい。 元々紙が真っ白に近くてきれいなのだが、黒色が若干薄い。なのでレベル補正は強めにかけた。 携帯の画面サイズが横幅480ピクセルなので、レベル補正と同時にPhotoShopで縮小。 できた画像はパソコンで見るとさすがに小さい。が、携帯で見ると、超きれい！ 画面のドットの密度が高い

いかさまです。 本当は最初に組むときにしっかり考えれば必要のないことなのですが、あとからデザインが変わったときに既に組んでしまったHTMLを変えずに、CSSの微調整だけでは直せないことがあります。 HTML側も変えるとなると、既に別行程（プログラマのPHP組込）などに移っているものも戻してもらわないといけないので、場合によってはちょっと面倒だったりします。 今回起こったのは、もともとサブメニューとメインコンテンツの二段組みにしていたコンテンツで、左右の高さはそれぞれの成り行きになるように組んでいた。 ところがデザインの関係上、メインコンテンツ側の縦幅がサブメニューの縦幅より小さいときにはサブメニューの縦幅分の高さは確保したい、というもの。 jQueryのhight()で高さを取得できるので、それを使って以下のように解決。 var mainHeight = ($("#main").height()); var sideHeight = ($("#side").height()); if (sideHeight > mainHeight ){ ($("#main").height(side)); } これで、mainの縦幅が小さいときは、sideに自動的に合います。 ページがロードされてから実行されるため、一瞬、本来の高さでmainが表示され、すぐにsideの高さまで広がります。 全体に読み込ませているjsファイルに5行仕込んで終了。らくちん。 でもまぁ、こんな事やらないに越したことはないですけどね。

FlashCS3でとあるAVIファイルを取り込もうとしたときに、今まで見たこともないエラーが表示されました。曰く 「必須のシステムライブラリが正しく初期化されませんでした。 DirecteeShow 9 および QuickTime 7 以降をシステムにインストールしていることを確認してください。」 「DirecteeShow」は「DirectShow」の綴りミスらしい。DirectXの一部ですね。 一応環境を確認してみたところ、DirectX10、QuickTime7ともにインストール済み。（ちなみにOSはVista64ビット） 同様のエラーはよく出るようで、ネットでも情報がちらほらあるのだけれど、QuickTimeをインストールしていなかったという原因が多いらしく解決につながらない。 仕方ないので、ダメ元でQuickTimeを一度アンインストールして、再度インストールし直してみたらなぜか解決しました。 最初から最後まで意味不明ですが、QuickTimeは相変わらずなソフトだなということで。あと、次はDirecteeShowの綴りは直しておいてくださいね、Adobeさん。（CS4だと直ってたりして？）

FUJITSU ScanSnap S1500 FI-S1500 を導入しました。 理由は、iPad導入に向けて、本をPDF化するため。 （iPadを買うかどうか分からないけど、今年は何かしらタブレットマシンは買うと思う） 手始めに仕事関係の本を２冊読み込ませてみました。読み込ませたのはこの２冊。 ● jQuery入門―魔法のJavaScriptリファレンス&サンプル ● Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS) jQueryの方は１色、虎の巻は４色です。 適当にやってみた設定はだいたいこんな感じ。 ・スーパーファイン →エクセレントはスピードが遅く、ファイル容量も大きい。300dpiで十分だろう。 ・（jQuery）グレー、（虎の巻）カラー →白黒２値はいかにも汚い。 ・用紙向きの自動判別 →オフ ・文字をくっきり →オン ・白紙を削除 →オフ いろいろなところで言い尽くされていますが、用紙向きの自動判別は元々向きの揃っている原稿では不要だし、白紙を削除してしまうとページ数を合わせるのが面倒になってしまう。 ざっとやってみた感じでは、まぁまぁ読める。リファレンス用として使うには十分事足りるけど、じっくり読む本だといまいちかな。設定はもうちょっと考える必要が有りそう。 いずれの本も元々文字の色が薄めなこともあるが、スキャンしたらそれが強調されてしまった感あり。 また、jQueryの本はコード部分の背景にグレーの地色が付いている部分があるが、地と本文のコントラストが低くなるため、読みやすさや認識に影響した。この辺は致し方ないところと思う。 補正でコントラストを上げれば読みやすくなると思う。  100%表示時は小さい文字（注記やキャプション）や図版（図版の中に入っている文字）などは読みづらいが、元々結構大きく取り込んでいるので拡大すれば問題ない。300%までならドットも目立たない。 またScanSnapOrganaizerでのOCR（文字認識）は、日本語本文はなかなか優秀。途中に入っている英数文字に誤認識が目立った。また、いずれの本もHTML、CSS、JavaScriptのコードが入っているが、この部分も正しく認識できていない部分が多

MacでZip圧縮されたデータを支給された場合、普通にWindowsで解凍するとファイル名が文字化けしてしまいます。 中身が分かりにくいというのもありますが、Illustratorの場合は配置画像が分からなくなってしまって大変なことになります。修復がエライ大変。 これってどうにもならないのかと思っていたら、 StuffItExpander を使うことであっさり解決しました。 StuffItをインストールして関連づけた場合文字化けが起こってしまうようなのです。が、（StuffItExpander2009の場合）ソフトを起動して、「File」→「Open」で解凍したいファイルを選んでから「Expand All」などで解凍すると文字が化けません。なぜ？ 他にもMac側での圧縮時にWindowsで文字化けしないようにしてもらうこともできるようなのですが、それはなかなか客には頼みづらいのです。。。

どうもマウスカーソルの動きが気持ち悪くて、マウスパッドを換えました。 パワーサポート エアーパッドプロIII(マットブラック) 標準サイズ PAG-71 ロジクールの安いマウスだけど、エアーパッドプロとソールで最高に滑りも軽く、カーソル位置もバシバシ決まって超快適。こういうのはやはり少し高くても良い物を買わないとダメだね。 向き合う時間の長いアイテムは、良い物にしていこうと思いました。

XnView PSDやAIの内容をプレビューしたいときに、Bridgeが重くてたまらない。代わりのファイラとしてXnViewというフリーウェアを導入。あー、さくさく、快適、便利。 開いているフォルダで変わりますが、とあるフォルダを開いているときの使用メモリ比較 Adobe Bridge：177,232K XnView：27,384K 7倍（笑）。良い仕事してます。っていうか、Bridgeは何してるんですか。。。 フォルダの移動動作もPSDのプレビューも速い。機能的にもファイルを探してプレビューするという点で十分だし、Bridgeの代替として直感的に使える。 タブが付いているから、複数のフォルダを同時に開けるのかと思ったけど、タブはもっぱらプレビュー用と言うことで、その点が残念かな。あと、見た目がBridgeの方がカッコイイ。でもこのスピード差はもう戻れないかな。 便利ツールで仕事を早く終わらせましょう。

文字を画像で表現したいときにblock要素の背景に画像を指定して、text-indentにマイナスの値を指定して飛ばすというのは良くある方法。（画像置換、CSSでググるといっぱいでてきます） これの是非はともかくとして、実際問題よく使う。 で、たまに起こるのが、IE6で、CSSで指定したheightよりもボックスの高さが大きくなってしまってレイアウトが崩れたり、見えちゃ行けない部分の背景画像まで見えてしまう。 例えば次のように書くと発生する。 ■HTML側 <a id="test" href="#">画像置換</a> ■CSS側 a#test {  display:block;  font-size:12px;  line-height:18px;  width:200px;  height:12px;  background-image:url(img/test.gif); } aをblock要素にして文字を画像で置き換えたいのだが、問題はaボックスの縦よりもline-heightの指定のピクセル数が多いこと。こうするとIE6ではaボックスは高さが18pxになってしまうようで、上記のコードだと、背景画像がリピートしてしまう。 上記のようにline-heightとheightを同じ場所に書いているなら気づくでしょうが、line-heightが別のところに（初期設定として全体に影響するように）書いてあると気づきづらいかも。他のブラウザで大丈夫なので、「またIE6かよ」と思ってしまうが、これはこれで一理あるような気もしますね。

jQueryなんかをつかってプルダウンメニュー（ドロップダウンメニュー）を作ったときに、当然ながらサブメニューはきちんと全部見えて欲しいのに、IE6で別の要素の裏に隠れてしまうことがある。 IE6では、positionにstatic（デフォルト値）以外を指定したときに、自動的に登場順にz-indexが割り振られるようで、後に登場する要素が上になることが原因。 まぁ、考えてみれば、これは不自然な仕様じゃないのかな？ それぞれの要素にきっちりz-indexを指定してあげれば解決します。 一応注意点としては、HTMLは、親、子、孫というように、箱の中に要素を入れていくように階層化されているので、孫の中でどんなに大きなz-indexを指定しても、親が下になっているとダメ。 なので、ドロップダウンメニューを使うときは、なるべく上流の方で、安心できるz-indexにしてしまうのがコツでしょう。

jQueryのjquery.dropshadow.js。 置き場所が変わったんだろうか？　ネットで検索して出てくるサイトの多くが、ダウンロードのリンクが切れている。 一応、下記でダウンロード可能でした。（同じものかどうか不明。Download the script hereのhereをクリックしてダウンロードできました。） jquery.dropshadow.jsのダウンロード AllAboutの解説だと別のファイルも必要みたいな感じなんですが、これ一個だけでできました。 ただ、１つ問題（不具合？）が。 詳しく検証してないけど、白い文字にシャドウを付けたときに、カゲが白くなってしまった。黒にしたいのに、意図通りの色のカゲが付かない。 色指定をしても黒くできないし、jsの中身を見ても、初期値は黒になってるようなんだけど。。。 仕方ないのでいろいろやってるうちに、とりあえず回避法は発見。 まず文字は黒にしておいて、ドロップシャドウを適用した後、同じくjQueryでCSSの値をいじって文字を白くする。 先に黒い影ができてしまった後に文字の色を変えれば大丈夫らしい。 コードは下記。（id名textというdivの中のspanの文字にドロップシャドウを適用） $(function(){   $("#text").dropShadow({left:2, top:2, blur:1, color: "black"}); }); $(function(){     $("#text span").css('color','#ffffff'); }); このやり方、正しいのか自信が持てない。。。 あ、でもJavaScript非対応の場合も考えると、デフォルトは白で、まず黒に変えて、シャドウして白に戻すという３ステップの方がよさそうか。

CSSで上下中央揃えをする方法。 横のセンタリングはtext-align:centerとmarginのautoを使えば良いですが、縦で中央にそろえるのはちょっと面倒。 昔はある意味簡単に、Tableタグを使ってやってましたが、最近はそうも行かず。かといって「display:table-cell;」はIE6、IE7が非対応。 調べてみたところ、結局はIE6とIE7はhackを使ってinline-blockとする、次の方法が今のところ良いみたい。（2年前の情報ですけど、役立ちそうなので忘れないようにリンク。） CSS で簡単に上下中央揃えを実現する display:table-cellが実用的に使えるようになるのはいつのことか。。。jQueryで同じことができるプラグインとか有ればいいのに。

もはやjQueryプラグインの話ではなくなってしまったが、IE6で透過PNGを使えるようにするDD_belatedPNGを使ったときの不具合？について。 DD_belatedPNGの外部ファイルをhead内で読み込むと、なぜかそれだけでbodyの下に1行分くらいの隙間が空いてしまう。（Opera10.10とDD_belatedPNG_0.0.8a.jsの組み合わせで確認。IE6、IE7、IE8、GoogleChrome4、Safari4、FireFox3.5では問題なし。） 原因は不明だが、確認できる限りOpera10.10のみで起こっているようであり、IE6以外ではDD_belatedPNG_0.0.8a.jsを読み込まなくて良いので、 条件付きコメント を使ってIE6を振り分けて対処。 どちらにしても不要なものは読み込んだり動作したりさせない方が好ましいでしょうね。

古いバージョンのInternetExplorerでの動作検証に便利な IETester 。 IE6で透過PNGの動きがちょっと違ったりしたけど、概ねTesterと本物の動作には差がないようで、十分検証用として使える。 特にIE6、IE7なんかはやっかいな部類のブラウザなのですが、作業しているのと別のマシンでの検証だとおっくうで回数が減ってしまい、（僕は）不具合に気づかないことがあるので、これを頻繁につかう用にしてます。 とはいえ、最終的には本物で検証する必要は有るかと。

IE6とか、いろいろ困った動きをするブラウザなので、JavaScriptとかCSSを振り分けたい気分になるときがあります。 CSSハックを使ったり、JavaScriptの振り分けも有りますが、裏技は今後のことやメンテナンスを考えると、あまりやりたくない気がする。（新しいブラウザがその裏技でどういう動作をするか予想できない）　そういうときに使えるのが、IEが独自に実装している「条件付きコメント」とやら。 囲んだ部分を特定のIEバージョン（あるいはそれ以外）に対してのみ有効にすることができる。条件に当てはまらないブラウザでは、普通のコメントとして無視される。 書き方は、例えばIE6だけに該当部分を読み込ませたい場合は、 <!--[if IE 6.0]--> 内容 <![endif]--> これだけ。 内容部分がIEでは普通に表示されるが、他のブラウザでは「<!--」で始まり「-->」で終わっているので、コメントとして無視されるという仕組み。 この内容部分に、IEのみで使用したいJavaScriptとかCSSを書いておく。 この方法が便利なのは、HTMLの仕様上コメントになるという点を利用しているため、今後予期しないブラウザでも不具合が起こる可能性が極めて低いこと。 ハックとか裏技的なものは、当然、編み出された時点のブラウザでしか検証していないわけで、将来的に何か不具合が起きる可能性はあるけど、これなら安心して使えそう。 まぁ、はやくIE6のシェアが無視できるくらいになれば、こんなことしなくてすむんですけどね。

肩こり対策に Microsoft Natural Ergonomic Keyboard 4000 B2M-00010 を買ってみた。 ●大きさ そんなに気にならない。 コンパクトサイズではないが、思っていたほど邪魔にならない。 これは実際置いてみないとわからないけど。でも、普通パソコンに標準で付いてくるキーボードとあまり変わらないと思う。 ●形状 打ちづらいかと思ったけど、すぐ慣れた。 片手で打ちたいときはちょっと不便。 FLockが邪魔。こんな機能はいらないんだが。。。 同じ意味で、上部の便利キーもイランから、小さくして欲しい。 ●キータッチ やわらかい。ネットでは不評みたいだが、別にいいかな。静かで○ アームレストの下に、元から付いている持ち上げる脚？をつけ、モニタ側の脚も立てて使ってるので、結構机から高い位置にして使ってます。 体の近くに引き寄せて使うのが良い感じみたいです。 これだけで肩こり完全解消、となるはずもないわけですが、少なくとも肩がずっと緊張している感じはなくなった。気分的には良い買い物だったかなと。安いしね。

jquery.pngFix.js の話を書いた。 ｊQueryを導入しているなら、やはりこのプラグインを使うのが普通は楽。だけど問題発生。 ●問題１ リンクボタンを背景画像で置換したい場合（つまり、aタグをblockにして、背景に透過PNGを指定し、文字をtext-indent:-9999pxとかで飛ばす方法）を使ったときに、マウスカーソルが手の形に変わらなくなる。（確認した環境ではリンク自体は有効） ●問題２ 背景に透過PNGを指定したdivの中に問題１と同じような画像リンク（背景画像はJpeg）を入れた場合、リンク自体が無効になる。 少なくとも確認した環境では上の２つの問題が発生した。これはイケてない。 で、結局以前のエントリでも言及したDD_belatedPNGの方を使うことに。DD_belatedPNGの方ではまったく問題が起こらず、あっさり解決。 DD_belatedPNG jQueryの「jquery.pngFix.js」の方は、背景画像に透過PNGを使うときは要注意っぽい。背景に使うことの方が多い様なきもするが。。。

jQueryが突然使いたくなって、というか使わないと効率悪いんだなーと思って、急きょ購入した本。Amazonで買ったので他の本と見比べたわけではないんだけど、jQueryの入門としてはとても良くできているんじゃないかな。ベストチョイスに近いのではないかと思う。 jQuery入門―魔法のJavaScriptリファレンス&サンプル JavaScriptの知識が少しでもあると良いんだけど、無くてもサンプルを改造する指針にはなるかな。 ちなみに、サンプルを探すときはなるべくシンプルなもの（コードが短いもの）の方が、改造するには楽ですね。 いろいろ機能を盛り込もうとして長くなっているものは改造に不要なものを見極めるのが難しいんで。 この本は後半（というか、冒頭以外）リファレンスで、jQueryの基本解説はちょっとだけ。でもそれで十分なのがjQueryのすごいところだし、30分で使えるようになるのは嬉しい。 書名にもあるように、「魔法」のようにページの中身が動く、しかも、短いコードで。解説部分だけでも元をとった気分になった。 1つ難点は$()に第２引数を指定すると、第１引数の範囲が第２引数の中に限定されるという事を書いて欲しかった。（読んで見落としてただけだったらすみませんが） ※↑例えば$("div","#hoge")と書くと、hogeというIDが付いている要素の中のdivだけが対象になる。 あとはプラグインの本も一冊欲しいですね。最終的にはWebで探すんだけど、スタンダードなものの使い方を見ておくと応用も利くので。

jQueryのプラグイン「jquery.pngFix.js」 ページ上で透過PNG（アルファ付きPNG）を使いたいときに、古いIE対応のために使います。 他にも色々同じようなJavaScriptのライブラリは有るようですが、もともとサイトにjQueryを入れているならこれを使うのが手っ取り早い。使い方も簡単。 ●jquery.pngFix.js http://jquery.andreaseberhard.de/pngFix/index.html ダウンロードして解凍するとファイルがいろいろ出てきますが、必要なのは「jquery.pngFix.js」。 これをヘッダに読み込んだ後に、例えば次のように書くと、ページ全体で透過PNGが有効になります。 $(function(){     $(document).pngFix(); }); 上記のコードは使うHTMLのヘッダに＜script＞で囲って書いても良いし、別ファイルに書いて読み込んでも良いし、jquery.pngFix.jsの最後に追記しても良いです。追記しちゃうのが簡単かも。読み込むだけで即使えるから。 使い方としてはそれだけでOKなんだけど、一応補足としては、上記の書き方だと全部の要素に適用するので、きっと動作的には若干遅くなるはず。できれば必要なところのみにした方が良いのかなと言うことで、$()の第二引数に使う場所を指定して使っている。 例えば、 $(function(){     $(document,".className").pngFix(); });  ※「className」は使う要素が含まれているタグのCSSクラス名。＜div class="pngBox"＞＜img src="hoge.png"＞＜/div＞なら、「pngBox」を入れる。 クラスでなくてIDなら、「.」を「#」に。 ※この記事の＜＞は全角で書いてますので、コピペするときは注意。 ところで、１つ注意としては、背景画像に透過PNGを使う場合、ボックスのサイズと画像のサイズが合ってないとおかしくなります。（画像がボックスのサイズに拡大・縮小される） それと、繰り返し（repeat）にも対応していないということです。

DreamWeaverでCSSを組んでいくときに、画像に合わせてボックスサイズを作るのに、画像のピクセル数をエクスプローラーで見ていました。 画像が複数のフォルダに分かれていると、エクスプローラーのウインドウだらけで見づらいので、エクスプローラーをタブ化できるフリーウェアを入手。 ●QTTabBar http://qttabbar-ja.wikidot.com/qttabbar サイトにはVista32bitでしか動作テストしてないとありますが、Vista64bitでも動作しているようです。 他にもいくつかに多様なものが有るけど、画像のピクセル数が出せなかったり（ホントは出せるのかも）、英語版だったり、動作が微妙だったりしたので、これをチョイス。QTTabBarはエクスプローラーの拡張なので、それはそれで若干不安もありつつでしたが、タブ以外の機能は使い慣れたエクスプローラーのママなので取っつきやすいです。結構便利に使えそう。 Vistaでインストールするときは管理者モードでないとダメなので、インストーラーを右クリックして「管理者として実行」で行けました。 最近ブラウザは高速のOperaをメインにすることに決めたのですが、やはりこういう細かいけどいつも使うツールは生産制に影響しますよね。QTTabBar、ナイスです。浮いた時間で早く帰りましょう。

FireFoxにWeb製作時に便利なボタンがいっぱい付くアドオン。 正直、これがなければFireFox使わないと思うくらい、よく使っているツール。 CSSで表示がずれちゃってるときとか、人が作ったサイト見るときとか、 マウスを乗せた位置のタグを表示できるのですごく便利。 フォームとかクッキーのデバグにも重宝します。 あと、組み終わったときにCSSを解除して、美しくできていれば自己満足するとか。 http://lab.tubonotubo.jp/tools/webdeveloper/index.html