SYNCERのロゴ
アイキャッチ画像

表示されるタブの幅を変更する方法

表示されるタブの幅を指定するには、tab-sizeプロパティを利用します。2017年7月現在、Firefoxではvendor prefixが必要です。

サンプルコード

数値は半角スペースの個数を意味し、それに相当する幅になります。2は、半角スペース2個分の幅という意味です。

pre {
	-moz-tab-size: 2 ;	/* Firefox用 */
	tab-size: 2 ;
}

デモ

指定した場合

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		pre {
			-moz-tab-size: 2 ;	/* Firefox用 */
			tab-size: 2 ;
		}
	</style>
</head>
<body>
	<p>タブ1つが、半角スペース2個分の幅になります。</p>

	<pre>タブ0個
	タブ1個
		タブ2個
			タブ3個</pre>
</body>
</html>

指定しない場合

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		pre {
			
		}
	</style>
</head>
<body>
	<pre>タブ0個
	タブ1個
		タブ2個
			タブ3個</pre>
</body>
</html>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。