どこでどう使うの？
いまいちピンとこないから、使い方を教えてください。
本記事では、いまいちピンとこない<figure>について解説します。
僕なりの解釈ですが、<figure>は教科書に載っている図表や写真の感覚に似ています。
坂本龍馬の顔写真が無くても歴史は学べますが、顔写真があれば後で思い出すときに「あの人か！」とイメージしやすくなりますね。
逆に、数学グラフが在るべきページに載っていない場合、そもそも問題が成立しないので「このグラフを見て二次関数の問題に答えよ」とか言われても「へ？どゆこと？？グラフどこよ？？？」になります。
- 坂本龍馬の顔写真 → 教科書に載ってなくても、幕末の歴史を学ぶには問題ない
→ あると嬉しい情報：<figure>利用推奨 - 二次関数のグラフ → 教科書に載ってなければ、その問題を解くこともできない
→ 必要不可欠な情報：<figure>利用推奨しない
こんな感じで、坂本龍馬の写真に<figure>タグは使うけど、二次関数の図形には使いません。
かなり主観的なイメージですが、<figure>はこのような感覚で使用するので、本記事を参考にしつつ使い方のコツをつかんでみてください。
【無料】授業料0円のプログラミング教室まとめはこちら
»無料でプログラミングを学ぶ方法【初心者向け】※授業料0円スクールあり
スポンサードサーチ
本記事のもくじ
figureタグの使い方解説（pタグとの違いも言及）
では本題に入りつつ、<figure>について詳しく解説していきます。
<figure>は、HTML5から登場した比較的新しいタグでして、自己完結するコンテンツを囲むときに使います。
イメージしやすいように、イラストや補足情報を載せるときは<figure>を使うと覚えておくのもいいかもです。
具体的な使い方を深掘りしていきますね。
figureタグの使い方
<figure>は、HTMLの基本通り、コンテンツの前後を <figure> </figure> で囲んで使います。
<figure>ここに自己完結するコンテンツ（イラスト・補足情報など）</figure>
<figure>の中には画像も挿入可能なので、<img>を入れたりしてもOKです。
<figure><imag src="画像のURL"</figure>
pタグと使い分ける方法
<figure>を使ったからといって、ブラウザ上での見た目は変化無しです。
そのため、<p>との違いに戸惑う人も少なくありません。
結論から言えば、どちらを使ってもHTMLの文法的には間違いではないので、判断基準は割と曖昧です。
figureタグとpタグの使い分け（判断基準）
<figure>：画像を別の場所に写しても、コンテンツの意味が成り立つ<p>：画像が本文の一部になっている
上記のような感じで捉えておくといいでしょう。
<p>を使う場面は次のようなケースです。
<p>この前、道を歩いていたら、こんな壁画を見つけました。</p>
<p><img src="https://ksonoda.com/image/uploads/los_angeles_streetart.jpg"></p>
<p>ロサンゼルスでは、このようにストリートアートが盛んで、映画の宣伝広告が壁画になっていることもあります。</p>この前、道を歩いていたら、こんな壁画を見つけました。
ロサンゼルスでは、このようにストリートアートが盛んで、映画の宣伝広告が壁画になっていることもあります。
このように、画像が文脈にとって欠かせない場合は<p>のほうが好ましいとされています。
少しだけ文章を書き換えて、文脈をテキストだけで完結させれば、<figure>で画像を挿入してもOKになります。
<p>ロサンゼルスでは、ストリートアートが盛んで、映画の宣伝広告が壁画として描かれていることもあります。</p>
<figure><img src="https://ksonoda.com/image/uploads/los_angeles_streetart.jpg"></figure>
これだと、文章だけで文脈が完結しつつ、その下に「あったら良いな」的な補足として画像が挿入されている形になります。
別に、この画像はなくてもOKといった位置付けです。<figure>と<p>の使い分けはこのようなイメージになります。
ただし、<figure>のほうが好ましい場面で<p> を使ったからといって、HTML的に問題になるわけでも、SEOで不利になるわけでもないので、あまり考えすぎるのはやめましょう。
逆も然りで、<p>が好ましい場面で<figure>になっていても問題ありません。
asideタグと使い分ける方法
関連情報を記載するためのタグとしては、<aside>もありますが、根本的に利用目的が異なります。
<aside>はメインコンテンツに含まれない関連情報を記載する際に使われるタグでして、<figure>や<p>とは根本的に違うので、間違えないように注意しましょう。
例えば、次のような場面では、<aside>を使用します。
- 関連記事
- 広告
- 著者プロフィール
これらは本文に直接的な関係はありませんが、ちょっとだけ関連している情報です。
こんなときは<aside>で囲ってあげれば、やや関連情報であることをブラウザに伝えることができます。
figcaptionタグと合わせて使う
<figure>にはキャプションをつけることもできます。
<figure>
<img src="https://ksonoda.com/image/uploads/los_angeles_streetart.jpg">
<figcaption>ストリートアートのイメージ</figcaption>
</figure>
このように、<figure>の中に<figcaption>を書くだけなので簡単です。
<figure>の情報にタイトルや注釈をつけてさらに補足したいときは、<figcaption>をつけましょう。
挿入位置は、<figure>内であればどこでもOKです。先頭につければ、補足情報より上にキャプションが挿入されるし、後ろに入れれば、キャプションが下に表示されます。
figcaptionとaltの違い
画像の代替テキストとしてalt属性というものがあります。
alt属性は、ブラウザエラーなどで画像がうまく表示されないときに代わりに表示するための、画像説明文みたいなものですが、“説明”という意味では<figcaption>と同じです。
» 参考記事：【imgタグとは】HTMLで画像を表示する方法を初心者向けに解説
用途が同じなら、<figcaption>を書けば、alt属性は省略して良いのかと思うかもしれませんが、答えはNOです。
alt属性は、あくまでも画像の“代替”として使うもので、キャプションをつける要素はないので、両方書くようにしましょう。
figureタグ・figcaptionタグを使うメリット
<p>との違いも分かりにくいし、別にどっちで書いても問題ないのに、わざわざ<figure>を使うメリットはあるのかと思いますよね？
ページの見た目的には大きく影響しない<figure>ですが、検索エンジンのクローラーは、HTMLタグのひとつひとつを識別します。
<figure>を適切に使うことで、文章構造をクローラーに伝えるメリットがあるので、どちらかというと、読者向けではなく、検索エンジンクローラー向けにメリットが存在すると言えますね。
figureタグの使用例
本記事では、<figure>の中に<img>を入れたサンプルを紹介しましたが、<figure>はあくまでも自己完結絵する補足情報を記すタグなので、画像以外のものも入れることができます。いくつか例を載せておくので、参考にどうぞ。
使用例①：画像を入れる
本記事で解説した通り、<figure>には画像を入れることができます。
複数の画像を入れることもできるので、補足画像が2つ以上必要な場合でも安心です。
<figure>
<img src="https://ksonoda.com/image/uploads/los_angeles_streetart.jpg">
<img src="https://ksonoda.com/image/uploads/los_angeles_streetart_2.jpg">
<figcaption>ストリートアートのイメージ</figcaption>
</figure>
使用例②：コードを書く
ソースコードを入れることもできます。<pre><code>を使って、ソースコードを書きつつ、<figure>で、そこが完結した情報であることをクローラーに知らせましょう。
<figure>
<figcaption>HTMLの雛形</figcaption>
<pre><code>
<!DOCTYPE html>
<html lang="ja">
<head></head>
<body></body>
</html>
</code></pre>
</figure>» 参考記事：【ソースコードを載せるためのHTMLタグ】codeタグで綺麗なコードを表示しよう
使用例③：引用を書く
<figure>の中に、<blockquote>と<cite>で引用と出典を書くことも可能です。
<figure>
<blockquote>
<p>どうして本の栞に1ドルも払うの？その1ドル札を栞として使えばいいのに</p>
</blockquote>
<figcaption>
<cite>スティーブン・スピルバーグ</cite>
</figcaption>
</figure>» 参考記事：HTMLで引用タグを正しく使う方法【長文・一部・引用元の書き方を解説】
スポンサードサーチ
まとめ：figureタグの使い方は分かりにくい
本記事は以上です。
記事を書いていても感じたのですが、やっぱり<figure>はわかりにくいです。
正しい使い方のポイントは、“その要素がそれだけで完結しているかどうか”だけなので、ページ内の情報を整理しつつ、その場所じゃなきゃいけない情報以外は<figure>で囲むのがベストな使い方かなと思います。
おわり。
