|
★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
★ 文字間隔の調節 ・・・ 手紙のように読みやすく
>> letter-spacing
■ 文字間隔の比較 px指定の場合
♪もしもし亀よ亀さんよ♪・・・"letter-spacing:0px"
♪もしもし亀よ亀さんよ♪・・・規定値＝nomal （基点＝1px）
♪もしもし亀よ亀さんよ♪・・・"letter-spacing:2px"
♪もしもし亀よ亀さんよ♪・・・"letter-spacing:3px"
♪もしもし亀よ亀さんよ♪・・・"letter-spacing:4px"
♪もしもし亀よ亀さんよ♪・・・"letter-spacing:5px"
♪ も し も し 亀 よ 亀 さ ん よ ♪・・・"全角の空白"
文章は読みやすいほうが内容がよく伝わります。窮屈な文字間隔は読みにくいモノですよね。
全角スペースでは、なおさら文章が散漫になってしまいます。
▼
サイトページが増えたときなど、レイアウトに関する設定（文字間隔、行間隔など）は同じ記述を繰り返すことになると思います。
反復する記述を一度スタイルシートに設定しておけば、その設定を呼び出すことで新規HTML文書の"BODY"全体に反映させることができます。
また、部分的に文字間隔を変えたいときなども同様にスタイルシートに設定し、そのCLASS属性を呼び出すことで記述の手間が軽減できます。
タグ要素にスタイルの属性と値をインラインスタイルで直接埋め込んだスタイルシ−トの記述をまとめると次のようになります。
要素名と属性の間に半角スペース必須
|←←←←←←←←←← 要 素 →→→→→→→→→→|
↓親要素 ・・・例えばspan ↓要素内容
<SPAN STYLE="letter-spacing : n単位 ;">未知の苦.</SPAN>
|←←←←←←属 性→→→→→→|
|←←←←← 値 →→→→→|
▼
■ letter-spacing の単位 >> pt, px, em など、または ％
3px >> ♪もしもし亀よ亀さんよ♪
◆インラインスタイルのソース表示
<P STYLE="letter-spacing : 3px">
♪もしもし亀よ亀さんよ♪
</P>
|
