HTMLのfigureタグを使って画像だけでなくpタグやdivタグを使ったレイアウト方法を解説します。
figureタグはあまり使用例がないので使い方がわかりにくいタグでもあるので、基本的な使い方と合わせて使用例やスタイル例もいくつか紹介します。
HTMLのfigureタグとは？
HTMLfigureタグはMozillaのドキュメントを見ると以下のような説明になっています。
<figure> は HTML の要素で、図表などの自己完結型のコンテンツを表し、
任意で <figcaption> 要素を使用して表されるキャプションを付けることができます。
図、すなわちキャプションとその中身は一単位として参照されます。少しわかりにくいですが、要は文章で参照されるようなもの(図表やコードスニペット、引用文など)をfigureタグを使って区別するということです。
また、figureタグには<figcaption>という説明文を入れることができます。
figureタグのSEO効果はある？
figureタグを正しく使うことでSEO効果が見込めるかというと、実際のところそれほど影響はないようです。
ですが、<figcaption>で図表などに説明文を入れることができるため、それがどんなものなのかを理解するのに役立ちます。
他にも<figcaption>を使うことでアクセシビリティの向上にもなるため間接的にはコンテンツの品質を向上させることが可能です。
figureタグの基本的な使い方
ここからはfigureタグの使い方を解説していきます。
figureタグを画像で使用する場合は次のようになります。キャプションを入れて画像の説明文も追加できます。
<figure>
<img src="画像のURL" alt="画像の説明文">
<figcaption>画像の説明文</figcaption>
</figure>figureタグで引用文を作る
引用文の場合は次のようなHTMLコードになります。あとで説明しますが、figcaption以外にもpタグやdivタグなどを入れることができます。
<figure>
<figcaption>蛙の子は蛙</figcaption>
<blockquote>「蛙の子は蛙」という言葉は、子どもが親に似て育つことを意味していますが、子どもは親とは別の人間であることを忘れてはいけません。</blockquote>
</figure>figureタグでコードスニペットを作る
コードスニペットを次のような書き方で表示することもできます。キャプションがあるとどんな内容か分かりやすくなりますね。
<figure>
<figcaption>ブラウザアイコンをクリックすると、現在開いているタブのURLをアラートとして表示</figcaption>
<pre>
window.onload = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var url = tabs[0].url;
alert(url);
});
}
</pre>
</figure>figureタグで作ったコンテンツをCSSでスタイルする方法
figureタグを使ったHTMLコードは他のHTMLタグと同じようにCSSを使ったスタイリングができます。
figure {
width: 412px;
}
figure img {
width: 400px;
padding: 5px;
border: 1px solid #ccc;
}
figcaption {
text-align: center;
font-size: 12px;
}結果はこちらのようになります。
引用やコードスニペットでも同じようにスタイルをつけることができます。
figureタグの中にHTMLタグを入れるには？
figureタグにはfigcaptionの他にも以下のようなタグを入れることができます。ほとんどのHTMLタグに対応しているので画像だけでなくあらゆるコンテンツをfigureタグの中で作成することができます。
figureタグの中に入れることができる主なHTMLタグはこちらです。
- a
- div
- p
- h1~h6
- iframe
- form,table
- button
- pre,code
- ul,ol
その他のタグについてはこちらのドキュメントをご覧ください。
figureタグにaタグを入れてみる
aタグはリンクを作ることができるHTMLタグです。figureタグに入れる場合はこんな感じになります。
<figure>
<figcaption>参考リンク集</figcaption>
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
</figure>figureタグにpタグを入れてみる
文章を作るpタグや、見出しを作るhタグもfigureの中に入れることができます。
<figure>
<figcaption>夏休みの自由研究の面白いアイデア</figcaption>
<h1>紙飛行機を飛ばしてみよう</h1>
<p>紙飛行機は、紙とハサミがあれば簡単に作ることができます。また、紙の種類や折り方を変えることで、飛距離や飛行時間を変えることができます。</p>
<h1>水の力を使って実験してみよう</h1>
<p>水の力を使って、さまざまな実験を行うことができます。例えば、水の力で動くモーターを作ったり、水の力で紙を切ったり、水の力でロケットを飛ばすことができます。</p>
</figure>figureタグにdivタグを入れてみる
divタグを使ってレイアウトを作ることもできます。もちろんCSSでレスポンシブ化もOK。
<figure>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</figure>figureタグがうまく表示されない原因と解決方法
最後にfigureタグがうまく効かない、正しく表示されないなど、不具合の原因と解決方法を紹介します。
figureタグがうまく表示されない原因としては以下のようなことが考えられます。
- 閉じタグを忘れている
- タグの記述ミス
- CSSセレクタの指定ミス
以下で詳しく解説します。
閉じタグを忘れている
figureは閉じタグの省略ができないため、正しく閉じタグを記述する必要があります。
タグの記述ミス
タグ自体の書き方を間違っている場合もうまく表示できない場合があります。
綴りを書き間違っていないか、<>の書き忘れがないかなどを確認しましょう。
<!-- 綴りのミス -->
<figua>...</figua>
<!-- <>の書き忘れ -->
<figure>...</figureCSSセレクタの指定ミス
figureタグにCSSスタイルが効かない場合は先ほどのHTMLコードの書き間違いや、CSSセレクタの指定間違いを確認しましょう。
<figure class="figure_a">
...
</figure>
<style>
.figure_b {
...
}
</style>まとめ
ここまでfigureタグの基本的な使い方からCSSコードを使ったスタイル方法、うまく動かない場合の対処方法を紹介しました。まとめると以下のようになります。
figureタグは本文から参照されるようなコンテンツに使用するfigureタグ自体にSEO効果はないがキャプションを入れることでアクセシビリティ向上が可能figureタグにはほぼどんなHTMLタグでも入れることができる
画像や図表などキャプションを入れたいコンテンツにはpタグやdivタグで作るよりもfigureを使うと便利です。