CSS3: tab-size プロパティ - タブ幅の指定

■ 概要

項  目説  明
記述形式 セレクタ {tab-size: }
値 の形式 数値(整数)数値(長さ)
初 期 値 8
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 ブロックコンテナ
継  承 する

■ 解説

tab-size プロパティ は,タブの幅 を指定します。

指定できる値の形式は,以下のとおりです。

説  明
数値(整数) 半角ブランクの場合のスペース幅の整数倍のスペースがタブに割り当てられます。
数値(長さ) タブ幅を単位付きの長さで指定します。

タブの幅を長さで指定する場合には,次のような単位が使えます。

単位説  明
px
px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを1とする単位です。 
ex
ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。

■ 使用例(  tab-size プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!--
   div.sample {
      margin: 10px;
      font-size: 20px;
   }
   .tab1 { tab-size: 2; }
   .tab2 { tab-size: 4; }
   .tab3 { tab-size: 16; }
   .tab4 { tab-size: 10px; }
   .tab5 { tab-size: 3em; }
   .tab6 { tab-size: 5ex; }
-->
</style>
HTML
<body> ~ </body>
<div class="sample">
   <pre class="tab1">タブ幅 2:	テキスト	テキスト</pre>
   <pre class="tab2">タブ幅 4:	テキスト	テキスト</pre>
   <pre class="tab3">タブ幅 16:	テキスト	テキスト</pre>
   <pre class="tab4">タブ幅 10px:	テキスト	テキスト</pre>
   <pre class="tab5">タブ幅 3em:	テキスト	テキスト</pre>
   <pre class="tab6">タブ幅 5ex:	テキスト	テキスト</pre>
</div>

ブラウザー 表示例 (未対応のブラウザーでは正しく表示されません)
タブ幅 2:	テキスト	テキスト
タブ幅 4:	テキスト	テキスト
タブ幅 16:	テキスト	テキスト
タブ幅 10px:	テキスト	テキスト
タブ幅 3em:	テキスト	テキスト
タブ幅 5ex:	テキスト	テキスト

■ 備考

【参考ページ】