tab-size:タブ(tab)文字の表示幅を指定する
初期値 | 8 |
適用対象 | ブロックコンテナ |
継承 | する |
アニメーション | <length>値 |
対応ブラウザ | caniuseで確認 |
tab-sizeプロパティの説明
tab-size
は、タブ(tab)文字の表示幅を指定します。タブ文字はユニコードのU+0009
に該当します。主にタブはプログラミングやマークアップのインデントで使われます。
tab-sizeに指定できる値
- <integer>
- タブの幅を空白文字(
U+0020
)の倍数で示します。負の値は使用できません。初期値は8
です。 - <length>
- タブの幅をCSSで使用できる長さを表す単位付きの数値で表します。負の値は使用できません。
tab-sizeの使い方とサンプル
tab-size
プロパティの構文は以下の通りです。
CSS
/* <integer>値 */
tab-size: 0;
tab-size: 2;
tab-size: 4;
/* <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でタブを表現するには特殊文字の表記を使います。ここでは、数値文字参照の一種である	
を使って画面にタブを表示します。
表示確認
CSS
.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_0 {
tab-size: 0;
}
#ts_2 {
tab-size: 2;
}
#ts_4 {
tab-size: 4;
}
HTML
<div class="samp_box">
<p id="ts_0"><span>	</span>tab-size: 0;</p>
<p id="ts_2"><span>	</span>tab-size: 2;</p>
<p id="ts_4"><span>	</span>tab-size: 4;</p>
</div>
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 | ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する |