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