CSS辞典 tab-sizeプロパティの解説
タブの表示幅を指定する「tab-sizeプロパティ」の使用方法を記載
対応バージョン:CSS3/2.1
対応ブラウザ
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome](https://kcfran.com/wp-content/uploads/2022/05/crome_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox](https://kcfran.com/wp-content/uploads/2022/05/firefox_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari](https://kcfran.com/wp-content/uploads/2022/05/safari_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge](https://kcfran.com/wp-content/uploads/2022/05/msedge_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie](https://kcfran.com/wp-content/uploads/2022/05/msie_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera](https://kcfran.com/wp-content/uploads/2022/05/opera_icon.png)
初期値 | 8 |
適用される要素 | ブロックレベル要素 |
モジュール | CSS Fonts Module Level3 |
継承 | あり |
概要・使用方法
{tab-size: 幅;}
tab-sizeプロパティは、タブの表示幅を指定します。このプロパティの指定が適用されるのはpre要素、またはwhite-spaceプロパティの値が「pre」、または「pre-wrap」が指定されている場合に使用できます。
任意の数値 | タブの幅を任意の数値で指定します。 |
任意の数値+単位 | 単位付きの正の数で指定します |
指定可能な単位
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>tab-sizeプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.sample1{
tab-size:4;
}
</style>
</head>
<body>
<h1>tab-size調整なし</h1>
<pre>Dangerous creatures on a summer day, good jellyfish</pre>
<h1>tab-size調整あり</h1>
<pre class="sample1">Dangerous creatures on a summer day, good jellyfish</pre>
</body>
</html>
tab-size調整なし
Dangerous creatures on a summer day, good jellyfish
tab-size調整あり
Dangerous creatures on a summer day, good jellyfish
chromeブラウザ実行結果
![chrome](https://kcfran.com/wp-content/uploads/2022/06/image-320.png)
Firefox ブラウザ実行結果
![Firefox](https://kcfran.com/wp-content/uploads/2022/06/image-321.png)
edgeブラウザ実行結果
![edge](https://kcfran.com/wp-content/uploads/2022/06/image-322.png)
operaブラウザ実行結果
![opera](https://kcfran.com/wp-content/uploads/2022/06/image-323.png)