【HTML5】画像に説明・捕捉を付け加えるfigcaptionタグの基本+具体例

HTML5から新しく定義された<figcaption>タグをご存じですか?実はこのタグ、挿入した画像に自由に説明テキストを付け加えることができるタグなのです!

figcaptionタグの基本の使い方と具体例を知りたい

今回は、figcaptionタグの

・基本的な使い方
・figcaptionタグとの類似属性との違い
・figcaptionタグをCSSで装飾する方法(サンプルコード付き)

について説明します。

figcaptionタグとは

figcaptionタグの読み方

figcaptionタグは「フィグキャプション」と読みます。figure(図) + caption(画像などの説明)の2つの単語を合わせてできています。

figcaptionタグの説明

figcaptionタグは、HTMLで挿入した画像に補足の説明を付け加えることができるタグで、HTML5で新しく定義されました。

新定義されたタグですが、現在多くのブラウザでサポートされていますので、積極的に取り入れていきましょう。

figcaptionタグで利用できる属性

figcaptionタグでは以下のグローバル属性のみ使用できます。グローバル属性とは、HTMLの全タグ・要素で使用可能な属性のことです。

属性 説明
  accesskey属性  キーボードのショートカットの生成し、簡易なアクセスを可能にする
class属性   要素に任意の名称を与える(同じclass名を複数の要素に与えられる)
 dir属性  テキストの書字方向を示す
・ltr:「left to right」左から右
・rtl:「rght to left」右から左
・auto:自動的に書字方向を決定する
 hidden属性  要素に関連性がないことを示す
id属性  要素に任意の名称を与える(同じidは使用できない:一意性)
 lang属性  要素の言語を定義する
style属性   要素にCSSスタイル宣言を適用する

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 8
Edge 12
Firefox  4
nternet Explorer  9
Opera  11
Safari  5.1
スマートフォン用ブラウザ 対応状況
Android webview   完全対応
Android版Chrome   完全対応
Android版Firefox  4
Android 版 Opera  11
iOS版Safari  5.1
Samsung Internet   完全対応

figcaptionタグの基本的な使い方

figcaptionタグの使い方

figcaptionタグには親要素の<figure>タグがあります。そのためfigureタグの中にfigcaptionタグを入れて使用します。画像を実際に指定するのはimgタグです。

figcaptionタグの効果については、以下のサンプルコードをご覧ください。figureタグで挿入した画像の下に「雪の結晶」というテキストが挿入されています

See the Pen
figcaption
by rabbittyu (@rabbittyu)
on CodePen.


MEMO
imgタグ補足
・src属性:画像のURLを入力します
・alt属性:画像が表示されなかった場合に、何の画像が表示されていたかを説明します

figcaptionタグと類似するalt属性とtitle属性との違い

figureタグと混同しやすいのが、グローバル属性のtitle属性と、imageタグ内などで使用するalt属性です。まずはこれらの違いをサンプルコードを元に一つずつ確認していきましょう。

See the Pen
figcaption 違い
by rabbittyu (@rabbittyu)
on CodePen.

alt属性は先述した通り、画像が上手く表示されなかった場合の補足情報です。画像が表示されなかった場合のみ表示され、画像表示に成功した場合は表示されません。

またtitle属性は、カーソルを画像の上に置いた際に表示される補足情報です。カーソルを画像の上に乗せていない場合は表示されません。

最後がfigcaptionタグです。figcaptionタグは使用することで画像の下に画像に関する補足情報を表示します。

CSSでfigcaptionタグを装飾する方法

ではより具体的な実用例として、figcaptionタグにCSSを設定し、よりオリジナリティあふれるページを作成する方法をご紹介します。

今回は月を撮影した画像に、「望遠鏡で撮影した満月の画像」というキャプションを付け加えました。基本の使用例と違っているのは、figcaptionタグで設定した文章が画像内に表示されている点です。

また画像と文字が被っても、文字を見えやすくするために背景色を白の半透明に設定しました。これによってより画像とキャプションの結びつきが強く感じられますね。

サンプルコードでは、キャプションの位置をpositionプロパティで設定しました。値を「absolute」に設定することで、親要素である画像に対してpadding-right/left/top/bottomで相対値を設定することができます。

また背景色を白の半透明にするために、色の指定をrgbで指定しました。2つの値がありますが、最後の0.7の値が画像の透明度を表します。この背景色は画像によって設定すると、より見やすくなるでしょう。rgbに関しては検索することで、簡単に色コードの指定が可能です。

See the Pen
figcaption CSS
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はfigureタグの子要素であり、画像にキャプションを付け加えることができるfigcaptionタグについて解説しました。

画像に文字の情報を付け加えるタグや属性はいくつかありますが、画像の補足テキストとして設定するのに一番適しているのはfigcaptionタグでしょう。

figcaptionタグにはご紹介したようにCSSが簡単に適用できますので、作成しているサイトの色やデザインに合わせて設定すると、よりサイトに馴染ませることができますね!

参考文献:ここに参考文献を入れて下さい。
MDN web docks <figcaption>: 図キャプション要素
HTMLクイックリファレンス
figureタグ・figcaptionタグとは?SEOに有効な使い方をご紹介!
画像の上にお洒落に文字やボタンを乗せる方法