画像をp要素にするかfigure要素にするか

img要素をp要素内に含めるかfigure要素に含めるか

figureはhtml5新要素です。基本コードは各々以下のような形が多いと思います。

p要素(段落)内にimg要素(画像)

<p>
  <img src="画像アドレス" width="横" height="縦" alt="代替テキスト">
</p>

figure要素(自己完結型コンテンツ)内にimg要素(画像)

<figure>
  <figcaption>キャプション</figcaption>
  <img src="画像アドレス" width="横" height="縦" alt="">
</figure>

「画像にキャプション(注釈)をつけたい場合はfigureを使う」と説明しているサイトも多くありますが、間違いではないと思います。ただしそれだけではないのも確かです。

どんな時にpでどんな時にfigureなのか

figure要素のサンプルコードの上に 自己完結型コンテンツ と書いてあります。その要素が無くなっても文脈には影響しないが、有ればよりわかりやすくなる場合は figure という考え方で良いと思います。

例えばこんな感じ。

上記のような文章の場合、仮に画像がそこになければどうなるでしょう。

… 何なんだよ (´・ω・｀)
何が来たんだよ。お客様って誰だよ (´・ω・｀)
となってしまいますよね。つまりこの文脈に於いて画像は不可欠 ということです。こういうパターンの時はp要素を利用します。

ここで alt属性 についてです。altの「適切な文」はとかくSEOと絡めてしまう場面が多いので、「画像のオブジェクトを端的に表す文言」といった説明になってしまうのですが、実際は 文脈が成り立つ内容 が本来の用途です。サンプルでは

<img src="画像アドレス" alt="自宅庭の花壇にに子猫がちょこんと座っている様子">

こんな風にテキストを入れています(一部属性諸略)
alt属性というのは本来はこういう利用の仕方なんですね。仮に視覚障害を持つ方が音声読み上げを利用した場合、画像が目に見えなくても何が写っていて何を伝えたい文脈なのかがわかるようにする。それがaltの役割です。p要素内にある画像は文脈の一部です。

では以下のようなパターンはどうでしょうか。

お客様が来ましたよ、そのお客様は子猫のことですよ、可愛かったですよ、といった文脈があり、その上で「庭のお客様」というキャプション付きでfigure要素でマークアップされた画像。この場合には画像が失われても「お客様とは誰(何)のことなのか」「子どもたちが可愛いと感じはしゃいだのは何故なのか」は文章だけで伝わります。さらに画像を入れることでその場の状況がよりわかりやすくなります。こういうパターンの時はfigure要素を利用します。

figure要素のキャプションは必須ではありません。また、img要素だけのためにあるものでもありません。「詩」「動画」「引用文」「ソースコード」など、いろいろなものに使えます。「自己完結型」とは文脈に影響を及ぼさないという意味でもあります。

displayの初期値を知れば大体察しはつく

figure要素に限ったことではないのですが、察しが良ければ「これは文脈とは分離している要素だな」「これは文脈に含む可能性のある要素だな」というのがわかります。

html要素は必ず display というCSSプロパティの初期値を持っています。つまりレンダリングされた際の「見た目」ですね。

displayプロパティの値はたくさんありますが、代表的なものが block と inline です。
display: block の要素は 何かと横に並べることはできません。
display: inline の要素は 何かと横に並べることができます。
「何か」には「テキスト」「文章」も含まれます。

文章に深い関わりのあるものが「横に並ばない」というのは非常に都合の悪いことですよね。以下は絵文字の例です。これらの絵文字は「img要素」でdisplayの初期値は inline です。

こういう「いちいち絵文字」な文章は好きじゃない、という個人感情は置いといて、各絵文字は文章と並んで表示されています。もしこれが横に並ばない、つまりdisplay初期値が block だったら？

こんな文章嫌ですよね。読みたくない (´・ω・｀)
つまり 文章内容の一部として扱うことを想定していない と言えませんか。これは私が勝手にそう思って脳内活用しているだけの理屈ではありますが、あながち間違いでもないと思うの (´・ｪ・｀)

で、figure要素の初期値は block なわけですから、文章と密接に関わってはいないはずという察しがつく、と。

p要素内imgなのかfigure要素内imgなのかの使い分けはここまでです。以降の章は「FC2ブログで」「私のテンプレートをご利用で」「記事内でもマークアップを使いこなしている方で」などの但し書き付き、狭い対象へ向けての内容になります。

パターン別htmlソースコード

The other way round

画像遅延読み込みに関する記事一覧

vanillaice000.blog.fc2.com

超軽量画像拡大スクリプトLuminousをFC2で使う方法

画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。 FC2ブログで利用するための各ファイル導入の仕方、コードの書き方などのベーシックな内容に加え、速度強化用のコード記載の仕方や画像が拡大できることをわかりやすくするための追加CSSなど。 初心者向けになるべく事細かに説明したいと思います。 今回は...

vanillaice000.blog.fc2.com

Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法

正直あんまりおすすめではない (´・ω・｀) すすめない理由は 要素が増える めんどくさい 記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) こんなところでしょうか。 特に要素が増えてしまう点ですね。無駄なラッパーが増えるというか。 結局は自身の記事内容の管理能力であったり理解力であったりに関わってきますので、html初心者にはおすすめしません。 ...

vanillaice000.blog.fc2.com

こういった内容の記事をUPしています。そこでこれらをどうやって組み合わせるのか、ってところのご提案です。特に lazyloadingによるスクロール位置ずれ解消 を行いたい場合ですよね。htmlの定義を損なわない、つまりvalidなまま全てを活用するにはどうするか、です。

• 画像にはlazyloadingを適用する
• 画像全てにスクロールズレ防止を行う

上記を絶対条件とする場合のhtmlの書き方です。なので 上級者向け。htmlソースコードはインデントなしにしておきます。また、改行の扱い「HTMLタグのみ」という条件下です。

p要素内のimg要素, テキストと並べない

追加CSS(スタイルシートに記載)

.asp-span {
  display: block;
}

.aspect-box {
  display: block;
}

<p>
あいうえお<br>
かきくけこ<!-- <br>不要。<br>を入れると空白行ができてしまいます。 -->
<span class="asp-span" style="max-width: 表示サイズpx; margin: 15px 0;"><!-- marginの15pxは上下にあるテキストとの距離。画像をセンタリングする場合は margin: auto; を指定。 -->
<span class="aspect-box" style="padding-top: calc(縦原寸 / 横原寸 * 100%);">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" width="横原寸" height="縦原寸" alt="">
</span>
</span>
さしすせそ<br>
たちつてと
</p>

p要素内のdiv要素入れ子はinvalid(不正)なのでspan要素に変更しつつ、spanのdisplay値を初期値のinlineからblockへ変更しています。このパターンは頻出だと思いますのでCSSを追加しておくと良いですね。

p要素内のimg要素, テキストと並べる

<p>
あいうえお。かきくけこ。
<span style="display: inline-block; width: 100%; max-width: 表示サイズpx;"><!-- テキストとの垂直位置揃えは vertical-align: 値; を追加。値はmiddleまたはtop -->
<span class="aspect-box" style="padding-top: calc(縦原寸 / 横原寸 * 100%);">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" width="横原寸" height="縦原寸" alt="">
</span>
</span>
さしすせそ。たちつてと。
</p>

このパターンは稀だと思いますのでdisplay値などはstyle属性で行うと良いと思います。

p要素内のpicture要素

上記いずれのパターンもimg要素をpicture要素にまるっと差し替えればOKです。picture要素の扱いは基本的にimg要素と同じです。

p要素内のimg要素 + luminous

上記いずれのパターンもimg要素をluminousクラスを付けたaタグで囲えばOKです。終了タグの欠損に気をつけてください。また、picture要素の場合も同じです(picture要素をaタグで囲います。「picture要素内img要素」を囲うのではない点に注意)
「picture要素はimg要素と同じ」を頭に入れて頂いて、以降はpicture要素のパターンは省略します。

figure要素内のimg要素

<p>
あいうえお<br>
かきくけこ
</p>

<figure>
<figcaption>ここにキャプション</figcaption>
<div style="max-width: 表示サイズpx;">
<div class="aspect-box" style="padding-top: calc(縦原寸 / 横原寸 * 100%);">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" width="横原寸" height="縦原寸" alt="">
</div>
</div>
</figure>

<p>
さしすせそ<br>
たちつてと
</p>

p要素内にfigure要素を含めることはできません(figure内にpはOK)ので、上記のような形になるはずです。figure要素はほとんどの要素を子要素に持てるのも特徴です。

キャプションと画像との距離やキャプションの装飾はご自身でどうぞ。画像との距離にmarginなどを設ける場合はimgではなくfigcaptionの方へ。キャプション位置を画像下に変更することも可能です。

figure要素内のimg要素 + luminous

やはり同じようにimg要素をluminousクラス付きaタグで囲います。

まとめ

displayの役割が理解できるとこういった複雑な入れ子も扱いやすくなるような気がします。span要素などを装飾で使い倒すというのはあまり良くないとはいえ、スクロール位置が調整できればユーザーの利便性が上がりますので、入れ子ルールはきちんと守った上で操作すれば良いと思います。