TRASH-NEWS TRASH-NEWS.β2に向けての準備:その2

大した価値もないのに前記事より続きます。

Photoshopで作った素材を手動で切り分けて透過pngで保存していきます。クチを酸っぱくして自分に言い聞かせ続けているように、IE6は切り捨てていく覚悟なのでこれでもかとαチャンネルを酷使していきます。2年くらい前からの悲願なのだもの……。

こんな具合に。

中途半端なところで切れているのはそこから下をまだ作っていないため。丸1日以上かけてこんな体たらくですよ。ごみ箱に横たわる死屍累々のファイルがうらめしい。

横幅を固定したのでずいぶんすっきりしたレイアウトにすることができました。divの入れ子も減らせたためcssの容量が半減しそうな勢いです。ただそのかわり調子に乗ってすべてのグラデーションを透過pngにしたら予想以上にスクロールがひっかかって精神衛生に最悪です。どこまで普通のpngにするか、どこまで固定幅のバリエーションを増やすか、IE6は本当に無視してよいのか、そのあたりが焦点になってきます。

そういえばいまのβ版でもビミョウに再現しているVistaっぽいウインドウの閉じるボタン一式セット(3つ並んでいるヤツ)。これまではposition:absoluteで絶対配置できていたのですが、それも可変幅だからこその手法。ブラウザの描画領域を広げようが縮めようが、ウィンドウ(もどき)の右上の位置は常に変わらなかったため、right:12pxというようにできたのです。しかしこれを固定幅にしてしまうと、描画領域の位置と相対的にウインドウ(もどき)も動いてしまいます。たとえば1920pxの描画領域の中で1002pxのウインドウ(もどき)を表示させると、ボタン一式セットは描画領域の左端から960+400(=1360)px程度のところに配置するとちょうどいい感じになります。しかし1280pxの描画領域の場合だと640+400(=1040)pxのところがちょうど良いポイントになるので……描画領域にあわせた調整は不可能。

position:relativeをはさんだりfloat:rightで無理矢理右詰めにしたり、いろいろと試した結果IE7とOperaでそれぞれ理想どおりの配置になるパターンを見つけたもののFirefoxでは見つけ出せず断念。思いなおしてみれば、そもそもボタンを押したときの反応はJavaScriptで作っているのだし、配置もJavaScriptで描画領域を割り出して計算すればいいのだという発想は、あったものの負けた感じがするので最終手段としてとっておきます。

インデックスページだけ整えようがほかのページも大量にあるし、サーバーへの負荷も考えるとMovableTypeに極力データベースを動かさせないようなテンプレートの作り方を考えなければならないし。IE7の強制配布がはじまったその日がβ2の始動日だとかなんとか書いたものの、あと1ヶ月でどうにかなるかわからなくなってきました。TRASH-NEWSの明日はどっちでしょうか。