タブの文字数（幅のサイズ）をCSSで指定する

タブの幅を指定する

サイトのページ上にコードを記載するときに、pre要素やcode要素で囲ってコードを記述することがあります。
コードには表記を整えるためのインデントとしてタブが入ることがよくありますが、タブ入力はブラウザの標準の表示ではやや広めに表示されます。

そこで今回は、tab-sizeプロパティでタブの文字数を指定する方法を解説します。

tab-indexプロパティでタブの幅を変更

次のようなHTMLにおいて、code要素内に含まれるコードのインデントであるタブの幅を、tab-sizeプロパティを使って変更します。

HTML コード例

<pre><code>.sample {
  color: black;
}</code></pre>

タブの幅は初期値では8文字分です。
その幅を4文字分に指定します。
なお、firefoxについてはベンダープレフィックス「-moz-」をつけて指定する必要がある点に注意してください。

CSS コード例

code {
  tab-size: 4;
  -moz-tab-size: 4;
}

ブラウザで表示すると、次のようにタブの幅が縮小されます。

tab-sizeプロパティは0以上の整数のみ指定することができます。
「-4」などの負の値や、「0.5」など浮動小数点数は指定できません。