掲示板/スタイルシート質問板/過去ログ/一覧/ 画像にキャプションを入れたい

0 名前：ねね： 2006/03/17 20:41: ページ内に配置する画像の下に、写真の説明文（キャプション）を
入れたいのですが、これは<img>タグにスタイルを適用することで
実現可能なのでしょうか？

教えていただけると助かります。

1 名前： とおりすがり ： 2006/03/17 20:41: <img src="" alt=""> キャプションでもよいのでは？
><img>タグにスタイルを適用する
どんなスタイルを適用するつもりなのでしょうか？スタイルはそう言う事をするものではないと思いましたが。

2 名前： Newのり太 ： 2006/03/17 20:41: <dl>
<dt><img src="image.jpg" alt="代替テキスト">
<dd>説明文
</dl>

なんてのもアリかもしれない。。

3 名前： Pid ： 2006/03/17 20:41: <img src="sample.jpg" alt="サンプル">

img:after {
display: block;
content: "(" counter(caption) "). " attr(alt);
counter-increment: caption;
}

というのを思い付いてみました。

4 名前：ねね： 2006/03/17 20:41: 情報ありがとうございました。

Pid様にお伺いします。

img:after {
display: block;
content: "(" counter(caption) "). " attr(alt);
counter-increment: caption;
}

教えていただいた、上のスタイルを外部スタイルシートに記述したとします。
htmlファイル上で、<img>タグで写真を配置した後、
キャプションを書き込むには、何のタグを使うのでしょうか？

上記、コードは、とても高度で
もう少しご説明いただけると、とても助かります。
よろしくお願いします。

5 名前：ねね： 2006/03/17 20:41: Newのり太様

教えていただいたタグ
にスタイルを適用して、よい感じでキャプションを入れられました。
ありがとうございます。
もしご存知でしたら、一点お聞きしたいのですが、
<dl>タグは、W3C(?)では、今後どのように扱われる可能性がある
タグなのでしょうか？
これから数年の間は、問題なく使用できる可能性が高いのであれば
よいのですが。

おしえていただいたタグ
↓
<dl>
<dt><img src="image.jpg" alt="代替テキスト">
<dd>説明文
</dl>

6 名前： Pid ： 2006/03/17 20:41: >>4
img:after { /* img 要素のすぐ後ろに */
display: block; /* ブロックボックスを作成して */
content: "(" counter(caption) "). " attr(alt); /* 「(カウンタ). alt 属性値」の書式で表示し */
counter-increment: caption; /* カウンタを 1 進める */
}

つまり，


<img src="photo1.png" alt="出発前夜。">
<img src="photo2.png" alt="いよいよ出発。">


という文書は

[画像]
(1). 出発前夜。
[画像]
(2). いよいよ出発。

と表示されることが期待されます。

とは言え，実はカウンタに対応しているブラウザはごく僅かですし，WinIE6 も :after と content に対応していませんので，まだ現実的な方策とは言えません (^^;)。とおりすがりさんやNewのり太さんの方法が確実でしょうね。

7 名前：ねね： 2006/03/17 20:41: Pid様

ありがとうございました。
参考にさせていただきます。

8 名前： Chip ： 2006/03/17 20:41: >6
実際にどうなるかわかりませんが、
それだと画像が表示されない環境では同じテキストが二回続く事になりませんかね？

9 名前： Pid ： 2006/03/17 20:41: >>8
仰る通りです…orz。attr(alt) よりは attr(title) の方が，キャプションとしては良かったかなあと反省。

img:after {
content: attr(title);
}

だけならば，Gekco，Safari，Opera で対応していたと思います。

10 名前：ねね： 2006/03/17 20:41: みなさん、情報ありがとうございます。

Pic様の情報は、私にはちょっと高度だったので

Newのり太さんに、いただいた以下のHTMLを使って
写真にキャプションをつけてみました。

<dl>
<dt><img src="image.jpg" alt="代替テキスト">
<dd>キャプション
</dl>

ページには、
テキスト本文(を使用）が
書かれていて、本文の中に
写真が埋め込まれています。（float:left)

下記URLに、ファイルをアップしております。
http://thai777.web.fc2.com/test2.html

本文中（タグの間に）に、複数の写真を配置したいのですが、
タグの間に、<dl>タグで写真を入れてしまうと
</dl>以下の本文に、に指定したスタイルが、
適用されなくなってしまいます。

</dl>以下、の本文にも同じようにスタイルを適用させるには
どのようにすればよいでしょうか？

ちなみに『タグの間に、<dl>を入れなければ良いのかな』と考えて
本文を複数に分割して、それぞれをタグで託って
間に<dl>タグを入れてみましたが、
この場合、にはスタイルが適用され、写真も右側に
配置され、本文は写真の左側にきれいに回り込むのですが、
タグで区切った位置で、本文が切れてしまい
文章が途切れ途切れになってしまいました。

http://thai777.web.fc2.com/test2.html