Tab

このプラグインを使うと、複数の情報ブロックをタブで切り替えて表示できます。
タブをクリック（またはタップ）するだけで、必要な情報にすばやくアクセスでき、無駄なスクロールを減らせます。

特に以下のような用途を想定しています。

• 長文や複数の説明をカテゴリ分けして、すっきり整理したいとき
• キャラクター別・作品別など、テーマによって内容を切り替えたいとき
• ページ内をスクロールして行ったり来たりせず、すぐに目的の情報にたどり着いてほしいとき

このように、タブを活用することで、情報を1つのページ内に効率よく集約しながら、ユーザーが迷わずアクセスできるスマートな構成を実現できます。

基本構文

#tab_container([left|justify]){{{
#tab_content(Tab Name 1){{
ここにタブ1の内容を書きます。
}}
#tab_content(Tab Name 2){{
ここにタブ2の内容を書きます。
}}
}}}

• #tab_container … タブ全体を囲むコンテナです。
  • [left]：タブを左寄せ（※デフォルト）
  • [justify]：タブを均等幅で配置

• #tab_content(タブ名) … 各タブのラベルと中身を定義します。
  • タブの並び順は、上から書いた順に表示されます。
  • 最初に定義されたタブの内容が、初期表示として表示されます。

表示例 左寄せ（デフォルト）

#tab_container{{{
#tab_content(概要){{
このWIKIは〇〇についてまとめています。
}}
#tab_content(更新履歴){{
- 2025-06-01: 初版作成
- 2025-07-02: タブ機能を追加
}}
}}}

表示例 均等幅のタブ配置

#tab_container(justify){{{
#tab_content(キャラ){{
キャラクター一覧など
}}
#tab_content(武器){{
武器の種類など
}}
}}}

応用的な使い方 タブの入れ子（ネスト）

タブの中にさらにタブを入れる入れ子構造も可能です。

#tab_container{{{{
#tab_content(メイン1){{
メイン1の内容
}}
#tab_content(メイン2){{
メイン2の内容

#tab_container{{{
#tab_content(サブ1){{
サブタブの1
}}
#tab_content(サブ2){{
サブタブの2
}}
}}}
}}
}}}}

• メイン2 を選択すると、その中に サブ1・サブ2 のタブが表示されます。
• 表示切り替えは内側・外側で独立しています。

※ネストは可能ですが、入れ子が深くなると可読性や操作性が低下するため、適度な階層に留めてください。

仕様上の注意点

ラベルの書式と特殊記法

• #tab_content(ラベル名) のラベルには、インライン書式（例：太字, 文字サイズなど）を使用できます。
• また、&fa() や &color() などのインラインプラグインを使った装飾も利用可能です。

#tab_container{{{
#tab_content("&fa(fa-brands fa-discord, #5865f2); &color(#5865f2){discord};"){{
Discordの案内ページです。
}}
}}}

• カンマ（,）が含まれるラベルを使用する場合、括弧内全体をダブルクォート " で囲んでください。
  これは、引数の区切り文字であるカンマと内部構文の干渉を防ぐためです。
• 使用するプラグインや書き方によって、ラベル表示が崩れる場合があります。自己責任でご利用ください。

横幅とスクロール挙動

• タブが横幅いっぱいになると、自動的に省略記号（…）が付加されます。
• 折り返し表示は行われず、タブエリアには横スクロールバーが表示されます。
• スマートフォンなどの狭い画面では、スクロールしないと一部のタブが見えない可能性があります。

ラベルが省略された例

タブ数が多すぎる例（非推奨）

タブ数の制限と推奨

• タブの数に技術的な制限はありませんが、多数のタブを並べる構成は推奨していません。
• タブが多すぎると、操作性や視認性が著しく低下する可能性があります。
• PCやスマートフォンでも快適に使えるよう、以下の数を目安にしてください。
  • PCの場合：おおよそ 5～7個程度
  • スマートフォンの場合：おおよそ 3～5個程度
• タブ内の高さ（内容のボリューム）も重要です。
  • 高さがありすぎると、結局スクロールが必要になり、タブを切り替えた際にも再び上からスクロールする必要があります。
  • 各タブの内容は適度な高さに保つことで、全体の操作性が向上します。
• 大量のタブを作成した結果、使いにくくなった場合や表示が崩れた場合については、サポート対象外となります。

出力構造と負荷について

• タブで切り替える形式であっても、全てのタブの内容はページ読み込み時点で出力されています。
• 表示上は非表示でも、HTMLには全タブ分の情報が含まれるため、転送量・システムの負荷は内容の分だけ発生します。
• タブを使っても表示軽量化にはなりません。軽量化したい場合は、内容をページごとに分割するなどの工夫をおすすめします。