スタイルシートの技
段落の最初にインデントを1文字分付ける
良く見かけるのは全角スペース（半角スペース[ ]）で段落の最初を空けている… というものですが、 毎回全角スペースや「 」で空けるといった作業よりも、 これをスタイルシートですべて指定して、段落があれば最初に一定スペースを空けた手法が便利なので紹介します。 小説系のサイトや文書メインのサイト様に対しては非常に効果的です。
まず「p」要素については良く見かけると思います。
これは「paragraph」の意味です。"<p>...</p>"で括るとその部分は
１行分空ける事ができます！
とか書いてある本やサイト様をみかけるのですが、
それはある意味レイアウト的には間違いではないのですが、
真の意味では正しくはありません。よく本などでも段落の最初には1文字分空白が空いていて、
その部分が段落になる… という事を「形式段落」というような言葉で小学生の時に習ったはずです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>山月記</title>
<style type="text/css">
p
{
text-indent: 1em;
}
</style>
</head>
<body>
<h1>山月記</h1>
<p>隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、
ついで江南尉に補せられたが、性、狷介、自ら恃むところ頗る厚く、
賤吏に甘んずるを潔しとしなかった。いくばくもなく官を退いた後は、
故山、略に帰臥し、人と交を絶って、ひたすら詩作に耽った。
下吏となって長く膝を俗悪な大官の前に屈するよりは、
詩家としての名を死後百年に遺そうとしたのである。</p>
</body>
</html>
こうすればp要素で割り当てた部分の最初に余白を空ける事ができます。ちょうど1文字分の余白があくと思ってください。 「em」は「m」1文字の横幅と言いましたが、実際にどのくらい余白が最初に空けられているかを見てみましょう。
このようになります。「Internet Explorer」では日本語がちょうど、半文字分、1文字分、1文字半分、2文字分程度で 綺麗に段落の最初だけに空白が付いていますね。別に「p」に限らずに「blockquote」でも、「div」内でも同様に利用できます。 「blockquote」でインデント変わりにするのはよくありません。「blockquote」はあくまでも「引用文」の意味で、 たまたま表示上インデントされているようになっているだけです。文書構造と見栄えを混同しないようにしましょう。