ブログをリニューアル予定。過去記事は削除するかもです。

【figureタグとは】使い方がイマイチわからないHTMLタグを解説

【figureタグとは】使い方がイマイチわからないHTMLタグを解説

figureタグって何ですか?

どこでどう使うの?

いまいちピンとこないから、使い方を教えてください。

 

本記事では、いまいちピンとこない<figure>について解説します。

簡単に言うと、<figure>で囲む要素は、学校の教科書に載っている図表や写真などに似ています。

別に、坂本龍馬の顔写真が無くても歴史は学べますが、顔写真があればイメージしやすいのと同じ感覚です。

逆に、数学の問題集などで、その場所に図形が載ってなければ問題として成立しないケースでは、<figure>は使いません。

ちょっと雑な説明になりましたが、こんな感覚で使うのが<figure>なので、本記事を参考にしつつ、使い方のコツをつかんでみてください。

 

スポンサードサーチ

【figureタグとは】使い方を解説します

【figureタグとは】使い方を解説します

<figure>はHTML5から登場した比較的新しいタグでして、自己完結するコンテンツを囲むときに使う目的で使用されます。

イラストや図表、補足情報を載せるときは<figure>を使うと覚えておくと良いかと思います。

 

figureタグの使い方

<figure>の使い方は、HTMLの基本通りになります。

 

figureタグの使い方
<figure>ここに自己完結するコンテンツ(図表・補足情報など)</figure>

 

このように、開始タグと終了タグで囲みます。

<figure>の中には画像を挿入できるので、下記のように<img>を入れることも可能です。

 

画像をfigureタグで囲む
<figure><imag src="画像のURL"</figure>

 

pタグとどう使い分けるの?

<figure>を使ったからといって、ブラウザ上での見た目は変化無しです。

そのため、<p>との違いに戸惑う人も少なくありません。

結論から言えば、どちらを使ってもHTMLの文法的には間違いではないので、判断基準は割と曖昧です。

 

figureタグとpタグの使い分け(判断基準)

  • <figure>:画像を別の場所に写しても、コンテンツの意味が成り立つ
  • <p>:画像が本文の一部になっている

 

上記のような感じで捉えておくといいでしょう。

<p>を使う場面は次のようなケースです。

 

pタグを使ったほうが良い場合
<p>この前、道を歩いていたら、こんな壁画を見つけました。</p>
<p><img src="https://ksonoda.com/image/uploads/los_angeles_streetart.jpg"></p>
<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タグとどう使い分けるの?

関連情報を記載するためのHTMLタグで、もうひとつ、<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>で囲むのがベストな使い方かなと思います。

おわり。