文字間隔を指定する

文字間隔を指定する文字間隔を指定する表示例

文字と文字の間隔をスタイルシートで指定します。「letter-spacing」プロパティを使います。マイナスの値を指定すると、文字が重なって見えます。

HTML/XHTML

<p>これは標準の文字間隔</p>
<p class="text1">この文字間隔は「0px」</p>
<p class="text2">この文字間隔は「50px」</p>
<p class="text3">この文字間隔は「-3px」</p>
<p class="text4">この文字間隔は「0.5em」</p>
<p class="text5">この文字間隔は「1em」</p>
<p class="text6">この文字間隔は「10%」</p>
<p class="text7">この文字間隔は「100%」</p>

CSS

<style type="text/css">
<!--
.text1 { letter-spacing: 0px; }
.text2 { letter-spacing: 50px; }
.text3 { letter-spacing: -3px; }
.text4 { letter-spacing: 0.5em; }
.text5 { letter-spacing: 1em; }
.text6 { letter-spacing: 10%; }
.text7 { letter-spacing: 100%; }
-->
</style>

文字間隔を指定する表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録