ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
figure 要素とは
<figure> は HTML5 で追加された意味タグ (semantic element) です。本文から独立した図表・画像・コードリスト・引用・動画などをひとまとまりにマークアップし、必要に応じて <figcaption> でキャプションを付けるために使います。
W3C の定義では「本文から切り出して別ページに移動しても、本文の意味が壊れない自己完結したコンテンツ」を表すとされています。「本文に番号付きで参照される図」がイメージとして近いです。
基本構文
<figure>
<img src="chart.png" alt="2025年の売上推移グラフ">
<figcaption>図1: 2025年の四半期別売上推移</figcaption>
</figure>
<figcaption> は <figure> の先頭または末尾に 1 つだけ置きます。省略しても文法的には OK で、その場合はキャプションなしの図扱いになります。
使える中身のバリエーション
画像
<figure>
<img src="diagram.svg" alt="システム構成図">
<figcaption>図2: マイクロサービス構成図</figcaption>
</figure>
コードリスト
<figure>
<pre><code>function hello() {
console.log("Hello, World!");
}</code></pre>
<figcaption>リスト1: 最小の JavaScript 関数</figcaption>
</figure>
引用
<figure>
<blockquote>
<p>Talk is cheap. Show me the code.</p>
</blockquote>
<figcaption>— Linus Torvalds</figcaption>
</figure>
複数画像のグループ
<figure>
<img src="before.png" alt="リファクタ前のコード">
<img src="after.png" alt="リファクタ後のコード">
<figcaption>図3: リファクタリング前後の比較</figcaption>
</figure>
img をそのまま置くのとどう違うか
機械的なレンダリング結果は変わりませんが、意味付けが変わります。
| 書き方 | 意味 | 検索エンジン / 支援技術への伝わり方 |
|---|---|---|
<img> 単独 | 段落内のインライン画像 | 本文の挿絵程度 |
<figure><img></figure> | 独立した図 | キャプション付きの「図表」と認識される |
figure を使うべきでないケース
- 装飾画像 — ヘッダー背景、ボタンアイコンなど。
<div>や CSS 背景に。 - 本文と密結合した画像 — 「次の画像のように〜」と本文がその画像に依存している場合は、独立性がないので figure は不適切。
- レイアウト目的のラッパー — 中央寄せしたいだけなら
<div class="center">で十分。
よくある質問
Q: figcaption を画像の上に置きたい
A: <figure> 内の先頭に置けば構造的に上、末尾に置けば下になります。仕様上はどちらも 1 つだけ許可。
Q: img の alt と figcaption の使い分けは?
A: alt は画像の代替テキスト(画像が表示できない時に何が描かれているか)、figcaption はキャプション(「図1: 〜」のような本文中の説明)。役割が違うので両方書きます。
Q: figure をネストできる?
A: 仕様上は禁止されていませんが、独立した図の中に別の独立した図、という構造はほぼ意味を成さないので非推奨です。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Unreal Engine AI MoveTo 完全ガイド(NavMesh / AIController / Behavior Tree) 2026-06-11 07:10:02
- Laravel ルート認証化完全ガイド — middleware と Gate 2026-06-11 07:10:02
- EJB完全ガイド(Stateless/Stateful/Singleton/MDB/CDIとの違い/Spring代替) 2026-06-11 07:10:02
- CDI完全ガイド(Inject/Produces/Qualifier/Scope/Spring DIとの違い) 2026-06-11 07:10:02
- DI(依存性注入)完全ガイド(Dependency Injection / IoC / Spring / CDI / コンストラクタ・セッター注入) 2026-06-11 07:10:02
- TCP/IP リンク層 (ネットワークインターフェース層) 完全ガイド 2026-06-11 07:10:02
- Apache .htaccess でベーシック認証を設定する手順(.htpasswd / htpasswd / AuthType Basic / トラブルシュート) 2026-06-11 07:10:02
- Python アプリのローカル独立配布完全ガイド(PyInstaller / wheel / Docker) 2026-06-11 07:10:02
- git 用語一覧完全リファレンス(Repository / HEAD / Branch / Rebase / Stash 他) 2026-06-11 07:10:02
- EJS テンプレートの共通化 (include) 完全ガイド 2026-06-11 07:10:02
- JAX-RS 完全ガイド(Java EE で REST API 開発 / @Path / @GET / Jersey / RESTEasy) 2026-06-11 07:10:02
- shutdown コマンド完全ガイド(Linux / Windows / systemd の使い分け) 2026-06-11 07:10:02
- Laravel のインストール手順まとめ — composer / Sail / Valet / Herd と初期設定 2026-06-11 07:10:02
- Python set 入門 — 作成方法、frozenset、内包表記、リスト重複削除 2026-06-11 07:10:02
- git log コミット履歴確認完全ガイド — oneline/graph/stat/blame 2026-06-11 07:10:02
コメントを削除してもよろしいでしょうか?