タブ – Hextra

タブ

例

macOS: Apple が提供するデスクトップオペレーティングシステム。

Linux: オープンソースのオペレーティングシステム。

Windows: Microsoft が提供するデスクトップオペレーティングシステム。

使用方法

デフォルト

{{< tabs >}}

  {{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
  {{< tab name="YAML" >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
  {{< tab name="TOML" >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}

{{< /tabs >}}

選択インデックスの指定

selected プロパティを使用して選択するタブを指定します。

{{< tabs >}}

  {{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
  {{< tab name="YAML" selected=true >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
  {{< tab name="TOML" >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}

{{< /tabs >}}

YAML タブがデフォルトで選択されます。

JSON: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。

YAML: YAML は人間が読みやすいデータシリアライゼーション言語です。

TOML: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。

Markdown の使用

コードブロックを含む Markdown 構文もサポートされています:

{{< tabs >}}

  {{< tab name="JSON" >}}
  ```json
  { "hello": "world" }
  ```
  {{< /tab >}}

  ... 他のタブも同様に追加

{{< /tabs >}}

{ "hello": "world" }

hello: world

hello = "world"

タブの同期

同じ name リストを持つタブは同期できます。有効にすると、タブを選択すると同じ name を持つ他のタブも更新され、ページ間で選択が記憶されます。

hugo.yaml の page セクションでグローバルに有効にします:

hugo.yaml

params:
  page:
    tabs:
      sync: true

これを有効にすると、以下の 2 つのタブブロックは常に同じ選択項目を表示します:

{{< tabs >}}

  {{< tab name="A" >}}A の内容{{< /tab >}}
  {{< tab name="B" >}}B の内容{{< /tab >}}

{{< /tabs >}}

{{< tabs >}}

  {{< tab name="A" >}}2 番目の A の内容{{< /tab >}}
  {{< tab name="B" >}}2 番目の B の内容{{< /tab >}}

{{< /tabs >}}

最終更新日 1月 19, 2026

その他サイトのデプロイ