作業的には全然”微”じゃない!

 長門さんのサイトで展示されているWWII関連アイコンを手に入れるべく、展示ページを丸ごと保存しようとしたところ、
どうやっても保存できませんでした。
 この件について調べてみると、どうも一部の無料スペースで自動挿入される広告バナーが悪さをしているらしく、Internet Explorer(以下IEと省略)では保存することができないという事実が判明しました。
長門さんのところではアイコンを圧縮書庫の形では配布していないので、展示されているアイコンを全て手に入れようとするならば、展示ページを丸ごと保存する以外に手がありません。
そういうわけで、2ndブラウザとしてIE以外のブラウザを導入することに決定。
ぱっと頭に浮かんだ"firefox"を導入しました。
ウェブページを保存するという所定の目的を達したのでめでたしめでたしと、
そのままアンインストールしようかなとも思ったんですが、
折角導入したのだからと他のページをちょいちょいと覗いてみました。


 そこで気になったのが私自身のページ『戦隊や』。
どうも他のページと比べても明らかにレイアウトが崩れ過ぎていました。
ブラウザが違えば多少は見え方が違うのは当然なんですが、あまりにも差が激しすぎました。
アイコン表示枠はズレズレだし、alt属性(代替説明文の指定)の設定内容もポップアップされないのです。
いろいろ調査するうちにスタイルシートの設定やhtmlソースの間違いがわかりました。
その間違いの修正を昨日の15:00頃から作業を始めて、全て修正し終わってgeocitiesのサーバへアップしたのが
深夜2:30……。いやはや、大変でした(泣)


今日起きてから間違い探しをして、多少間違いが出てきたのでチョコチョコ修正して任務完了。
現在は、私が確認している限りではfirefox 2.0.0.1とIE6(SP2)で私の意図したとおりに
アイコン展示ページが表示されています。おかしな箇所がありましたらご指摘をお願いします。
(ここからはどこを直したのかを書いています。ちょっと専門的になるので興味のある人だけ続きをどうぞ)


○ どこがまずかったのか
とりあえず、IEスタイルシートやhtmlソースの解釈がかなり緩いが、
 他のブラウザはIEよりは厳しく解釈しているという点

  • 画像にポップアップメッセージをつけるにはalt属性ではなく、正しくはtitle属性を使用する
    • 修正内容はポップアップさせたい文はtitle属性に、alt属性はアイコンの内容説明に特化させる、という形に
  • スタイルシートのクラスセレクタは数字ではじまる名前をつけてはならない
    • 例) 誤: TD.32 → 正: TD.i32(でもIEなら誤の例でもクラスセレクタとして機能します)
  • ブロックレベル要素の水平方向の整形設定の解釈が異なる

アイコン表示枠がfirefoxズレズレになったのは2番目の部分の記述誤りによるものでした。
PC内で修正して確認したところ、きちんと表示されました。
そういうわけで、以上の部分を現行の展示ページ全てについて修正することを決定しました。
ファイル数が半端ではない上、修正対象箇所も多い割に、効果が極めて地味なんですけどね
(しかも、IEで見た場合は見た目に全く変化がない……いや、変化したらまずいんですけど)