キャプション

咲き乱れるコスモスと天売島
咲き乱れるコスモス
水平線に霞むのは天売島
北海道苫前町
1997年8月
Minolta α-507Si
Sigma 24-70mm
Fuji G400
Enable TTL

写真には付き物のキャプションの書き方を一新しました。構造的な記述としたので、スタイルシートでコントロールすることができるようになりました。とりあえずはアイコンを表示するようにしてみましたが、いかがでしょう。画面がいささかうるさくなった感じもします。アイコンの持つ力がこれほど大きいとは、やってみるまで分かりませんでした。

アイコンそのものはここら辺から調達したり、どうにも見当たらないものは自作したりしてます。感謝のリンクを貼っておきます。

1キロバイトの素材屋さん
1キロバイト以下のとっても軽い無料ホームページ素材集です。
フランクなソザイ
ポップでシンプルな素材屋さんです。

撮影地のアイコンとか、暫定的に使っているものもあります。よさげなのを見付けしだい入れ替えます。

ブラウザによる違いが甚だしい

61℃ の訪問者でも圧倒的多数な IE ユーザには、何の話だかワケワカですよね。ブラウザ別の描画の違いをご覧ください。

Internet Explorer 6.0 SP2 の描画 | Firefox 1.07 の描画 | Opera 8.5 の描画 | Netscape Navigator 4.8 の描画
左から IE 6 SP2Firefox 1.07Opera 8.5NN 4.8 によるキャプション部分の描画

今回の一連のリニューアルの中で、ブラウザによる差が典型的に現れたのがここでした。NN 4.8 が論外なのはともかく、IE は擬似クラス "before" を解釈しないので、アイコンが表示されません。満員御礼IE を「もはやモダンブラウザとは言えません」と評したのは、このためです。Firefox も画像との間隔が大きく空いてしまう(注)のと、枠線に点線を指定したのが反映されていません。合格点を与えられるのは、このケースでは Opera だけです。

Firefox を基準に画像との間隔を設定すると、IE では文字が画像に隠れて見えなくなり、Opera では文字が画像を隠してしまいます。

スタイルシートとの格闘は、妥協の連続だったりするのが実情です。今回のキャプションに関しては、少数派の利を優先させてください。IE でアイコンが表示されないのは、 Infomation に書いた通りに "仕様" とさせていただきます。IE 7 の登場を、首を長くして待ちましょう(笑)。

不可分な写真とキャプション


<img src="image.jpg" alt="代替テキスト" width="幅" height="高さ">
  <subject>題名</subject>
  <caption>キャプション</caption>
  <location>撮影場所</location>
  <date>yyyy-mm-dd</date>
  <camera>カメラ</camera>
  <lens>レンズ</lens>
  <media>メディア</media>
  <iso>感度</iso>
  <av>絞り値</av>
  <tv>シャッタースピード</tv>
  <ev>露出補正値</ev>
  <flash>フラッシュ</flash>
  <color space>色空間</color space>
  <author>作者</author>
  <copy>著作権者</copy>
  <comment>その他</comment>
</img>

細部はともかくとしても、html でもこんな感じで簡単に記述できるようにあらかじめ定義されていたなら、キャプションを表現する度にこんなに苦労しなくて済んだのに〜とか思ってしまいます。html 版の Exif みたいな感じですかね。xml を使って自分で定義しろとか、そういう話ではありません。写真とキャプションは不可分な存在ですから。

満員御礼
2005-09-30
再構築
2005-09-26
レガシーブラウザ
2005-09-20
模様替え
2005-09-16, 17