2007年1月13日の投稿

2007-01-13
晴れ

画像に枠を付けました

ゆりこ による 01:30:19 の投稿
カテゴリー: 更新履歴

Yuriko.Net サムネール画像

当サイトの画像表示を、リアルタイム旅行レポートと同様に、枠を付けてカッコイイ見栄えにしました。都合により Windows 環境でのテストができなかったので、不具合があれば連絡してくらはい。

紙焼きした写真のような見た目になって、なかなかヨサゲです。スタイルシートで img 要素に対して padding で余白を付け、border で灰色の枠線を付け、background を白にしたのですが、HTML側にも修正が入っています。本文を写真に廻り込ませるために、写真の横幅と同じピクセル数を HTML 側から style=”width:???px” と指定していたため、枠をつけたらそのサイズ分 (8ピクセル) だけ width 指定を変更してやらないといけなくなったからです。

何かスクリプトを使えば 8 ピクセル増加数値に変更するというのは可能ですが、今回はズボラして width 指定してる style 属性自体を削除することにしました。この style 属性は、Mac:IE で廻り込みを正しく見せるために必要だったのですが、それ以外のブラウザーではなくても問題ないからです。CSS の仕様としては、float される要素は横幅が指定されないといけないことになっているので、style 属性を付けるべきですが、主要なブラウザーでは省略しても問題ないので、この際削除してしまうことにしました;-) 何か問題が見つかれば、復活させるかもしれませんが。

[追記] Windows IE では画像の枠は表示されるものの、その内側にある白い余白が見えていないようです。旅行記の方では Windows IE でも余白が見えていて、スタイルシートの記述は同じようにしているつもりなんですが……。どこか記述ミスをしているような気がするので、詳しく調査してみます。ということで、Windows IE での確認をサボると不具合が見付かってしまいますね〜〜。

[さらに追記] Windows IE6 に限って期待通り見えるように修正しました。具体的にはテンプレート1行目の XML 宣言を除去して「標準準拠モード」でレンダリングさせるようにしました。IE6 には不可解なバグがあり、XHTML 文書で XML 宣言をつけてしまうと「互換モード」でレンダリングしてしまうのです。IE 5.5 以前には「標準準拠モード」が存在しないため、期待通りの描画は困難です。