現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ(BRタグ)が付加されます。
テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。
見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。
ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし(<BR>タグで指定)」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです(楽天ブログではこれができません)。
普通に改行すると1行分の高さのスペースが空きますが、この場合、0.5行分のような細かい設定ができます。
line-heightが1.5の指定で、0.5行分多く改行されます。
すなわち、何も設定がないときは1ということです。
もし、1より小さい数字を指定すると上の行の文字と重なって表示されます。
line-heightの指定は、文字の大きさが変わると、その分間隔も変わります。
line-heightを数値だけで指定すると、暗黙で「em」という単位になります。すなわち、「1.5」と書いたときは「1.5em」と書いたときと同じ意味です。
この「em」という単位は、文字の高さを表しています。1文字分の文字の高さの表示上の長さが「1em」ということです。
「font-size」を指定すると文字の大きさが変わるのですが、そうするとそれに比例して「1em」の表示上の長さが変わります。
text-alignで中央寄せをして、行間隔を変えます。
通常、文字と文字との間はくっついていますが、その隙間を微妙に空けることもできます。まずは、全体的に文字間隔をあける方法についてです。
これは、文字と文字の隙間を0.5em分空けるようにしています。1emは文字の高さなのですが、普通の日本語の文字は高さと幅は同じなので、0.5文字分の幅の隙間が空くということになります。このletter-spacingは、文の途中で隙間を変えるようにもできます。そのときはSPANタグで設定します。
先ほどの表示サンプルで文字間隔と行間隔を0.2文字分空けるとどうなるか、みてみましょう。
こころなしか、なにやら涼しげに見えるのは、気のせいでしょうか…。