- ベストアンサー
素朴なcaptionについて質問させてください。
幾つか悩みが浮上しているのでどれか1つでもアドバイスいただけたらと思います。 よく写真やテーブルの上下に説明等のキャプションを使うのですが、毎回align属性等にてtopやbottomの指定を行っています。 質問1 これはCSSで指定を行うには何を指定してやればよいのでしょうか？？またCSSで可能でしょうか？出来れば<caption>だけで、bottomの指定を行いたいです。 質問2 そもそも、captionはw3c的に推奨要素なのでしょうか？ 質問3 写真にcaptionをつけたい場合、毎回テーブルの中に画像を入れて、captionをつけているのですが正しいでしょうか？いきなり画像だけにcaptionつけることって不可能ですよね？？ 変な質問ばかりで申し訳ないのですが、悩んでいます。 どなたかアドバイスいただけたら幸いです～！
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- cyokokichi
- ベストアンサー率21% (32/152)
- 7659
- ベストアンサー率66% (4/6)
- ttyp03
- ベストアンサー率28% (277/960)
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">といった非推奨の要素は使いたくありません。 何か良い、またはみなさんが行っていく書き方などあれば宜しくお願いいたします。
関連するQ&A
- CSSのcaption-side:・・・
続けて質問すみません。 CSSのcaption-side:なのですが、 right / left / bottom はテーブルのどこに配置されるのが正しい配置ですか？ TOP ┏━━━━━━━━━━━┓ ┃ ┃ ┃ ┃ left┃ ┃right ┃ ┃ ┃ ┃ ┗━━━━━━━━━━━┛ bottom ですか？ left TOP right ┏━━━━━━━━━━━┓ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗━━━━━━━━━━━┛ bottom ですか？
- 締切済み
- HTML
- 写真とキャプションを横並びにしたいです
テーブルは使わずにhtmlとｃｓｓで作れたらと思っています。 写真と説明を横並びにして、さらにその横に違う写真と説明のセットを並べて配置したいのです。 つまり、画像、キャプション 画像、キャプション と配置したいのですが、どうすればいいのかよく分かりません・・・。 教えていただけると大変ありがたいです。 どうぞよろしくお願いいたします。
- 締切済み
- HTML
- legendの属性alignをCSSに変更する・・・
legendの属性alignをCSSに変更する場合 調べたら text-align ではなく float で左右が配置できることがわかりましたが、top や bottom に関しては無かったので教えてください。 それと、なぜ text-align ではなく float なのでしょうか？
- 締切済み
- HTML
- 画像の下部にキャプションを入れる
現在スマホサイトを作成しています。 そこに掲載する画像の下部にキャプションを入れたいと思っています。デザインでいうと下記サイトに掲載されているようなキャプションです。 http://subculsheets.blog.fc2.com/blog-entry-19.html 上記のサイトと違う点は画像の周りに5pxの白い枠を作成したこと、画像のキャプションには半透明の黒い画像を予め作成し背景として使用していることです。 スマホサイトの場合は、縦で見る時と横で見る時で横幅が変わります。 何となくはできたのですが、現在は縦画面で見た時にキャプションが2px程右にはみ出してしまっています。横画面で見るとちゃんと収まっています。 キャプションをつける画像のサイズは統一して380px×265pxの画像を使用しています。 下記が現在のコードです。 HTML----------------------------------------------------------- <div class="photo-center2"> <img src="../img/○○.jpg"> <div class="caption-txt2">キャプションテキスト</div> </div> --------------------------------------------------------------- CSS----------------------------------------------------------- .photo-center2 img{ width:100%; max-width:380px; } .photo-center2{ position: relative; border:1px solid rgb(204, 204, 204); padding: 5px; background-color:#ffffff; margin:0 auto; margin-bottom: 15px; width:90%; max-width:380px; } .caption-txt2{ position: absolute; color: #fff; padding: 5px; font-size: 12px; bottom: 9px; background-image: url("../images/caption.png"); text-align:center; width:95%; max-width:382px; } ------------------------------------------------------ どのように修正すれば縦画面で見た時もキャプションをはみ出さずに済むでしょうか？ ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- ベストアンサー
- CSS
- Lightbox2でのキャプションについて
画像の拡大表示のために、Lightbox2を使用しております。 画像のキャプションとして、title属性内にHTMLで装飾した長い文章を入れています。 しかしLightboxのキャプションはtitle属性であるため、（当然ですが）サムネイル画像にマウスカーソルを置いたときにブラウザが表示するポップアップにおいて、キャプション用文章のHTMLタグまで表示されてしまってみっともないです。 出来ればtitle属性は本来の使い方にしておいて、Lightboxのキャプション専用の属性を新たに加える・・・というような感じにするには、どのように改造したら良いでしょうか？ ソースは以下のような感じです。 ●現状 <a href="/image/test.jpg" rel="lightbox" title="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> ●理想（こんな感じに出来たらいいなぁというイメージです） <a href="/image/test.jpg" rel="lightbox" title="テスト画像" caption="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> おそらくlightbox.jsのどこかをいじるのだと思いますが、試しに218行目の imageLink.title を imageLink.caption に書き換え、さらに223行目の anchor.title を anchor.caption に書き換えてみましたが、ダメでした。（JavaScriptの知識がゼロのため、まったく的外れなことをしているかもしれません） 他に何か良い方法はありますでしょうか？
- ベストアンサー
- JavaScript
- img の align 属性を css に変更したいが、位置がずれる
img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top 上端に合わせます。 ■middle 中央に合わせます。 ■bottom 下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。
- ベストアンサー
- HTML
- 横に並んだ画像の固まりをセンター
下記CSSでキャプション付き画像を横向きに並べて配置したのですが 横に並んだ画像の固まりをセンターにもっていくCSSがわかりません どなたか知りませんか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> <!-- div.imagebox { border: 1px dashed #0000cc; /* 1.枠線 */ background-color: #eeeeff; /* 2.背景色 */ } p.image, p.caption { text-align: center; /* 3.中央寄せ */ margin: 0px; /* 4.余白・間隔 */ } p.caption { font-size: 80%; /* 5.文字サイズ */ color: darkblue; /* 6.文字色 */ } div.imagebox { border: 1px dashed #0000cc; /* 枠線 */ background-color: #eeeeff; /* 背景色 */ width: 140px; /* 横幅 */ float: left; /* 左に配置 */ margin: 5px; /* 周囲の余白 */ } .imagebox_a { display: block; margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div class="imagebox_a"> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
- cssでターゲット指定
スタイルシートの役割を超えているような気がするので、できないとは思いますが cssでリンクのターゲット属性を指定することはできませんか そもそもターゲット属性は非推奨でしたっけ？ もし、cssで可能なら教えてください
- ベストアンサー
- HTML
- 【ＣＳＳ】floatで左右に並べた<div>を下揃えにできますか？
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、この２つのblockレベル要素は高さが違えば下部が不ぞろいになります。 これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか？ text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。
- ベストアンサー
- HTML
- HTMLのレイヤーとは？
別の質問で、レイヤーを重ねてみてはどうか、という回答を頂いたことがあります。レイヤーとは何ですか？ あるサイトで、画像の上に画像（周りを透過させたgifアニメ）を見ました。大変綺麗でした。また、その上に重ねられたgif画像は枠線を表示したテーブルの、その枠線の上まではみ出ていました。 どうやっているのだろうと思いソースを見たら <IMG SRC="上のgifアニメ" ALIGN="MIDDLE" NATURALSIZEFLAG="3"></div> <IMG SRC="下の画像" ALIGN="BOTTOM" NATURALSIZEFLAG="2"> とありました。CSSには #layer { position: absolute; の次にtop,left,width,heightvisibilityの設定がしてありました。 同じように画像を重ねる方法をタグ辞典で探したら、positionとz-indexで指定するよう書いてあり、指定する項目もよく似ていますがlayerの文字はありません。 layerとはどのようなタグでしょうか？
- ベストアンサー
- CSS
お礼
みなさん大変参考になりご意見をありがとう御座いました。 色々勉強になることばかりで大変感謝いたします。 改めてありがとう御座いました。