htmlのブロック要素「figureタグ」とは? 使い方も分かりやすく解説!

この記事は上記のような疑問を解消するものとなっています。

figure要素を利用することで写真、挿絵、図表、コードなどのまとまりを表現できます。

この要素は写真と説明文のまとまりを作りたいときに利用されます。

例えば、figure要素で商品写真を表し、figcaption要素で写真内容について記述していきます。

そこでこの記事ではfigure要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.figure要素とは?

figure要素はイラスト・図・写真・ソースコードなど図表であることを示す際に使用します。

figure要素を使用することによって、コンテンツを一つの単位として区分け可能です。

図表にキャプションや注釈を付けたい場合はfigcaption要素を使用します。

img要素だと写真と検索エンジンも把握できますが、img要素以外だと中々画像と認識することはできません。

そこで誕生したのがfigure要素でした。

この要素をしっかりと理解して使用することで、検索エンジンのクローラーに抽出されやすくなりました。

文章構造が理解しやすくなるのでSEO対策にも役立ちます。

しっかりと理解して正しく使えるようになりましょう!

↓↓↓↓ figcaption要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年6月1日【alt属性との違いは?】htmlのfigcaption要素とは? 使い方・読み方も分かりやすく解説!

2.figure要素の使い方

それではfigure要素の使い方をみていきましょう。

・・・

<figure>
 <img src="top-image.png" alt="トップ画像">
 <figcaption>HTML&CSS辞典のトップ画像です。</figcaption>
</figure>

・・・

上記の例ではfigure要素でトップ画像を表し、figcaption要素でトップ画像についてのキャプションを記述しています。

figure要素に対してfigcaption要素を用いることで構造的に整理できます。

検索エンジンのクローラーに対してもこの要素は役立っています。

クローラーにとってもわかりやすい構造にしておくことで検索順位も変わってきます。

SEO対策の一つにもなるので是非使い方を理解しておきましょう。

3.figure要素とp要素の違い

p要素はparagraphの略で文章の段落を表現するのに利用します。

figure要素を使用していると画像などのコンテンツにp要素を入れていいのかと迷うかと思います。

その際、コンテンツが文脈の一部であるかどうかを確認する必要があります。

p要素内に画像を挿入する際は、文脈としてコンテンツが不可欠である場合であることが多いです。

一方、文脈的にコンテンツがなくても、問題がない場合、figure要素を使うべきです。

↓↓↓↓ p要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年5月31日【SEOに重要!?】pタグの意味は? divタグとの違い・デフォルトスタイルも分かりやすく解説!

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【最短30秒で完了】侍テラコヤの申し込み手順

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1

相談会予約

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント

相談会はオンライン（Google meet）で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2

相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

• エンジニアを取り巻く環境
• 挫折しないための学習の進め方
• プログラミング言語について
• 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

• プログラミング学習に関して
• 転職・副業・起業について

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント