pタグとimgタグで文章と画像を組み合わせる方法

このQ&Aのポイント
  • pタグとimgタグを使用して、文章と画像を組み合わせる方法について解説します。
  • 手順1では、「メニューを選択」→「ファイルを保存」という操作を行います。その際に、説明画像1を表示します。
  • 手順2では、「保存場所の選択」という操作を行います。その際に、説明画像2を表示します。
回答を見る
  • ベストアンサー

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ではできないと感じたもので…。 ご教授お願いします。

  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

 手順ですから、<ol>--Ordered list( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/lists.html#edef-OL )を使うほうが良いでしょう。 注) 見やすくするため、タブは全角スペース2個に置換してあります。 <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が始まると新たに番号を振ってくれます。

ShiftTail
質問者

お礼

ありがとうございます。 目的を達成することができました。 olタグで組みなおすとすっきりしました。

関連するQ&A

  • imgタグをそのまま使うことは正しいの?

    <h2>hogehogehoge</h2> <p>hogehogehogehogehogehogehoge</p> <img src="images/hoge.gif" alt"hoge" /> これって正しいですか? <h2>はタイトル <p>は段落(文章?) <img>は???? 画像? もしかして正確にはimgタグも<p>とかで囲わなければいけないのか? 教えてください。。。

    • ベストアンサー
    • HTML
  • タグの組み方について

    以下ページ構成があります。 【ページ構成1】 <h2>目的:ファイルの保存</h2> <dl> <!--このページで何をするのかの説明--> <dt>ファイルの保存手順を解説します。</dt> <!--このページで何をするのかの全体図--> <dd><a href="img="001.png"><img="t001.png" alt="全体図画像"></a></dd> </dl> <H3>セクション1.ファイルの保存ウィンドウ呼び出し</H3> <ol> <li>手順1:ファイルメニューを選択します</li> <p><a href="img="002.png"><img="t002.png" alt="手順画像"></a></p> <li>手順2:~~</li> <p>手順2画像</p> </li> <ol> <H3>セクション2.ファイルの保存場所の選択</H3> <ol> ~上記タグ構成と同じため省略~ <ol> 【質問】 H2がページテーマで、H3からH2の内容を満たす手順を組んでおります。 h2の部分なんですが、 dlタグで組むのは不自然でしょうか? H2・・・ページの目的 dt・・・ページ目的にあたりすることを記述 dd・・・ページ目的の概念図(こんなことしますの全体プリントスクリーン画像) 全てのページに、目的概念図があるわけではないので、その時はddは削除しています。 dlは定義済みリストということですが、 私のようなH2の部分でdlを使うのはまずいでしょうか? <p>タグ二つ(dt、ddをpに変更し、dl削除)を使用するべきでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLのIMGタグについて

    HTMLのimgタグで(1)と(2)のようにした場合、表示が異なります。 (1)のほうが画像間のスペースが広くなります。また(2)の場合でも ほんの少しスペースが開くようです。 (1) <img src="image1"> <img src="image2"> (2) <img src="image1"><img src="image2"> HTMLは文章の構造タグなので(1)でも(2)の場合でも、改行は関係ないので 同じ表示になるべきなのではないでしょうか? なぜ異なった表示になるのでしょうか。 また画像間のスペースを0にしたいのですが、何か方法を教えてください。

    • ベストアンサー
    • HTML
  • imgタグは何で囲むのが良いか

    皆さんはimgタグは何で囲んでいますか? <div> <h3>タイトルタイトル</h3> <p>テキストテキストテキストテキストテキストテキスト</p> <img src="xxxx.jpg" alt=""> </div> 例えばこういうような時に、何で囲むべきかというのをいつも迷います。 ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、 pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。 最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、 altを空にしているものは囲まずにそのまま置いたりしています。 レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。 私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。 スマートなやり方をご教授ください。

    • ベストアンサー
    • HTML
  • /imgタグが生成される

    いつもここにはお世話になっております。 XSLでHTMLを出力する際なのですが、以下のように記述するとimgタグの後に/imgタグが付いてきてしまいます。 <img> <xsl:attribute name="src"><xsl:value-of select="@gazou" /></xsl:attribute> </img> →出力結果:<img src="hoge.jpg"></img> xsl:elementでも同様の結果でした。 これを <img src="hoge.jpg" /> のように出力するにはxsl:textのdisable-output-escaping="yes"で対応するしか方法は無いのでしょうか?

    • 締切済み
    • XML
  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 画像はDIVタグとPタグの両方で囲むの?

    クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか? ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>~</div>に文章はありません。  同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2(見出しタグ?)で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか? すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか? 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。

  • imgタグなしで画像表示

    imgタグなしで画像表示 JavaScriptでimgタグなしで画像URLから画像を表示したいです。 具体的には、次のビフォアフターのようにしたいです。 ■ビフォア (タグなしのプレーンな文章) サンプル文章サンプル文章サンプル文章。 http://sample.com/ サンプル文章サンプル文章サンプル文章。 http://sample.com/1.jpg 写真1 画像2 http://sample.com/2.png 画像3 http://sample.com/3.gif アニメーション ■アフター (JSでimgタグとaタグが自動挿入される) サンプル文章サンプル文章サンプル文章。 <a href="http://sample.com/">http://sample.com/</a> サンプル文章サンプル文章サンプル文章。 <img src="http://sample.com/1.jpg"> 写真1 画像2 <img src="http://sample.com/2.png"> 画像3 <img src="http://sample.com/3.gif"> アニメーション ■第1希望 (ぜひとも) 画像の種類はjpg、png、gifに対応可能にしたいです。 現在、URLを自動でハイパーリンク有りに変換していますので、これと競合しないようにもしたいです。 次のコードを使っています。 $("#main").each(function(){$(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,'<a href="$1" target="_blank">$1</a>'));}); ■第2希望 (可能であれば) 上記コードはjQuery必須ですが、可能ならjQueryを使いたくないです。なので、上記コードをそのままつかわずに、aタグとimgタグを自動挿入されるようにしたいです。 文章の途中にURLや画像URLがあっても正しく処理してほしいです。 ■第3希望 (お時間をさらにいただけるなら) コードの簡単な解説をお願いしたいです。 上記コードであれば、「(http|https|ftp):\/\/」が「http;//」等をあらわすのを次のページで理解しました。 http://www.openspc2.org/JavaScript/Ajax/jQuery_plugin/chapter8/index.html また、「$1」が検索対象の文字列であるのも理解しています。 「<a href="$1" target="_blank">$1</a>'」でハイパーリンクを生成しているのも理解しています。 簡単な解説をしていただけましたら、それを元に https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions で知見を深める所存です。 ■m(__)m そのままずばりの回答でなくとも、参考URLなどのご提案も助かります。 また、質問の意図がいまいち伝わりにくいようでしたら、その旨記載いただけましたら、加筆いたします。 どうぞよろしくお願いいたします。

  • HTMLタグによる画像の貼り付け

    はじめまして。 最近、メモ帳を使って、簡単なHPを作り始めたAZUMAXと申します。 何の知識もなく、いろんなサイトを見ながら勉強しつつ 少しずつ作っています。 しかし、すごく初歩的な所で困っています。 良かったら力を貸していただけないでしょうか? .jpgや.gifの画像ファイルを貼り付けたいのですが 貼り付けできません。 HPを見ると四角の中に、赤い■、緑の●、青の▲が表示されます。 その際のタグは<img src="画像のファイル名.jpg">です。 ファイルの保存場所が必要かと思い、 <img src="C:/Users/私のユーザー名/Pictures/画像のファイル名.jpg">に変えても、表示されませんでした。 ファイルの保存場所が違っているのか、タグが違っているのかも分かりません。 すごく初歩的な事で、申し訳ありませんが回答お願いします。 もう少し詳しい情報が必要でしたら、お答えします。 よろしくお願いします。

  • apeboardのタグ使用に関して

    apeboardで画像を貼りつけたいのでタグを有効にするためにboardini.cgiのファイルの中の タグを使用するかどうか、とimgタグを使用するかどうかの部分をonにしてアップして <img src="画像アドレス">で投稿すると画像は表示されすんですが、その前に <img src="画像アドレスがそのまま表示">≪画像≫といった感じで表示されてしまうんです。 ソースを見てみると &lt;img src="画像アドレス"&gt;<img src="画像アドレス">となっていました。 どうしたら画像の前に表示されてしまうタグをなくせるんでしょうか。 教えて下さい。よろしくお願いします。 (ちなみに<b>などのタグはきちんと使用出来ました)

    • 締切済み
    • CGI