写真の下の複数行説明文

質問

写真の説明文をその写真の下に掲載したいのですが、
<Table>を使用せずに、各画像の下に幅に合わせて個別の複数行の文章をつけることできないでしょうか?

回答No.4

goldfox

ブロック要素に入れてブロック要素の幅を画像と同じにすればいいです。

<div style="width:140px;">
<img src="" alt="" style="width:140px; height:40px;">
<p>ここに説明文を書く。</p>
</div>

横に幾つか並べたいなら、divにfloatを利用します。
divはNo.3の方が言うように、文法次第でちゃんと意味のある要素に変えたほうがいいでしょう。

お礼

goldfoxさん、コメントありがとうございました。
質問が正確でなかったので、質問をやり直しします。

回答No.3

ORUKA1951

CSSでデザインすることになりますが、そのためには
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より

で、まずきちんとマークアップしましょう。
　あなたの写真と説明は、あなたの考え方次第でいくつかのマークアップの方法が考えられます。
例1(リストでマークアップする。)
<ol>
　<li><h3>Cattleya</h3>
　　<ul>
　　　<li class="photo"><img src="[URL]" width="320" height="240" alt="Cattleya1"></li>
　　　<li class="data">
　　　　<ul>
　　　　　　<li class="Camera">カメラ・レンズ：***</li>
　　　　　　<li class="filme">フィルム：</li>
　　　　　　<li class="date">撮影日時：</li>
　　　　　　<li class="point">撮影場所：</li>
　　　　</ul>
　　　</li>
　　　<li class="comment">花の女王といわれる蘭の代表的品種</li>
　</ul>
</ol>

　このように、マークアップさえ、きちんとできれば、あとは写真とメッセージを、表示するしないを含めて自由に配置できます。
デザイン例
　写真のサイズに合わせて、２mm程度の白い枠をつける。
　その枠の右と下には、濃い影をつけて写真を浮かせてみせる。
　タイトルと撮影データは表示しない
　コメントは写真の幅に合わせて表示する。段落最初の文字は１文字字下げする。
　写真は、画面の幅に応じて適当な枚数を表示する。
　　　画面が狭けりゃ１,２枚だけど、ワイドディスプレイだと５，６枚が並ぶ
　背景は黒っぽい画像にして、固定する。
・・・・・・・・・・・・
　なんて、比較的簡単に出来ます。

なにはともあれ、適切なHTMLを書くこと。その後で、それを「どのように配置したいか」を質問されたらよいと思います。

お礼

ORUKA1951さん、コメントありがとうございました。
質問が正確でなかったので、質問をやり直しします。

回答No.2

noname#98692

例えば以下のような html だとして

<div class="photo-frame">
<p><img src="myphoto.jpg" width="200" height="100" alt="わんことにゃんこ" /></p>
<p>
わんわんわん にゃんにゃん わんわんわん にゃんにゃん わんわんわん にゃんにゃん
わんわんわん にゃんにゃん わんわんわん にゃんにゃん わんわんわん にゃんにゃん
わんわんわん にゃんにゃん わんわんわん にゃんにゃん わんわんわん にゃんにゃん
</p>
</div>

わんわんわん にゃんにゃん を自動的に写真の幅におりかえすのは、CSS だけでやる方法は自分は思いつきませんでした。

どうしても自動的にやるなら、javascript で・・・

<script type="text/javascript">
var divlist = document.getElementsByTagName('DIV');
for (var i = 0; i < divlist.length; i++){
if (divlist[i].className == 'photo-frame') {
divlist[i].style.width = divlist[i].getElementsByTagName('IMG')[0].width;
}
}
</script>

こんな感じのを </body> の直前にかいておけばいけるかと。

お礼

ephysさん、コメントありがとうございました。
私の質問が正確でなかったので、質問をやり直します。

回答No.1

rukuku

はじめまして

質問文からだけでは正確なイメージをつかめませんが、以下のように
<DIV>でくくったらできると思います

<DIV>
<IMG　…></IMG>
<P>説明</P>
</DIV>

この場合、DIVに幅を指定しなければ、自動的に写真の幅になります。

http://css.uka-p.com/
http://www.2step-css.com/

お礼

rukukuさん、コメントありがとうございました。
私の質問が正確でなかったので、質問をやり直します。