表示されるタブの幅を変更する方法
表示されるタブの幅を指定するには、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>
関連記事
- 埋め込みコンテンツをレスポンシブに対応する方法
- YoutubeやGoogle Mapsなどの埋め込みコンテンツを、レスポンシブに対応します。
- 三角形を作る方法
- CSSで三角形を作るには、横幅、高さが0の要素に幅の厚い枠線を付けます。
- 画像や要素の角を丸める方法
- 画像などの角を丸めるには、border-radiusプロパティを利用します。
- テーブルの枠線の隙間をなくす方法
border-collapse: collapse
を指定すれば、テーブルのセル間の枠線をなくせます。- 計算式で値を指定する方法
- %(パーセンテージ)とpx(ピクセル)を混ぜた計算式で、幅などの値を指定します。
- dl要素を横並びにする方法
- dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。