- ベストアンサー
写真につけるキャプションの位置指定
旅行記（写真の掲載）を中心としたサイトを開いています。 そこでいつも苦労するのが写真につけるキャプションの位置指定です。 -------- | | | IMG | TEXT | | -------- 例えば上記のように、写真（高さにバラツキあり）の上下幅の中央右側に位置させたい場合、<table> タグを使わずにスタイルシートを利用し記述するにはどのようにしたらよいのでしょうか キャプションが1行だけなら <img src="***" align="middle"> TEXT でよいようですが、TEXT が改行したり自動改行などで複数行にまたがると２行目以降が写真の下に回りこんでしまいます。 目的 ： 一括して速やかに位置を変更できる。 また、できれば記述を簡素化したい。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちわ。 記事を拝見して、色々考えてみましたが私の知識では以下が精一杯です。。 お力になれなくてすいません。 参考程度にご覧下さい。 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;/*真ん中になるくらいの値を指定*/ } ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ こんな感じで大丈夫かと。 試してみて、不具合など報告していただけると、励みになりますのでお願いします。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ほぼ解決したような感じに見えますが、 私はテーブルを使うのが最適だと思います。 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> と、結局何重にも入れ子になってしまいますので、 テーブルを使った方が、タグ名で区別できるのですっきりすると思います。
お礼
ご回答、ありがとうございます。 知識があると、いろいろな解決方法があるものなのですね。 当方、ちまたで何かと話題になる後期高齢者ほどではないのですが、ここまで深く追求したことはなく、table-cell というようなものがあろうとは、本日までまったく知りませんでした。 実験したとこと、簡潔なフォームと実行内容の素晴らしさに感激しております。 ただ私はサイトを運営していますので、IEが更新されると直ぐに導入する方なのでまったく問題はないのですが、そのサイトがプライベートな内容なものですので、見てくれるのはブラウザーの更新などはまったく無頓着な仲間内の高齢者ばかりですので、利用できないのが残念でなりません。 いずれ、若い方にも見てもらえるような内容を立ち上げる機会がありましたら、お教えを無駄にすることなく、是非とも活用させていただきたいと考えております。 とても勉強になりました。 感謝申し上げます。
お礼
早速ご回答いただきましてありがとうございます。 ご助言に従い、下記のように記述氏し実行しましたところ、希望通りの表示が確認できました。 ただランダムな位置に写真を貼り付けるアルバムのためには少々数値の指定が微妙なのと、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>