ようやく字下げしてみる
（ｂ）「段落の先頭を一文字下げる（インデント）」のやり方です。
前回少し込みいった話をしたのは、要は、「パラグラフ」を表わすHTMLタグ<p>が、「意味段落」に対応するのか、それとも「形式段落」に対応するのか、それによってHTMLの書き方が変わってくるためなんです。
<p>を意味段落とすると、意味段落はいくつかの形式段落をまとめたものなので、その内部で形式段落を表現する必要があります。形式段落はふつう改行で区別されるので、改行専用のタグ<br>を使用することになります。この場合に、行頭でインデントするための方法がHTMLおよびCSSには用意されていませんので、字下げしたければ、<br>の後に全角の空白文字でも入れてそのように見せるしかありません。
一方、<p>を形式段落とすると、その問題はもっとずっと簡単になります。CSSに「text-indent」というインデント専用オプションが用意されているので、これに下げたい字数を指定するだけです。ただしこの場合、今度は逆に、意味段落をどのように表現したらいいかという問題が出てきます。一般的には、一つの意味段落に含まれる<p>をまとめてdivタグでくくる、という方法で対処することになります。
さて、はてなダイアリーの仕様を見てみると、文末で改行するとそこで形式段落となり、文頭で２回改行すると（つまり空行を２つ入れると）意味段落をつくることになっています。そこで、実際に打って表示された日記のソースを見てみると、はてなでは、形式段落が<p>で表わされ、意味段落を作る空行は、</p>と<p>とのあいだに<br>をはさむことで表わしているようです。このやり方で意味段落を表現するのがHTMLの文法的に妥当かどうか、ぼくはよくわかりません。一応HTML-lint（HTML文法チェッカー）にかけてみましたが、その点については怒られないようでした。ともかく、ここで重要なのは、「形式段落を<p>で表わしている」という一点です。
というわけで、次のように書いてみると……
div.section p {
text-indent: 1em;
}字下げすることができました。
サイトのタイトルを中側に寄せてみる
似ているので、先に（ｄ）「サイトのタイトルをもう少し中央側に寄せる」をやってみます。
表示されているページのソースを見てみると、このサイトのタイトル、とはいってもブラウザのタイトルバーとかに表示されるほうではなくて、この上の画像の中に表示されているもののほうなんですが、これは<h1>タグでくくられた「大見出し」であることがわかります。そんなわけで、この大見出し自体を右側に少し寄せればおしまいです。
h1 {
text-indent: 50px;
}というところで、次回はサイドバーの移動について。
