CSS tab-sizeプロパティを使ってHTMLのタブサイズを設定する方法
CSSのtab-sizeプロパティを使用すると、タブ文字によって挿入される空白（ホワイトスペース）の幅を自由に設定できます。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使えば好みの幅に調整可能です。本記事では、具体的なサンプルコードを通じてtab-sizeプロパティの使い方を解説します。
tab-sizeプロパティの基本
tab-sizeプロパティは、<pre>要素やwhite-space: pre;が適用された要素など、タブ文字がそのまま表示される環境で効果を発揮します。値には整数（文字数）または長さの単位を指定でき、Firefoxなど一部のブラウザではベンダー接頭辞付きの-moz-tab-sizeを併記することで互換性を確保できます。
サンプルコード1：タブサイズを32に設定する
以下の例では、2つ目の段落に対してtab-sizeを32に設定しています。1つ目の段落との違いを見比べてみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
}
p {
white-space: pre;
}
p:last-of-type {
tab-size: 32;
-moz-tab-size: 32;
}
</style>
</head>
<body>
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
</body>
</html>
表示結果
上記のコードを実行すると、次のような結果が表示されます。
サンプルコード2：タブサイズを1に設定する
次の例では、段落内のタブサイズを1に設定し、タブ幅を最小限に抑えています。<pre>要素にはボックスシャドウを適用し、視覚的にわかりやすいレイアウトにしています。
<!DOCTYPE html>
<html>
<head>
<style>
pre {
margin: 2%;
box-shadow: inset 0 0 12px lime;
}
p {
background: lavender;
tab-size: 1;
-moz-tab-size: 1;
}
</style>
</head>
<body>
<pre>
4 tabs of size 1 paragraph
.|.|.|.
<p>
Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.
</p>
</pre>
</body>
</html>
表示結果
上記のコードを実行すると、次のような結果が表示されます。
まとめ
tab-sizeプロパティを活用すれば、ソースコードの表示や整形済みテキストのレイアウトにおいて、タブによるインデント幅を細かく制御できます。主要なモダンブラウザでサポートされていますが、古いバージョンのFirefoxに対応する場合は-moz-tab-sizeの併用を忘れないようにしましょう。
-
CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方
CSSのappearanceプロパティは、要素をユーザーのOSネイティブなスタイルに合わせて表示したり、逆にデフォルトの外観を無効化して独自のデザインを適用したりできる便利なプロパティです。この記事では、appearance: none;を活用して、チェックボックスを自由にカスタマイズする方法を解説します。appearanceプロパティとは通常、チェックボックスやラジオボタンなどのフォーム部品は、ブラウザやOSが提供する標準的な見た目で表示されます。appearanceプロパティにnoneを指定すると、このデフォルトスタイルを解除できるため、背景色・角丸・影などを自由に設定したオリジナルデザイ
-
CSSのletter-spacingプロパティを使って文字間隔（字間）を設定する方法
CSSのletter-spacingプロパティを使用すると、テキストの文字と文字の間隔（字間）を自由に指定できます。値にはnormalのほか、pxやemなどの長さの単位を指定でき、タイトルや見出しのデザイン性を高めたり、可読性を調整したりする際に非常に便利です。 基本の構文 letter-spacing: normal | <length>; normalを指定するとブラウザ標準の間隔になり、数値を指定するとその分だけ文字間が広がります。負の値を指定すれば、文字間を詰めることも可能です。 サンプル1：em単位で文字間隔を指定する 以下の例では、最初のp要素だけにletter-spa