近頃の、とあるR。

さいたまに越して丸３年。
この辺りは、キンモクセイが多く風が香ります。

久々にタイトル画像も変更。

今年、2件ほどギャラリーサイトをコーディングしました。
JSでゴリゴリと動かす感じ物でしたが、その際何気にハマったのが表題の件。
横スクロールさせる上で、まず、横一列に並べなくてはなりません。

改行させない

サンプルはこちら。
まずは、inlineで並べた要素を改行させない命令が肝。

#thumbnails {
	white-space: nowrap;
}

でもこのままでは余白がグチャグチャなので、それらを整える必要があります。

整える

#thumbnails {
	display:block;
	margin:0;
	padding:0;
	font-size:9px;
	font-family:sans-serif;
	white-space: nowrap;
}
#thumbnails img {
	margin:0;
	padding:0;
	border:0;
}
#thumbnails a {
	display:inline;
	margin:0 -2px 0 0;
	padding:0;
	border:0;
}

我ながら強引(ノ∀`)
inlineで何となく開く要素間マージンをフォント指定で調整し、その後マイナスマージンで詰めています。
このケースの場合、IE6～8、FF3.5、Chrome3.0、Safari4.0.2、mac Sarfari4.0.3、mac FF3.5 での横マージンが同じになりますが、フォントファミリー、フォントサイズ指定によって、ズレますOrz
恐るべしinline。
素直にtableを使うべきか。

最大化だって!?

コンテンツ側でブラウザサイズを変えるなんてとんでもない！と思っておりますが、
希に、ブラウザサイズを変える仕様を求められる事があります。
個人的な信念がどうあれ、仕様がないケースも(ノ∀`) ﾀﾞｼﾞｬﾚ

タグブラウザ時代

window.resizeTo(screen.width,screen.height);
window.moveTo(0,0)
コードとしては↑な感じですが、これが近頃鬼門。ブラウザのタブ化と共に、挙動が結構変わってます。

Firefox

タブが２つ以上ある状態でブラウザサイズが変わるのはFirefoxくらいです。

IE8,Safari

IE8やSafariは、タブが１つの状態もしくはスクリプトから開いた新窓ならリサイズされます。
ただし、IE8の場合はリサイズ結果は必ずしもフルスクリーンとは限らず、その挙動の差異もいまいち原因不明。

その他

Chromeは、スクリプトから開いた新窓ならリサイズされますが、手動で開いた窓はリサイズ無効。
Operaに至っては、MDI(ノ∀`)

結論

全画面化が強く求められるコンテンツはflash化が良さそうです。
その他はほどほどの対応が現実的でしょうか。

半透明のナビゲーションをホワホワさせようとして失敗の巻
$(“#sample”).fadeIn(“slow”); 等、にて透過PNGを扱うと、
IE（６も７も８も）では透過部分が黒く崩壊(ノ∀`) おのれIE