文字の間隔を変える

ブログでスタイルシート

トップ > ブログでスタイルシート

簡単スタイル: 文字を中央に寄せる; 文字を右に寄せる

画像を見やすく: 画像を左に寄せる; 画像を右に寄せる

文字の間隔を変える: 行の間隔を変える; 文字の間隔を変える

枠付きボックスで注目: 幅いっぱいのボックス; ボックスを右に表示; ボックスの中に色をつける

タイトル付ボックス: タイトル付ボックス; ボックスを右に寄せる; ボックスを２つ並べる

フォトスタンド風画像わく: 画像に枠を付ける; 中央に寄せて表示する; ２つ横に並べる

注意事項

現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ（BRタグ）が付加されます。テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。
そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし（<BR>タグで指定）」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです（楽天ブログではこれができません）。

行の間隔を変える

普通に改行すると１行分の高さのスペースが空きますが、この場合、0.5行分のような細かい設定ができます。

サンプルHTML

<div style="line-height:1.5">このように
書くと
行の間隔が
文字の高さの。
半分になります。</div>

ブラウザ表示

このように
書くと
行の間隔が
文字の高さの
半分になります。

ワンポイント

line-heightが1.5の指定で、0.5行分多く改行されます。
すなわち、何も設定がないときは1ということです。
もし、1より小さい数字を指定すると上の行の文字と重なって表示されます。
line-heightの指定は、文字の大きさが変わると、その分間隔も変わります。
line-heightを数値だけで指定すると、暗黙で「em」という単位になります。すなわち、「1.5」と書いたときは「1.5em」と書いたときと同じ意味です。
この「em」という単位は、文字の高さを表しています。１文字分の文字の高さの表示上の長さが「1em」ということです。
「font-size」を指定すると文字の大きさが変わるのですが、そうするとそれに比例して「1em」の表示上の長さが変わります。