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.
・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に有効な使い方をご紹介！
画像の上にお洒落に文字やボタンを乗せる方法
