4-13-13a　文字間隔を設定する

文字の間隔を設定する項目です。letter-spacingプロパティを利用致します。（下記の見本では「body」部を全て一括で指定しております）。

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
body {
letter-spacing: 10px; /* 文字間隔の設定 */
}
-->
</style>

こちらも「body」部分はその他のタグ（段落を表す<p>等)でもOKです。間隔の指定は 『数値プラス単位（px等）』 を使用致します。

[ 関連事項 ： HP-TIPS > CSS > CSSにおける長さの単位 ]
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

pagetop

4-13-13b　具体的な見本

文字間隔の見本をclass属性 を利用して表示しております。

CSS

<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--

.sample-1g { letter-spacing: 10px ; }
.sample-2g { letter-spacing: 10pt ; }
.sample-3g { letter-spacing: 0.1em ; }
.sample-4g { letter-spacing: 0.5em ; }
.sample-5g { letter-spacing: 1em ; }
.sample-6g { letter-spacing: 50% ; }

-->
</style>

HTML

<body> ～ </body> 内に記述して下さい。
<p>この文章は文字間隔を設定していない見本です。</p>
<p class="sample-1g">この文章は文字間隔「10px」の見本です。</p>
<p class="sample-2g">この文章は文字間隔「10pt」の見本です。</p>
<p class="sample-3g">この文章は文字間隔「0.1em」の見本です。</p>
<p class="sample-4g">この文章は文字間隔「0.5em」の見本です。</p>
<p class="sample-5g">この文章は文字間隔「1em」の見本です。</p>
<p class="sample-6g">この文章は文字間隔「50%」の見本です。</p>

表示結果

この文章は文字間隔を設定していない見本です。

この文章は文字間隔「10px」の見本です。

この文章は文字間隔「10pt」の見本です。

この文章は文字間隔「0.1em」の見本です。

この文章は文字間隔「0.5em」の見本です。

この文章は文字間隔「1em」の見本です。

この文章は文字間隔「50%」の見本です。

その他、特定のセレクタ（例：「body」、「p」等）に複数のプロパティ（「color」、「font-size」等）を設定する見本は 『4-9　見出しを修飾する』 をご覧下さい。

[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > セレクタ ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > プロパティ ]

pagetop