ばむばんか惰隠洞

■ [HTML] 判ってしまえば、なんて事なかった（いつもの事だ）

昨晩からずーっと訳が分からずイライラばかり募っていた事が、突然ポンと解決したので忘れないようにメモしておこう。

企業サイトなどでワークフローなどをそれなりにデザインされた画像で表示したい時。そのままwebページに表示しても良いけど、それでは画像が大きすぎてそれ以外のコンテンツを見るのがちょっとちょっと面倒くさい。ページ側にはサムネール的な画像を置いておき、Javascriptでウインドウをポップアップさせる手はあるけど、できたらそこでちょっと洒落たマネをしたい、なんて時にはまあ、LightwindowやLightboxの出番って事になるけど、これだと下のコンテンツを閲覧しにくくなってしまう。

と言うわけで「フローティングポップアップウインドウ」なるものの登場。ちょっと探してみたんだけど、そのものズバリ、フローティングポップアップウィンドウを簡単に実装する(CSS-EBLOG)なるものを発見。解説も丁寧だし、ページに乗っけるのにたいした手間もかからないという優れもの。さっそく使ってみたんだけど、どういうワケだかウインドウサイズをautoに設定（つーかまあ、デフォルト値ってだけなんだけど）で使ってみると、表示位置が妙に右下方向にずれて表示されてしまう。一度そのウインドウを閉じて、もう一度表示させてやると、今度は正しくウインドウの中央に表示される。あっるぇ?

どういうことなのか判らない上にこの現象、ポップアップするウインドウのタイプが画像の時にだけ起きるみたい。2回目以降は正しく表示されるって事は、最初には足りなかったデータが、一度読み込みが起きた時点で補完されたって事なんだろうなーと思い（わたしゃプログラマじゃないので、厳密な事は判りませんけど）、表示する画像のサイズを放り込んであげたらば、今度はウインドウの右端が切れちゃう。あっるぇぇぇ?

この辺で頭が完全にテンパってしまってたんだと今なら判る。指定されるべきはウインドウ全体のサイズであって、それはウインドウ右サイドの画像+メインコンテンツ+ウインドウ左サイドであって、なおかつコンテンツ部分にpadding指定があったなら、その数字も足してやらなきゃダメじゃんか、ってところに気がつくのに半日かかってしまったぞ。

右が切れた、ってところでメインが大きすぎたと思い込んでしまったのが敗因でした。この先おんなじところで躓かないように、メモっとく。