pタグとimgタグについて

質問

【やりたいこと】

手順1．pタグによる文章
imgタグによる解説画像

手順2．pタグによる文章
imgタグによる解説画像

つまり、各手順に対しての解説画像をはっていこうと考えています。

【タグ】
<p>手順1．「メニューを選択」→「ファイルを保存」<img src="説明画像"></p>
<p>手順2．「保存場所の選択」<img src="説明画像2"></p>

として組んでいます。

【得られる結果】
　手順1．「メニューを選択」→「ファイルを保存」　説明画像1
　手順2．「保存場所の選択」　説明画像2
と当然、横並びになります。

画像の横にテキストを配置とかできるのわかるのですが、

【求める結果】
　手順1．「メニューを選択」→「ファイルを保存」
　　　　　　説明画像1

　手順2．「保存場所の選択」
　　　　　　説明画像2

という形に持っていきたいのです。

【変更後のHTML】
　<p>手順1．「メニューを選択」→「ファイルを保存」</p>
　<p><img src="説明画像"></p>

　<p>手順2．「保存場所の選択」></p>
　<p><img src="説明画像2"></p>

と組むのがいいのでしょうか？
imgのcssのvertical-alignではできないと感じたもので…。

ご教授お願いします。

回答No.1

ORUKA1951 · ベストアンサー

手順ですから、<ol>--Ordered list( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/lists.html#edef-OL )を使うほうが良いでしょう。
注) 見やすくするため、タブは全角スペース２個に置換してあります。
<h2>ファイル操作</h2>
<ol class="procedure" id="File">
　　<li>「メニューを選択」→「ファイルを保存」
　　　　<p><img src="./images/1.jpg" width="180" height="120" alt=""></p>
　　</li>
　　<li>「保存場所の選択」
　　　　<p><img src="./images/2.jpg" width="180" height="120" alt=""></p>
　　</li>
</ol>
<h2>操作手順</h2>
<ol class="procedure" id="Make">
　　<li>「編集」→「すべて選択」を指定
　　　　<p><img src="./images/5.jpg" width="180" height="120" alt=""></p>
　　</li>
　　<li>「置換」を選択
　　　　<p><img src="./images/6.jpg" width="180" height="120" alt=""></p>
　　</li>
</ol>
のマークアップが最適でしょう。これで、機械(検索エンジンにも)にも序列リストだとわかりますし、いちいち「手順1」とか書かなくて良いです。
　スタイルシートで
ol.procedure{counter-reset: section;margin-left:2em;}
ol.procedure li{list-style:none;text-indent:-3em;}
ol.procedure li p{text-indent:0; /* text-align:center; */}
ol.procedure li:before {
content: "手順" counter(section) "：";
counter-increment: section 1;
}
とデザインしておくと、項目を増やしたり減らしたり、順番を変えてもHTMLは弄らなくてすみます。新たにol.procedureが始まると新たに番号を振ってくれます。

お礼

ありがとうございます。
目的を達成することができました。

olタグで組みなおすとすっきりしました。