tab-size
tab-size はタブ文字を表示する際のスペース数または幅を指定する。デフォルトは 8。コードブロック（<pre>、<code>）でタブのインデント幅を制御するのに使われる。
概要
tab-size はタブ文字を表示する際のスペース数または幅を指定する。デフォルトは 8。コードブロック（<pre>、<code>）でタブのインデント幅を制御するのに使われる。
対応ブラウザ
デスクトップ
Chrome 42+
Edge 79+
Safari 13.1+
Firefox 91+
モバイル
Chrome Android 42+
Safari iOS 13.4+
Firefox Android 91+
基本構文
CSS
/* スペース4つ分のタブ幅 */
pre {
tab-size: 4;
-moz-tab-size: 4; /* Firefox 91 未満用 */
}
/* 固定幅での指定 */
code {
tab-size: 2em;
}実務での使いどころ
-
コードブロックの表示
技術ブログやドキュメントサイトで、コードのインデント幅をプロジェクトの規約に合わせて表示する。
注意点
- white-space が pre または pre-wrap でないとタブ文字は通常のスペースとして扱われる。
アクセシビリティ
- タブ幅が極端に大きいとコードの可読性が下がる。一般的な 2 または 4 を推奨。