項 目 | 説 明 |
---|---|
記述形式 | セレクタ {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とする単位です。 |
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: テキスト テキスト |