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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

HTML

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

Q&A

解決済

1回答

4197閲覧

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

ybit

総合スコア8

HTML5

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

HTML

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

0グッド

0クリップ

投稿2018/05/15 09:59

編集2018/05/16 02:08

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

前提

  • とある手順を画像付きで説明している部分のマークアップについての質問です。
  • キャプションの外側は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を使用する場合

HTML

1<h2>〇〇導入手順1:△△をしてください。</h2> 2<ol> 3 <li> 4 <figure> 5 <img src="xxx.png" alt="画像1"> 6 <figcaption>画像1のキャプション</figcaption> 7 </figure> 8 <p>手順1-1についての説明文</p> 9 </li> 10 <li> 11 <div class="flow-image-wrap"> 12 <figure> 13 <img src="yyy.png" alt="手順2-1"> 14 <figcaption>画像2-1のキャプション</figcaption> 15 </figure> 16 <figure> 17 <img src="zzz.png" alt="手順2-2"> 18 <figcaption>画像2-2のキャプション</figcaption> 19 </figure> 20 </div> 21 <p>手順1-2についての説明文</p> 22 </li> 23</ol>
dl,dt,ddを使用する場合

HTML

1<h2>〇〇導入手順1:△△をしてください。</h2> 2<ol> 3 <li> 4 <dl> 5 <dt><img src="xxx.png" alt="画像1"></dt> 6 <dd>画像1のキャプション</dd> 7 </dl> 8 <p>手順1-1の説明文</p> 9 </li> 10 <li> 11 <div class="flow-image-wrap"> 12 <dl> 13 <dt><img src="yyy.png" alt="画像2-1"></dt> 14 <dd>画像2-1のキャプション</dd> 15 </dl> 16 <dl> 17 <dt><img src="yyy.png" alt="画像2-2"></dt> 18 <dd>画像2-2のキャプション</dd> 19 </dl> 20 </div> 21 <p>手順1-2の説明文</p> 22 </li> 23</ol>
div+pを使用する場合

HTML

1<h2>〇〇導入手順1:△△をしてください。</h2> 2<ol> 3 <li> 4 <div class="flow-image-wrap"> 5 <img src="xxx.png" alt="画像1"> 6 <p>画像1のキャプション</p> 7 </div> 8 <p>手順1-1の説明文</p> 9 </li> 10 <li> 11 <div class="flow-image-wrap"> 12 <div class="flow-image2"> 13 <img src="yyy.png" alt="画像2-1"> 14 <p>画像2-1のキャプション</p> 15 </div> 16 <div class="flow-image2"> 17 <img src="yyy.png" alt="画像2-2"> 18 <p>画像2-2のキャプション</p> 19 </div> 20 <p>手順1-2の説明文</p> 21 </li> 22</ol>

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/05/15 16:59

それぞれHTMLを提示されてはいかがでしょうか。
kei344

2018/05/16 01:53

「コンテンツから独立した内容ではない」と判断されている理由がわかりません。具体的に記載いただけませんか?
ybit

2018/05/16 02:05 編集

内容そのものを具体的に書くことはできませんが、figureだけを抜き出して他の箇所やページに移動させた場合に成り立たないので「コンテンツから独立した内容ではない」と判断しました。 イメージとしてはSuicaの操作方法の部分に近い内容です。 1つの手順の中に最大で画像が2枚使用されます。 http://www.jreast.co.jp/appsuica/start/#suica_app
kei344

2018/05/16 02:07

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

2018/05/16 02:11

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

回答1

0

ベストアンサー

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

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

html

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

html

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

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

html

1<li> 2 <dl> 3 <dt><img src="xxx.png" alt="">画像1のキャプションかつ手順1-1の見出し</dt> 4 <dd>手順1-1の説明文</dd> 5 </dl> 6</li>

html

1<li> 2 <div><img src="xxx.png" alt="手順1-1のイメージ画像"></div> 3 <dl> 4 <dt>手順1-1の見出し</dt> 5 <dd>手順1-1の説明文</dd> 6 </dl> 7</li>

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

投稿2018/05/16 02:47

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ybit

2018/05/16 04:46 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問