HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のfigureタグで自己完結型コンテンツを作成する方法

HTML5では、<figure>タグを使用することで、画像や図表、コードスニペットなど、本文から独立した「自己完結型（セルフコンテインド）」のコンテンツを簡単に作成できます。このタグでマークアップされた要素は、文書の流れから切り離しても意味が通るように設計されているため、セマンティックなWebページ構築に役立ちます。

figureタグのポイント

  • 画像・図表・動画・コードなど、単独で参照可能なコンテンツに適しています。
  • <figcaption>タグと組み合わせると、コンテンツにキャプション（説明文）を追加できます。
  • ブラウザの標準スタイルでは左右に余白が設定されるため、必要に応じてCSSで調整しましょう。

使用例

以下のコードを実行すると、HTML5における<figure>タグの基本的な実装方法を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML figure Tag</title>
   </head>
   
   <body>
      <h2>Tutorialspoint Coding Ground</h2>
      <figure>
         <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"/>
         <figcaption>Coding Groundのホーム画面</figcaption>
      </figure>
   </body>
</html>

このように<figure>タグの中に画像を配置し、<figcaption>で説明文を加えることで、検索エンジンやスクリーンリーダーにも内容が伝わりやすい、アクセシビリティの高いマークアップが実現できます。

  1. HTMLとCSSでフローティングレイアウトを作成する方法をわかりやすく解説

    フローティングレイアウトとはHTMLでフローティングレイアウトを作成するには、CSSのFloat（フロート）プロパティを使用します。Webサイトでは、コンテンツを見やすく表示するために複数のカラム（段組み）構成がよく採用されますが、CSS Floatはそのマルチカラムレイアウトを実現する手法のひとつです。フローティングレイアウトは、Webサイトのレイアウト設計で古くから広く使われている定番の手法です。要素にfloat: left;やfloat: right;を指定することで、要素を左右に寄せ、その横に他の要素を回り込ませることができます。以下は、ヘッダー・ナビゲーション・本文・フッターで構成さ

  2. HTML5 SVGで角丸の長方形を作成する方法【rx・ry属性の使い方】

    SVG（Scalable Vector Graphics）は、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語です。記述されたXMLは、SVGビューアによって描画されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できるようになっています。HTMLのSVGで長方形を描画するには、<rect>要素を使用します。さらに、角を丸くしたい場合はrx属性とry属性を指定します。この2つの属性に値を設定することで、長方形の四隅が滑らかに丸められます。実装例以下のコードを実行すると、HTML5 SVGで角