tab-size：タブ（tab）文字の表示幅を指定する

初期値 8
適用対象 ブロックコンテナ
継承 する
アニメーション <length>値
対応ブラウザ caniuseで確認

tab-sizeプロパティの説明

CSSのtab-sizeプロパティは、タブ（tab）文字の表示幅を指定します。タブ文字はユニコードのU+0009に該当します。タブは主にプログラミングやマークアップのインデントで使われます。

tab-sizeに指定できる値

<integer>
タブの幅を空白文字（U+0020）の倍数で示します。負の値は使用できません。初期値は8です。
<length>
タブの幅をCSSで使用できる長さを表す単位付きの数値で表します。負の値は使用できません。

tab-sizeの使い方とサンプルコード

tab-sizeプロパティの構文は以下の通りです。


/* <integer>値 */
tab-size: 2;
tab-size: 4;
tab-size: 8;

/* <length>値 */
tab-size: 16px;
tab-size: 4ex;
tab-size: 1rem;

/* グローバル値 */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: unset;

tab-sizeの実例

それでは実際にtab-sizeプロパティの書き方を見ていきましょう。以下の例は、タブの範囲に色を付けて視覚的に把握できるようにした上で、それぞれのタブのサイズを変更したものです。タブによって確保されるホワイトスペースを、そのまま画面に表示させるためにはwhite-spaceプロパティの値をpreにする必要があります。

HTMLでタブを表現するには特殊文字の表記を使います。ここでは、数値文字参照の一種である&#0009;を使って画面にタブを表示します。


<div class="samp_box">
	<p id="ts_2"><span>&#0009;</span>tab-size: 2;</p>
	<p id="ts_4"><span>&#0009;</span>tab-size: 4;</p>
	<p id="ts_8"><span>&#0009;</span>tab-size: 8;</p>
</div>


.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > p {
	margin: 1rem 0 0;
	padding: .5rem;
	background: #fff;
	white-space: pre;
}
p > span {
	border: 1px solid rgba(255, 0, 0, 0.5);
	background-color: rgba(255, 0, 0, 0.3);
}
#ts_2 {
	tab-size: 2;
}
#ts_4 {
	tab-size: 4;
}
#ts_8 {
	tab-size: 8;
}

tab-sizeに関連するCSSプロパティ

文字揃え・段落の振る舞い
direction 文字表記の方向（左右）を指定する
hanging-punctuation 句読点、括弧、引用符などの禁則処理を指定する
letter-spacing 文字同士の間隔を指定する
line-break 句読点や記号などの禁則処理を指定する
line-height 行の高さを指定する
tab-size タブ（tab）文字の表示幅を指定する
unicode-bidi Unicodeのアルゴリズムを上書きして文字表記の方向を変更する
white-space 要素内のホワイトスペースの扱い方を指定する
word-break 要素の幅を超過するテキストの自動改行について指定する
word-spacing 単語同士の間隔を指定する
word-wrap インライン要素に対して単語の途中で改行処理を行うかどうかを指定する
writing-mode テキストの書字方向やブロックのフローを指定する
widows ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する
© weblan3.com