【44】タブ文字の幅を決める tab-sizeプロパティ

tab-sizeプロパティは文字通り「タブ（Tabキーを押してできるスペース）」の「幅」を決めます。

ですのでこのプロパティは、
・<pre>要素と <code>要素を使ってソースコードを表示する時
・CSS の「white-space: pre」「white-space: pre-wrap」でテキストを表示する時
に使います。
要は「タブ」がそのまんま表示される時に「タブ」の表示幅を自由に設定できるプロパティです。

<pre>要素と <code>要素については、
[31] code要素 と pre要素 でソースコードを表示しよう
CSS の「white-space: pre」「white-space: pre-wrap」については、
【37】空白を詰めるかどうか決める white-spaceプロパティ をご覧ください。

参考：
・CSS Text Module Level 3 | W3C Working Draft
・tab-size - CSS | MDN

tab-sizeプロパティの値

tab-sizeプロパティの値は以下のものがあります。

tab-sizeプロパティの値
単位なし数値	単位無しで数値で「半角スペース数」を指定。8 がデフォルト値。 マイナスの値は指定できません。
単位あり数値	「px」「em」などの単位を付けて幅を指定します。 マイナスの値は指定できません。 （この値は W3C で「at-risk（リスクが有るので勧告候補で削除されるかも）」扱いになっています。）
グローバル値	tab-size: inherit; 親の値を継承（コレ書かなくても継承するけど） tab-size: initial; 継承した親の値を解消しデフォルト値に戻す tab-size: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	すべての要素

このプロパティは、Chrome、Opera は完全対応。Firefox は「ベンダープレフィックス（-moz-）」付きで対応。
Safari（iOS Safariも）は「単位あり数値」には未対応です。
IE11, Edge は対応していません。（2018年11月時点）
参考：Can I Use - tab-size

tab-sizeプロパティの指定サンプル

tab-sizeプロパティの値を使ってみます。
サンプルの白地の部分は <pre>、<code>要素。その行頭の空白部分がタブです。
フォントサイズは16px（font-size:1rem）で作っています。

tab-size: 未指定（ = 8）

	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ

tab-size: 4

	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ

tab-size: 3em

	←タブ1つ
      ←比較のために半角スペース6個
		←タブ2つ

tab-size: 16px

	←タブ1つ
  ←比較のために半角スペース2個
		←タブ2つ

サンプルのソースコードはこちら。

<div class="mihon">
<b>tab-size: 未指定（ = 8）</b>
<pre><code>	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ</code></pre>
</div>

<div class="mihon" style="-moz-tab-size:4;tab-size:4">
<b>tab-size: 4</b>
<pre><code>	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ</code></pre>
</div>

<div class="mihon" style="-moz-tab-size:3em;tab-size:3em">
<b>tab-size: 3em</b>
<pre><code>	←タブ1つ
      ←比較のために半角スペース6個
		←タブ2つ</code></pre>
</div>

<div class="mihon" style="-moz-tab-size:16px;tab-size:16px">
<b>tab-size: 16px</b>
<pre><code>	←タブ1つ
  ←比較のために半角スペース2個
		←タブ2つ</code></pre>
</div>
<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em;
	}
.mihon b {
	display:block;
	color:#579961}
.mihon pre {
	background:white;
	padding:0}
</style>

ソースコードをよく掲載するサイトなら、タブのサイズを変える必要があるときには便利ですね。
一般的なウェブサイトでは、この tab-sizeプロパティはあまり使わないかもな〜？

次回予告

さて次回からは、ライティングモードについて見ていきましょう。

ライティングモードは、W3C の CSS Writing Modes Level 3 でまとめられていて、 テキストの向き（横書き・縦書き・左から右・右から左 など）を指定するためのプロパティ群です。

次回はまずは、縦書きの表示もできる writing-modeプロパティを使ってみよう。