こんにちは。近所の公園を散歩するのが日課になっているサイトウです。
頑張ってコードを書いていて、ふと気づいたらコードがdivだらけになってしまったということ、ありませんか？
divも大切なタグですが、画像の領域を指定することができる便利な「figure」というタグがあります。
今回は、【figure】の
について説明します。figureの使い方がわからない方や、divやpタグとの使い分けにお悩みの方はぜひ読んでみてくださいね。また、SEO対策にも関わってくるので、多くの人に見てもらえるサイト作りを目指す方にもおすすめです。
目次
【figure】とは
【figure】の読み方
フィギュアと読みます。もともとはラテン語の figura（形）という言葉が語源です。
figureを辞書で調べると、「人影、形、形象、形状、容姿、目立つ姿、数字、外観」などたくさんの意味が出てきます。フィギュアスケートのイメージが強い方もいるでしょう。しかし、HTMLのfigureは、画像の領域をまとめるタグなので、図や挿絵という意味だと捉えてください。
【figure】の説明
写真や図表、コードなどをひとまとまりとして扱うタグです。その画像が無くても本文は成り立つが、あるとわかりやすい図表や、補足情報、説明を載せるときに使います。
また、figureタグはHTML5から登場した新しいタグです。Googleなどの検索エンジンやブラウザに「これは画像だ」と認識してもらうために使用します。
divタグばかりを並べてまとまりを作るより、画像やイラスト部分はfigureタグを使うほうが、コードは見やすくなります。この「見やすくなる」ということはとても大切です。
文書構造を分かりやすくすると、Googleの検索エンジンで様々なWebサイトの情報を収集するクローラーが、Webサイトのページを見つけやすくなります。クローラーが収集した情報に基づいて検索結果の順序が決定されるので、文書構造を分かりやすくすることは、基本的なSEO対策の1つです。つまり、figureタグを使用することで、自分のサイトを多くの人に見てもらえる可能性を高めることができるのです。
20
figureタグの用途は？
【figure】で利用できる属性
【figure】では以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| id | 要素に名前をつけ、CSSで装飾をする時に使用します。固有の名前を与えるイメージです。一度しか使えません。 |
| class | 要素に名前をつけ、CSSで装飾をする時に使用します。種別名を与えるイメージです。何度でも使うことができます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 4以降対応 |
| Internet Explorer | 9以降対応 |
| Opera | 11.5以降対応 |
| Safari | 5.1以降対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 6以降対応 |
| Samsung Internet | 完全対応 |
【figure】の基本的な使い方
【figure】の使い方
HTMLの基本の書き方どおりです。figureタグで画像やイラストのURLやファイル名を囲みます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <figure> <img src="ここに画像やイラストのURLやファイル名を入れます"> </figure> </body> </html> |
【figure】と類似する要素との違い
divタグ
「division（仕切り）」という意味です。divはそれ自体に特定の意味をもちませんが、内容をひとまとまりにする時に使用するタグです。divを使用しても問題はありませんが、SEO対策の点から画像やイラストを囲む時はfigureを使用することをお勧めします。
pタグ
「paragragh（段落）」という意味です。文章をひとまとまりにします。figureタグを使用するか、pタグを使用するか迷ったときは、文章と画像の関係に注目しましょう。
文章の一部であり、その画像がないと説明がうまくできない場合はｐタグを使用します。画像がなくても意味は通るが、補足として画像を使いたい場合はfigureタグを使用します。
【figure】の応用的な使い方
「figcaption」という画像の下に説明書きを入れることができるタグがあります。教科書や資料の本文は全く覚えていないのに、写真の下に書かれていた一文は覚えていたという経験はありませんか？図や表の下に文章がある書式は、新聞でもよく見かけますね。
人はなぜか写真やイラストの下に書いてある文字を読んでしまう習性があります。これを利用して、画像に説明文を添えるのがfigcaptionタグです。使い方は下記のようになります。
See the Pen
MWjWWPX by F Saito (@kero23)
on CodePen.
figureタグの中の画像やイラストの下に、figcaptionタグで囲んだ文章を入れます。使い方は簡単ですね。ぜひ効果的な文章を入れて、画像の注目度を高めましょう。
まとめ
いかがでしたか。今回はfigureタグの使い方についてご紹介しました。
まだよくわからないという方も安心してください。最初はうまく整理できない知識でも、使っているうちに体験的にわかることはたくさんあります。figureタグもそんなひとつかもしれません。
まずは実際にfigureタグを使ってみましょう！少しでも参考になればうれしいです。
参考文献：2019年 株式会社かんき出版｜文系でもプログラミング副業で月10万円稼ぐ！【著】日比野 新
