【たぶ】

タブとは？

最終更新: 2026年10月4日

💡 複数のコンテンツを「切り替えて表示する」UI部品、ブラウザタブが典型例

複数の内容を切り替えて表示するUI部品。ブラウザのページ、エディタのファイル、設定画面などで使う。同じ語は水平タブ文字（U+0009）も指し、Tabキーの動作は操作する画面によって異なる。

📌 このページのポイント

上はタブパネルの切り替え例です。Tabキーの動作は画面や設定によります。

ひよこ

タブって何？

ペンギン先生

見出しを選んで対応する内容を表示するUIだよ。ブラウザではページ、エディタではファイル、設定画面では「一般」「詳細」などを切り替える。タブパネルでは選んだ内容を表示し、それまでのパネルを隠すんだ

ひよこ

タブ文字ってUIのタブと別物なの？

ペンギン先生

別の意味だよ。水平タブ文字はU+0009で、JavaScriptではバックスラッシュとtの組み合わせで表す。インデントやTSVの区切りに使う。Tabキーを押せば必ずその文字が入るわけではなく、エディタの設定や操作している画面によって動作が違うよ

ひよこ

ブラウザタブが増えると重くなるのはなぜ？

ペンギン先生

開いたページの処理やメモリ使用が増える場合があるからだよ。ただし1タブが必ず1プロセスとは限らない。Chromiumではサイトやフレーム、関連するページなどに応じてプロセスを分けたり共有したりする。ページの内容や動作によって負荷も変わるんだ

ひよこ

Tabキーってインデント以外に使い道あるの？

ペンギン先生

Webページではリンクや入力欄などへフォーカスを移す操作にも使うよ。HTMLのtabindexはフォーカス対象や順序に関係するけれど、正の値で順序を組み替えるより、自然な文書順と0・−1を使う案内がある。WAI-ARIAのタブパターンではTabで一覧に入り、左右矢印でタブを移るんだ

ひよこ

ブラウザのタブをグループ分けできるって聞いたけど？

ペンギン先生

Chromeにはタブグループがあり、名前や色を付けて整理できるよ。保存や再表示などもできるので、使う端末や同期の設定に合う案内を確認しよう。画面でグループにまとめることと、プロセスの分け方は別の仕組みだよ

まとめ：ざっくりこれだけ覚えればOK！

「タブ」って出てきたら「内容を切り替えるUIの見出し、または水平タブ文字」と思えばだいたいOK！

📖 おまけ：英語の意味

「Tab」＝つまみ・見出しの突起

💬 UIのタブは、紙の書類を分ける見出しのようなイメージだよ。文字の水平タブや、操作に使うTabキーは、文脈を分けて考えよう

参考資料