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

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

カスタマイズ HTML, CSS, JavaScript
2018/07/16
6
vanillaice (Akira)
vanillaice (Akira)
EducationHTML上級者向けLuminous

画像のマークアップ についてです。
マークアップ = htmlなどによる文書構造の意味付け・定義付け

「日記を書いています」「日々の出来事を楽しく更新しています」という方は無理する必要はありません(と個人的に思う)無理したら楽しいことが楽しくなくなる (´・ω・`)

例えば「記事内でTOC(table of content, 見出し目次)を利用している」だとか、「検索順位を意識している」といった方はhtmlタグを使いこなしているかもしれませんね。そういう方々向け記事。

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

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

先日我が家の庭に小さなお客様が来ました
花壇に子猫がちょこんと座っていたんです
とっても可愛いので子どもたちもはしゃいでいました

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

先日我が家の庭に小さなお客様が来ました 花壇に子猫がちょこんと座っていたんです とっても可愛いので子どもたちもはしゃいでいました

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

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

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

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

The other way round

The other way round

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

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

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

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

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

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

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

こういった内容の記事を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要素などを装飾で使い倒すというのはあまり良くないとはいえ、スクロール位置が調整できればユーザーの利便性が上がりますので、入れ子ルールはきちんと守った上で操作すれば良いと思います。

Related post

Comments  6

hige
2018/07/17 (Tue) 10:02

こんな記事、大好きです。
何時も勉強させて貰ってます。
特に細かいニュアンスの具体的な説明があるのですごい役に立ちます。
その時は役に立たなくても、後日、なんか記載があったなぁと。

>その要素が無くなっても文脈には影響しないが、有ればよりわかりやすくなる場合は figure

そうなんですかぁ。
キャプションを付ける為だけにfigureを利用した事があります。
img を pタグで囲むなんて事は気づきもしませんでした。この方法でキャプションを付けるのを考えてみます。
グラフとか図を参照しながらの記事だったもので。(これって微妙なのかな)

alt属性はマジメにやろうとすると文章が結構むつかしい。
私の様に画像中心の記事が多くなるとめんどいですね。
FC2ブログは画像を記事に貼付けるアクションというものが用意されてますが、alt属性は自動的にもと画像の名前になります。これ、あかんなぁ、と思いつつ、放置です。
で、読み上げだと、記事全部が123456789.jpgなんていう数字の羅列かぁ。

vanillaice (Akira)
Akira
2018/07/18 (Wed) 00:56

To higeさん

higeさん、こんばんは (●'0'●)/

htmlについては「どこまでできるか」「どこまでやるか」ですよね (´・ω・`)
枷にしすぎても良くないですし難しいところです。

altなんですが、html5は
alt=""
こうして無指定が許可されているんですけども、html4やxhtmlなどはダメなんです。
ところがユーザーが自主的にaltを書くとは思えないですよね。
なので強制的にファイル名称を書き出すようなシステムにしたのだと思います。
アップロード画面の「ファイル名修正」でaltの書き換えができるようになってますが、それを知っているユーザーがどのぐらい居るのか(笑)

といいながらサムネイル関連変数ではaltの無指定どころかalt属性そのものが無い(これはhtml5であってもエラーです)という不思議仕様。

hige
2018/07/18 (Wed) 18:19

alt=""

alt="" ってエディタを使ってると、割と簡単にそれに置換出来るのですが、これって やっぱ やったらまずいんでしょうねぇ。
数字の羅列か、alt="" か ってどちらがましなんでしょう。

てか、FC2の画像挿入でもしかり、某商業サイトのアフィリバナーもしかり、旧HTMLとかが一杯で、なんかテストサイトで調べるとそこで一杯エラーがでて笑ってしまいます。ときどき書き替えてやろうかと思ってしまいます。

FC2のサムネイルは使ってないので、あれまそうなんですか。

vanillaice (Akira)
Akira
2018/07/19 (Thu) 00:21

To higeさん

こんばんは (o'д`o)ゝ

特に重要な意味が無いならば数字を入れておくよりもいっそ空欄の方が良いと思います。

なんで空欄が許可されたかというと、時には「たいして意味は無い」という場合もあるわけで。
絵文字なんかそうですよね。
感情の補完はするけれど別に大きな意味があるわけではない。
意味が無いのに無理矢理意味を持たせること自体ナンセンスなので「書かずとも良い」という変更になったと思いますよ。

hige
2018/07/19 (Thu) 09:54

To Akiraさん

>特に重要な意味が無いならば数字を入れておくよりもいっそ空欄の方が良いと思います。

よく解りました。
私は記事の殆どが写真なので、数字の羅列のaltから脱却を考えてみます。
どうもありがとうございました。

vanillaice (Akira)
Akira
2018/07/20 (Fri) 21:29

To higeさん

こんばんは (o'ω')ノ

そうですね。空欄にするのは超簡単だと思います(笑)
こちらこそいつもありがとうございます :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)