番号付きリストで文章と画像を含めて表示する場合のマークアップ

[新着] Webテンプレートを仮オープンしました

0   名前： フルカワ ： 2007/03/26（月） 09:59  ID:zIZFHia9 sub-bK
こんにちわフルカワといいます。

番号付きリストで、文章と画像を含めて表示する場合の
マークアップについて知りたいです。

現在は
<ol>
<li>操作の説明の文章など<br>
<img src="操作の説明の画像.gif" width="ほにゃ" height="ほにゃ" alt=""></li>
<li>同じように操作の説明の文章など<br>
<img src="操作の説明の画像.gif" width="ほにゃ" height="ほにゃ" alt=""></li>
〜
〜
<li>同じように操作の説明の文章など。操作説明画像なしの時もある</li>
</ol>
文章を入力した後<br>で改行を入れて、文章の下に画像が来るようにしています。

マークアップはこれで正しいのでしょうか？
HTML-lintでは特にエラーも出ませんでしたがこれでいいのか心配です。

どなたかアドバイス＆他にもこんな方法があるよ等
ありましたら、よろしくお願いします。
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/03/26（月） 09:59  ［URL］  ID:JQXB.0.H sub-gm
alt属性が空なのであれば、私でも同じことをすると思います。

br要素は止めて、説明用画像を display: block にした方が楽だとは思いますが。
2   名前： 匿名 ： 2007/03/26（月） 09:59  ID:6fAvcTJO sub-kJ
<ol>
  <li>
    <p><img src="操作の説明の画像.gif" alt="【ポインタをボタンに合わせる】" /></p>
    <p>操作の説明の文章など。</p>
  </li>
  <li>
    <p><img src="操作の説明の画像.gif" alt="【クリックするとウィンドウが開く】" /></p>
    <p>同じように操作の説明の文章など。</p>
  </li>
  <li>
    <p>同じように操作の説明の文章など。操作説明画像なしの時もある。</p>
  </li>
</ol>

私なら、img 要素を先に持ってくる。そうすれば、alt 属性が小見出しっぽくなる（それなら dl 要素の方が適切という意見もあろうが、img 要素なしの場合に、対応する dt 要素のない dd 要素が現れることになるので、それは避けたい）。

スタイルとしては、画像のサイズにもよるが、img 要素を float させて、文章が画像を囲むような形にすると思う。個人的に、その方が画像と説明の関係が分かりやすい。いざとなったら ol { display: table; }、li { display: table-row; }、p { display: table-cell; } にもできるし。
3   名前： フルカワ ： 2007/03/26（月） 09:59  ID:zIZFHia9 sub-bK
そうだ！何も<br>を使わなくても
段落なんだから<p>で囲えばよかったのです
説明用画像を display: block する方法も、思いつきませんでした

カヅサツ ◆さん、匿名さんアドバイスありがとうございます＾＾
一覧へ戻る