素朴なcaptionについて質問させてください。

質問

幾つか悩みが浮上しているのでどれか1つでもアドバイスいただけたらと思います。

よく写真やテーブルの上下に説明等のキャプションを使うのですが、毎回align属性等にてtopやbottomの指定を行っています。

質問1
これはCSSで指定を行うには何を指定してやればよいのでしょうか？？またCSSで可能でしょうか？出来れば<caption>だけで、bottomの指定を行いたいです。

質問2
そもそも、captionはw3c的に推奨要素なのでしょうか？

質問3
写真にcaptionをつけたい場合、毎回テーブルの中に画像を入れて、captionをつけているのですが正しいでしょうか？いきなり画像だけにcaptionつけることって不可能ですよね？？

変な質問ばかりで申し訳ないのですが、悩んでいます。
どなたかアドバイスいただけたら幸いです～！

回答No.4

koutarou504 · ベストアンサー

質問1 <caption align="bottom">sample</caption> を CSS で。
caption-side:bottom; という指定方法は用意されていますが、対応しているブラウザというと・・・。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/tables.html#caption-side
という事で、出来ないと思っていた方が良いかと・・・。
（#2 の方が提示の vertical-align は caption の align とは違うし・・・って少なくとも WindowsXP SP2 IE6 では実現できませんでした。）

質問2 captionはw3c的に推奨要素
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#edef-CAPTION
はい。ただし、caption は表題です。表(TABLE)の題名です。そしてあらわしたい情報が表形式の情報であるかが問題です。推奨(w3c)を意識するなら、まずその情報全体が表形式であらわす物なのかで table の使用の可否が決まり、その上でその表の題名（表題）が caption であらわせるという事です。表の内容の１つである画像の説明を caption でという事は意味的に誤りです。（技術的には可能でありますが、ここでの質問が w3c推奨云々の意味的な点なので・・・。）

質問3
技術的には実現できているのでしょうから間違いとはいいませんが、意味的には表でもないのにデザインの為に table を用いるという事で誤りです。
とはいえ、caption は table の中で各１回しか指定できません。
という事で caption の使用自体を白紙にしましょう。
table で幅の意識等は既にあるでしょうから、それを div に代えれば良いでしょう。caption に当たるのは適当に要素を(div でも可)選んで記述すれば済む事かと・・・。

最後に w3c の推奨を意識するならば、HTML の場合はデザインはあまり気にしない（CSS に任せる）という事なので、もし表題を記述するという事は top でも bottom でもブラウザまかせという感覚になりますが・・・。
実際、CSS が無効の環境もあるし意図的に閲覧者が CSS を無効にしたり・・・。

結論というかお勧め・・・。
W3C では(align属性が)非推奨ですが、現状維持で<caption align="bottom">sample</caption>が良いと思います。それか根本的にタグ（要素）の見直しか・・・。
理由はソースの現状と修正の手間と各ブラウザの対応状況からして苦労するメリットがちょっと・・・。

お礼

みなさん大変参考になりご意見をありがとう御座いました。

色々勉強になることばかりで大変感謝いたします。
改めてありがとう御座いました。

回答No.3

cyokokichi

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#edef-CAPTION
上記URLのHTML4.01仕様書邦訳では、w3c的に<caption>は、非推奨要素ではないと思われます。
但し、align属性は推奨しないとされているようです。
この要素は、http://www.w3.org/TR/html4/strict.dtdでは<table>内にのみ0回又は1回出現しなければならない要素とされています。
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
他にcaptionが出現できる要素はみあたりませんのでcaptionを出現させる場合、tableを出現させる必要があるようです。

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html
そんなことでCSS2仕様書邦訳の表についての項を読むとcaptionのCSSでの見栄えの指定方法が解ります。
ここで全てを書き尽くすことが不可能ですので参考になる章だけを上げさせて頂きます。
17.4 視覚整形モデルにおける表の扱い
17.4.1 題名の位置と端揃え
'caption-side' が使えるPC用ブラウザが有るかは疑問です。

CSS1では、表に関する定義はされていないようです。
'display' の値も block | inline | list-item | noneとなっていてtable-captionがありませんのでcaptionを特別扱いしないのではないかと思われます。
caption{display:block}
かな？
http://www.doraneko.org/webauth/css1/19961217/Overview.html
w3c的にはこんな感じだと思いますよ。

回答No.2

7659

質問１
captionのスタイルをCSSで設定することはもちろん可能です。
caption{ vertical-align : bottom;}
たとえばbottom指定ならこんな感じでしょうか。
質問2
W3CでもHTML4.0？で定義されているので推奨しないことはないのでは。
質問3
画像には直接つけることはできないですね。

回答No.1

ttyp03

captionタグはそもそもテーブルに使うものなので画像のキャプションとして使うにはどうかと思います。
今の使い方ですと結局テーブルの中に画像を入れているわけですから、行を追加してそこにキャプションを書いたらどうでしょうか？

<table>
<tr><td align="center"><img src="xxxx"></td></tr>
<tr><td align="center">キャプション名</td></tr>
</table>

もしくは div タグを使うのもいいかもしれません。

<div style="text-align:center">
<img src="xxxx"><br>
キャプション名
</div>

お礼

ありがとう御座います。
ご意見がいただけて安心いたしました。

そうですよね！画像のcaptionではないですし、必ずテーブルが必要なのはおかしいですよね。

しかしながら、<td align="center">といった非推奨の要素は使いたくありません。

何か良い、またはみなさんが行っていく書き方などあれば宜しくお願いいたします。