• ベストアンサー

写真につけるキャプションの位置指定

旅行記（写真の掲載）を中心としたサイトを開いています。 そこでいつも苦労するのが写真につけるキャプションの位置指定です。 　　-------- 　　|　　　　　　| 　　|　　IMG　 |　TEXT 　　|　　　　　　| 　　-------- 例えば上記のように、写真（高さにバラツキあり）の上下幅の中央右側に位置させたい場合、<table> タグを使わずにスタイルシートを利用し記述するにはどのようにしたらよいのでしょうか キャプションが1行だけなら 　<img src="***" align="middle"> 　TEXT 　　でよいようですが、TEXT が改行したり自動改行などで複数行にまたがると２行目以降が写真の下に回りこんでしまいます。 目的 ： 　一括して速やかに位置を変更できる。 　また、できれば記述を簡素化したい。

  • HTML
  • 回答数2
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • edaj
  • ベストアンサー率52% (10/19)
回答No.1

こんにちわ。 記事を拝見して、色々考えてみましたが私の知識では以下が精一杯です。。 お力になれなくてすいません。 参考程度にご覧下さい。 html内記述 ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ <body> 　<div class="box"> 　　<div class="photo"> 　　　<img src="★★.jpg" width="○○" height="○○" /> 　　</div> 　　<div class="text">ここに回り込ませたい文字を入力</div> 　</div> 　<div style="clear: both;"></div> その他文字、文書など・・・（ここの文字は回り込みしません） </body> ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ css内記述 ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ .box { width: ○○px;/*任意の大きさを指定*/ } .photo { float: left; width: ○○%;/*1～99の任意の大きさを指定*/ } .text { float: right; width: ○○%;/*1～99の任意の大きさを指定*/ text-align: left; margin-top: ○○px;/*真ん中になるくらいの値を指定*/ } ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ こんな感じで大丈夫かと。 試してみて、不具合など報告していただけると、励みになりますのでお願いします。

le175dlh
質問者

お礼

早速ご回答いただきましてありがとうございます。　 ご助言に従い、下記のように記述氏し実行しましたところ、希望通りの表示が確認できました。　ただランダムな位置に写真を貼り付けるアルバムのためには少々数値の指定が微妙なのと、1枚1枚.photoと.textの数値を指定しなければならず、目的からははずれ、解決策が見つかるまで、<TABLE>タグを利用することにします。 それにしても、float までは考えられたのですが、右に流したいテキストをブロックで囲い右指定するまでは考えもつきませんでした。　とても参考になりました。　これはこれで、何かの折に利用させていただきたいと考えております。　本当にありがとうございました。　お礼申し上げます。 <style type="text/css"> <!-- .box { width:600px; } /*任意の大きさを指定*/ .photo{ float:left; width:34%; } /*1～99の任意の大きさを指定*/ .text { float:right; width:63%; /*1～99の任意の大きさを指定*/ text-align:left; margin-top:40px; } /*真ん中になるくらいの値を指定*/ --> </style> 　<div class="box box1"> 　　<img src="" width=200 height=150 border=3 align="left"> 　　<div class="text box3">ここに回り込ませたい文字を入力<br>任意の大きさを指定<br>1～99の任意の大きさを指定<br>真ん中になるくらいの値を指定</div> 　<div style="clear:both; height:7px" class="box4"></div> その他文字、文書など・・・（ここの文字は回り込みしません） その他文字、文書など・・・（ここの文字は回り込みしません） その他文字、文書など・・・（ここの文字は回り込みしません） その他文字、文書など・・・（ここの文字は回り込みしません） その他文字、文書など・・・（ここの文字は回り込みしません） 　</div> <style type="text/css"> <!--/* 調整確認のため */ .box1 { border:2px solid magenta; } .box2 { background-color:lime; } .box3 { border:2px solid blue; } .box4 { border:2px solid green; } img { background-color:cyan; } --> </style>

その他の回答 (1)

回答No.2

ほぼ解決したような感じに見えますが、 私はテーブルを使うのが最適だと思います。 div{ display:table-cell } というのがありますので、これをつかえばvertical-align:middleも有効になりますが、 table-cellに対応したブラウザが多くないです。 （確か、シェア最大のIE7以前や、Fx2.0以前、Sf2.0以前などが対応していなかったと思います。 最新版への移行が進んで未対応ブラウザを無視できるほどになれば良いと思いますけどね。) > 目的 ： > 　一括して速やかに位置を変更できる。 > 　また、できれば記述を簡素化したい。 テーブルを使うと、左右の入れ替えは基本的には出来ないと思います。 スタイルシートのfloatやpositionを駆使すれば可能かもしれませんが、ブラウザが対応しているかどうかが不安ですね。 この並べ方にするには、 <tbody>または<table>に相当する<div> <tr>に相当する<div> <td>または<th>に相当する<div>または<p> と、結局何重にも入れ子になってしまいますので、 テーブルを使った方が、タグ名で区別できるのですっきりすると思います。

le175dlh
質問者

お礼

ご回答、ありがとうございます。　知識があると、いろいろな解決方法があるものなのですね。　当方、ちまたで何かと話題になる後期高齢者ほどではないのですが、ここまで深く追求したことはなく、table-cell というようなものがあろうとは、本日までまったく知りませんでした。 実験したとこと、簡潔なフォームと実行内容の素晴らしさに感激しております。　ただ私はサイトを運営していますので、IEが更新されると直ぐに導入する方なのでまったく問題はないのですが、そのサイトがプライベートな内容なものですので、見てくれるのはブラウザーの更新などはまったく無頓着な仲間内の高齢者ばかりですので、利用できないのが残念でなりません。　いずれ、若い方にも見てもらえるような内容を立ち上げる機会がありましたら、お教えを無駄にすることなく、是非とも活用させていただきたいと考えております。 とても勉強になりました。　感謝申し上げます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 画像の位置を指定するCSS

    画像の位置を指定するCSS 文字の前にポイント画像を<img src="~.gif" alt="" />のタグで置きたいんですが、ずれて文字の上のほうに表示されてしまいます。 すごく簡単に文字の中央に表示されるように指定できるCSSのタグがありますがどんな記述だったか忘れました。 検索しても出てこないので困ってます。 どなたか教えてください。 ちなみに background: url(hogehoge.gif) no-repeat 10px 0.5em;list-style: none;} これではないです。 もっと簡単でtext-alignのようなかんじの記述です。でもtext-alignではないです。 middleみたいな記述があった記憶があるのですが確かかどうか自信ないです。

    • ベストアンサー
    • HTML
  • 画像の高さと文字位置

    方法として思いつかないため、良いアイディアか方法があればご教授ください。ブラウザや環境により見え方がまちまちなのも承知の上です。 現在以下のような感じに文字と画像を組んでいるのですが、 <table> <tr><td valign="middle"><img src="**.gif" width="10" height="10"></td> <td valign="middle">てきすとてきすとてきすとてきすとてきすとてきすと</td> </tr></table> てきすとが２行になった時も画像が当然ながら高さの中央に配置されるため不自然になっています。できれば２行目が存在することになっても画像の高さをテキスト１行分の中央におきたいのですが何か方法ありませんでしょうか。 スタイルシート記述でもタグでも構いません。

    • ベストアンサー
    • HTML
  • 同一セルでの垂直方向の位置揃えについて

    同一セルでの垂直方向の位置揃えについて よろしくお願いいたします。 tableタグを使用して表を作成しております。 最後の列のセルだけテキストとimgを配置したいのですが、 その際、テキストは必ずセル内中央に、imgは必ずセル内下部に配置するような 事は可能でしょうか？ 行によって高さが変わるのでmargin,padding等ではセル内の特定の位置に表示できず、 vertical-alignをセルに適用すればどちらかは出来るのですが、 同一セル内で vertical-align:middle; vertical-align:botom; のような事が同時に実現出来る指定などあるでしょうか？ 下記のような感じなんですが、 <table> <tr> 　<td>このセルは高さが100px</td> 　<td>テキストは中央にimgは下部に配置したいセル 　　　<a href="a.html"><img src="a.jpg" height="10" /></a> 　</td> </tr> <tr> 　<td>このセルは高さが200px</td> 　<td>テキストは中央にimgは下部に配置したいセル 　　　<a href="b.html"><img src="a.jpg" height="10" /></a> 　</td> </tr> </table> どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • DIVボックス内でのCSSを使用した縦位置指定方法

    CSSにてheight、weightを指定したDIVタグの中にテキストを記述し、縦位置の中央揃えを行いたいのですが、方法がわかりません。 "vertical-align:middle;"などを指定しましたが、適用されませんでした。 スタイルに関することは全てCSSで行いたいので、TABLEタグなどでvalignを指定する方法は取りたくありません。 何かいい方法をご存知の方がいらっしゃいましたら、ご回答をよろしくお願いいたします。

  • 画像をボックスの中心に位置付けたい…

    ネットで調べていくつかのパターンを試してみましたが、 vertical-align:middle;が全然かかりません。。。 同じボックスをいくつも作ってその中に様々なサイズの画像を配置したいのです。 .bb_box{ width:210px; height:90px; display:table-cell; text-align:center; vertical-align:middle; layout-grid-line:90px; } .b_img{ vertical-align:middle; } <div class="bb_box"><img src="○○○" alt="○○" width="91" height="33" border="0" class="b_img" /></div> 間違い箇所がたくさんあるかと思いますがご教示ください。よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 画像にキャプションを付け画像の右端で合わせるには

    画像にキャプションを付け、画像の右端に揃えたく以下のようなソースを書きました。 ------------ <div style="width:120px"> 　　<div style="text-align:right">表題</div> 　　<div><img src="画像.gif" width=120 height=80></div> </div> ------------ これだとimgとdivに同じ値を2度書かなくてはならない div側に画像の幅を記述する事なく同じ事を可能にするcssの記述方法はありませんか？ ------------ □□□□表題□□□□□□ ■■■■■■□□□□□□ ■■画像■■□□□□□□ ■■■■■■□□□□□□ ■■■■■■□□□□□□ ------------ □＝何もない領域 ■＝画像の描画領域

  • 画像の横にテキストを縦方向中央に配置したい

    画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。 このHTNLの記述では無理でしょうか？

    • ベストアンサー
    • CSS
  • 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
  • 画像の高さを指定するタグについて

    （画像）ああああああああああああああ ああああああああああああ 上のように文章の頭に小さな画像を貼りたいのですが <img src="http://xxxx.gif" align="middle" ・・・ と、「align=center」または「align=middle」とすると、IEでは文字の真ん中にきても、Firefoxだと下に来てしまいます。 Firefoxでも真ん中に表示させたいのですが、cssでなく、htmlタグでこれを解消する方法はありますでしょうか。

    • ベストアンサー
    • HTML
  • 写真の下に説明文

    こんにちは。 今アルバムのページを作っています。 右側に縮小した写真を縦に並べ、その写真をクリックすると画面中央に拡大されて映るというものです。 拡大された時、写真の簡単な説明文を写真の下に表示させたいんですが、やり方がわかりません。検索してみたんですが、それらしき物が見つからずこちらに参りました。 だいぶ略してますが、下記のようなソースを使って作りますよね？これで、中央に表示させるまでは出来ました。後は各写真の説明文の表示だけなんです。 <script type="text/javascript"> <!-- var img01 = "../photoothers/stamp.jpg"; function startimg(I){ 　document.image.src=I; 　} //--> </script> ＝中略＝ <table> <tr> <td align=center> <table border =1> </td> </tr> <tr> <td align=center> <img src="../gif/●.jpg" name="image"> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/●.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する