ページ全体の行間隔を変える

ページ全体の行間を指定する

行間を調整する属性 line-height:を使います。

ホームページはぎっちり詰まった行間よりも、ある程度行間を広げた方が見やすいですね。デフォルト状態では 少し、行間が狭い感じがします。

◆<head>と</head>の間に下記のタグを入れます。ページ全体に適用されます。
例 ↓↓ ページ全体を130%の行間にします。
<style type="text/css">
<!--
body {line-height: 130%;}
-->
</style>


サンプルでは130%ですが、この部分の数値を変えます。
ピクセル(px)、ポイント(pt)も使用できます。

文字の大きさはこちらのホームページで文字の大きさを変える参照

部分的に行間を変えることもできます。

◆<head>と</head>の間に下記のタグを入れます。
任意のクラス名「.gyo」でスタイルを記述します。
 → htmlでspanに囲まれた文字の行間が変化します。
<style type="text/css">
<!--
.gyo {line-height: 200%;}
-->
</style>


部分的に行間を変える場合のhtmlです。
<body>
あいうえおかきくけこ<br>
富士山は世界文化遺産に登録された日本一高い山です。登録と同時に登山客が増え、色々な問題が生じています。<br>
<span class="gyo">行間を変えます</span><br>
焼けのやんぱち、日焼けのなすび、色が黒くて食いつきたいが
あたしゃ入れ歯で歯が立たない
</body>

もうひとつの方法 <span>に直接スタイルを記述します。

<body>
あいうえおかきくけこ<br>
富士山は世界文化遺産に登録された日本一高い山です。登録と同時に登山客が増え、色々な問題が生じています。<br>
<span style="line-height:200%">行間を変えます</span><br>
焼けのやんぱち、日焼けのなすび、色が黒くて食いつきたいがあたしゃ入れ歯で歯が立たない
</body>


実際のウェブ上での見え方です。<span>で囲まれた上下の行間が変わっています。改行すればいいことなので、あまり必要ないかもしれませんね。
あいうえおかきくけこ
富士山は世界文化遺産に登録された日本一高い山です。登録と同時に登山客が増え、色々な問題が生じています。
行間を変えます
焼けのやんぱち、日焼けのなすび、色が黒くて食いつきたいがあたしゃ入れ歯で歯が立たない
<span>の使い方

関連項目・関連ページ
<div>と<span>の違い コメント(メモ) 見出しをつける 段落をつける 位置を決める

●当サイトのソースは、IE6.0+のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。


★skip ページtop




ページ全般

背景を小粋に変える


ホームページを小粋に
css
java
home