Hugoでのfigure

shortcodeが用意されているので、それに合わせて記述することで利用できます。

下記のサンプルでは、ソースとなる画像ファイルの指定、altとcaptionのみ指定しましたが、他にも表示位置、サイズ、リンク等が指定できます。
詳しくはこちらで。

🔗 Figure shortcode

表示サンプル

日本の初夏

日本の初夏をimage FXに作ってもらいました。

コードサンプル

Hugoでの書き方
1
2
3
4
5

{{< figure
        src="2025-06-30-image_fx.webp"
        alt="日本の初夏"
        caption="日本の初夏をimage FXに作ってもらいました。"
>}}
htmlではこうなります。
1
2
3
4
5

<figure>
    <img loading="lazy" src="2025-06-30-Image_fx.webp" alt="日本の初夏"> <figcaption>
            <p>日本の初夏をimage FXに作ってもらいました。</p>
        </figcaption>
</figure>

今後

SEOやアクセシビリティを考えると、今後はfigureを積極的に使ったほうが良いのかもね。
利用しやすくするため、VS Codeのスニペットも用意しましょうかね。

遠い昔に書いた記事。
🔗 VSCode のスニペットを使ってみる

おまけ（Notion AI）

以下、Notion AIに書いてもらいました。

figureタグとは

figureタグは、HTML5で導入された要素で、独立したコンテンツ（イラスト、写真、図表、コードなど）をグループ化するために使用されます。通常、figcaptionタグと組み合わせて使用され、コンテンツに対するキャプションや説明を提供します。

figureタグの基本的な構造

1
2
3
4

<figure>
    <img src="example.jpg" alt="説明文">
    <figcaption>これは図の説明文です</figcaption>
</figure>

figureタグの特徴

  • 自己完結型コンテンツ： figureタグ内のコンテンツは、メインコンテンツから参照されることが多いですが、本文から切り離しても意味が通じる独立したコンテンツとして扱われます。
  • 位置の柔軟性： figureタグで囲まれたコンテンツは、文書内の特定の位置に配置する必要がなく、必要に応じて付録として移動させることもできます。
  • 様々なコンテンツに対応： figureタグは画像だけでなく、図表、図解、コードブロック、引用など、様々な種類のコンテンツをグループ化できます。

figcaptionタグについて

figcaptionタグは、figureタグ内で使用され、figureの内容に対するキャプションや説明を提供します。

  • 位置の自由度： figcaptionは、figure内の最初または最後に配置できます。
  • オプション： figcaptionの使用は必須ではありませんが、コンテンツの理解を助けるために推奨されます。

figureタグの実用例

画像とキャプション

1
2
3
4

<figure>
    <img src="mountain.jpg" alt="富士山の風景">
    <figcaption>美しい富士山の夏の風景</figcaption>
</figure>

複数の画像をグループ化

1
2
3
4
5
6
7

<figure>
    <img src="spring.jpg" alt="春の風景">
    <img src="summer.jpg" alt="夏の風景">
    <img src="autumn.jpg" alt="秋の風景">
    <img src="winter.jpg" alt="冬の風景">
    <figcaption>四季の移り変わり</figcaption>
</figure>

コードブロック

1
2
3
4
5
6
7
8

<figure>
    <pre><code>
    function greeting() {
      console.log("Hello, World!");
    }
    </code></pre>
    <figcaption>JavaScriptでの基本的な挨拶関数</figcaption>
</figure>

figureタグの利点

  • セマンティックな意味付け： コンテンツに意味的な構造を与え、ウェブページのアクセシビリティを向上させます。
  • スタイリングの容易さ： CSSを使用して、figureとfigcaptionを一貫したスタイルで装飾できます。
  • レスポンシブデザインへの対応： figureタグはレスポンシブデザインに適しており、様々な画面サイズに対応します。
  • 検索エンジン最適化（SEO）： 適切に使用することで、検索エンジンがコンテンツの構造を理解しやすくなります。

ブラウザの互換性

figureタグとfigcaptionタグは、HTML5の一部として導入されたため、ほとんどの現代的なブラウザで十分にサポートされています。Internet Explorer 9以降、Chrome、Firefox、Safari、Edgeなど、主要なブラウザすべてで問題なく使用できます。

まとめ

figureタグは、イラスト、写真、図表、コードなどの独立したコンテンツをグループ化するための強力なHTML5要素です。figcaptionタグと組み合わせることで、コンテンツの理解を深め、ウェブページのアクセシビリティと構造を向上させることができます。

適切に使用することで、コンテンツの意味をより明確にし、ユーザーエクスペリエンスを向上させることができるため、モダンなウェブ開発において重要な要素となっています。