tab-size

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS の tab-size プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

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

/* <length> 値 */
tab-size: 10px;
tab-size: 2em;

/* グローバル値 */
tab-size: inherit;
tab-size: initial;
tab-size: unset;
初期値8
適用対象ブロックコンテナー
継承あり
計算値指定された整数値または絶対的な長さ
アニメーションの種類length

構文

値

<integer>
タブの空白文字の文字数です。正の数でなければなりません。
<length>
タブの幅です。正の数でなければなりません。

形式文法

<integer> | <length>

例

pre {
  tab-size: 4; /* スペース 4 つ分となります */
}

pre {
  tab-size: 0; /* インデント除去 */
}

pre {
  tab-size: 2; /* タブの幅をスペース 2 個分に設定 */
}

仕様書

仕様書 状態 備考
CSS Text Module Level 3
tab-size の定義		 草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
tab-sizeChrome 完全対応 21
補足
完全対応 21
補足
補足 This property is not yet animatable.
Edge 完全対応 79
補足
完全対応 79
補足
補足 This property is not yet animatable.
Firefox 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 See bug 737785 for the status of unprefixing this property.
補足 Before Firefox 53, this property was not animatable.
IE 未対応 なしOpera 完全対応 15
完全対応 15
完全対応 10.5
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 6.1WebView Android 完全対応 4.4Chrome Android 完全対応 25
補足
完全対応 25
補足
補足 This property is not yet animatable.
Firefox Android 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 See bug 737785 for the status of unprefixing this property.
補足 Before Firefox 53, this property was not animatable.
Opera Android 完全対応 14
完全対応 14
完全対応 11
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
補足
完全対応 1.5
補足
補足 This property is not yet animatable.
<length>Chrome 完全対応 42Edge 完全対応 79Firefox 完全対応 53IE 未対応 なしOpera 完全対応 29Safari 未対応 なしWebView Android 完全対応 56Chrome Android 完全対応 42Firefox Android 完全対応 53Opera Android 完全対応 29Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報