質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • HTML

    9614questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4318questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

画像キャプションのマークアップ

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 290

ybit

score 2

画像キャプションはどうマークアップするのが最適か気になって調べてたらよく分からなくなりました…

 前提

  • とある手順を画像付きで説明している部分のマークアップについての質問です。
  • キャプションの外側はolリストを使用します。

(※画像の完成図は少し内容が違ったので削除しました。)

 マークアップ案

  • figure+figcaptionを使用する
    →コンテンツから独立した内容ではないので不適切?
  • dl,dt,ddを使用する
    →定義リスト使っていいシーンなのか調べてるうちに分からなくなってきた。
  • div+pタグを使用する
    →一番無難なのは分かる。

できれば2番目の定義リストで組みたいと思いましたが、
MDN web docsを読むとdtは用語を表すなら画像を用いるのは不適切な気がしてきました。

<dt> 要素は、説明又は定義リストの中で用語を表す部分
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dt

一般的?にはどのようにマークアップするのがベターなんでしょうか?
また、今回みたいな画像を使う件では定義リストの使用はやはり不適切でしょうか?

よろしくお願いします。

 HTMLコード(追記:20180516)

実際の内容に近いソースを追記しました。

 figure+figcaptionを使用する場合
<h2>〇〇導入手順1:△△をしてください。</h2>
<ol>
 <li>
  <figure>
   <img src="xxx.png" alt="画像1">
   <figcaption>画像1のキャプション</figcaption>
  </figure>
  <p>手順1-1についての説明文</p>
 </li>
 <li>
 <div class="flow-image-wrap">
   <figure>
    <img src="yyy.png" alt="手順2-1">
    <figcaption>画像2-1のキャプション</figcaption>
   </figure>
   <figure>
    <img src="zzz.png" alt="手順2-2">
    <figcaption>画像2-2のキャプション</figcaption>
   </figure>
  </div>
  <p>手順1-2についての説明文</p>
 </li>
</ol>
 dl,dt,ddを使用する場合
<h2>〇〇導入手順1:△△をしてください。</h2>
<ol>
 <li>
  <dl>
   <dt><img src="xxx.png" alt="画像1"></dt>
   <dd>画像1のキャプション</dd>
  </dl>
  <p>手順1-1の説明文</p>
 </li>
 <li>
  <div class="flow-image-wrap">
   <dl>
    <dt><img src="yyy.png" alt="画像2-1"></dt>
    <dd>画像2-1のキャプション</dd>
   </dl>
   <dl>
    <dt><img src="yyy.png" alt="画像2-2"></dt>
    <dd>画像2-2のキャプション</dd>
   </dl>
  </div>
  <p>手順1-2の説明文</p>
 </li>
</ol>
 div+pを使用する場合
<h2>〇〇導入手順1:△△をしてください。</h2>
<ol>
 <li>
  <div class="flow-image-wrap">
   <img src="xxx.png" alt="画像1">
   <p>画像1のキャプション</p>
  </div>
  <p>手順1-1の説明文</p>
 </li>
 <li>
  <div class="flow-image-wrap">
   <div class="flow-image2">
    <img src="yyy.png" alt="画像2-1">
    <p>画像2-1のキャプション</p>
   </div>
   <div class="flow-image2">
    <img src="yyy.png" alt="画像2-2">
    <p>画像2-2のキャプション</p>
  </div>
  <p>手順1-2の説明文</p>
 </li>
</ol>


class名などは仮です。
私が思いつくのは上記でした。
説明不足でしたら再度ご指摘いただけますと助かります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ybit

    2018/05/16 11:00 編集

    内容そのものを具体的に書くことはできませんが、figureだけを抜き出して他の箇所やページに移動させた場合に成り立たないので「コンテンツから独立した内容ではない」と判断しました。

    イメージとしてはSuicaの操作方法の部分に近い内容です。
    1つの手順の中に最大で画像が2枚使用されます。
    http://www.jreast.co.jp/appsuica/start/#suica_app

    キャンセル

  • kei344

    2018/05/16 11:07

    「手順を説明する画像だから」ということですか?

    キャンセル

  • ybit

    2018/05/16 11:11

    「手順を説明する画像だから」→そうです。手順を説明しているコンテンンツの画像になるので、画像とコンテンツは密接に関係していると思ったのですがどうでしょうか…。

    キャンセル

回答 1

checkベストアンサー

+3

一概に、どれがいいとは言えません。
画像とそれに続くテキストの関係性がどんなものかによると思います。

『手順1-1についての説明文』がなくても分かるような画像なら、画像と手順の見出しで独立すると思うので、figure+figcaptionがいいと思います。
無難なのは、div+pですが、
場合によってはh3を利用してもいいと思います。

<li>
    <div class="flow-image-wrap">
        <img src="xxx.png" alt="手順1-1のイメージ画像">
        <h3>手順1-1の見出し</h3>
    </div>
    <p>手順1-1の説明文</p>
</li>
<li>
    <div class="flow-image-wrap"><img src="xxx.png" alt="手順1-1のイメージ画像"></div>
    <h3>手順1-1の見出し</h3>
    <p>手順1-1の説明文</p>
</li>


dl,dt,ddをもし利用するなら、手順の見出しがdt、手順の説明がddになるような気がします。
画像がどんなものかにより2パターン考えられます。

<li>
    <dl>
        <dt><img src="xxx.png" alt="">画像1のキャプションかつ手順1-1の見出し</dt>
        <dd>手順1-1の説明文</dd>
    </dl>
</li>
<li>
    <div><img src="xxx.png" alt="手順1-1のイメージ画像"></div>
    <dl>
        <dt>手順1-1の見出し</dt>
        <dd>手順1-1の説明文</dd>
    </dl>
</li>

結局は、組みやすさでいいような気もします。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/16 13:46 編集

    「『手順1-1についての説明文』がなくても分かるような画像かどうか」
    この一文が非常に分かりやすかったです。
    今回は『手順1-1についての説明文』がないと何の画像か分からないものになるので無難なマークアップに留めようと思います。
    h3の利用や定義リストでのマークアップもとても参考になりました。ありがとうございます!

    figureをなるべく使ってみようと思っても難しいですね…。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    9614questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4318questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。