HTMLで追加されたfigureを使う方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで追加されたfigureを使う方法について解説しています。figureはHTML5で追加されたタグで、複数のコンテンツをひとつのまとまりとして扱うことができます。具体的な利用例について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで追加されたfigureを使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

figureを使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

figureとは

figureとはHTMLの中で、写真や図表、コードなどのまとまりとして扱うタグです。

HTML5から、図表を掲載する目的で使用することが可能になりました。

このタグを使用することによって、以前よりもコンテンツを一つの単位として区分け可能です。

そして、ブラウザや検索エンジンのクローラーに識別・抽出されやすくなったといえるでしょう。

 

 

figureを使用できる場面

部分的に参考資料としての画像を掲載する場面や資料を補足説明のための挿画、注釈の図などにて、下記の記述が多用されます。

これまでは、ブロックレベル要素の代表格であるdivタグやpタグ、もしくは、dlタグが慣習的に多用されていました。

しかし、これはfigureタグに置き換えることができます。

以下、サンプルコードとなります。

divタグやpタグを使用しても文法の規則の違反には該当しません。

しかし、それよりもfigureタグを使用するべき理由として、複雑さのあるHTMLの構造が簡素になることが挙げられます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

figureを使って図表を整理しよう

画像やイラストなどの呼称、あるいは、説明文も掲載する場合、これまでは、pタグやspanタグにて定義されていました。

また、これらのタグに対してfigcaptionタグを用いることで構造的に整理できます。

そのため、figureタグの子要素として使用することが可能です。

HTMLとして簡素な構造は、CSSによる装飾が施しやすくなるといったメリットがあります。

また、規則正しく法則性のあるHTMLの構造は、プログラムによる処理に適しており、サービスに活用されやすくなります。

figureを活用し、HTMLの内部を簡潔にまとめ有効に使用していきましょう。

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLで追加されたfigureの使用方法がよく分かったので良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。