スタイルシートの技

段落全体のインデントを3文字分だけ下げる

先ほどの「段落の最初にインデントを1文字分付ける」の応用です。 応用と言っても同じようなものなのですが、今回の場合は段落全体に対してインデントを付ける方法です。 見出しに対して段落を記載する時にはある程度インデントしてある方が見やすくて良いです。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>Fiber Optics</title>
   <style type="text/css">
      p
      {
         padding-left: 3em;
         text-indent: 1em;
      }
   </style>
</head>
<body>
   <h1>山月記</h1>
   <p>隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、
   ついで江南尉に補せられたが、性、狷介、自ら恃むところ頗る厚く、
   賤吏に甘んずるを潔しとしなかった。いくばくもなく官を退いた後は、
   故山、略に帰臥し、人と交を絶って、ひたすら詩作に耽った。
   下吏となって長く膝を俗悪な大官の前に屈するよりは、
   詩家としての名を死後百年に遺そうとしたのである。</p>
</body>
</html>

例文は先ほどと同じ「山月記」を引用しました。 "text-indent"は領域内のテキストの字下げでしたね。 "padding-left: 3em;"を指定すると段落全体が3文字分インデントされている事が良く分かります。 "padding"については、「簡単なコンテンツボックスの作成と罫線の利用方法」にて詳しい解説を行いました。思い出せない人はもう一度ご覧下さい。

"padding-left: 3em;" を指定しない時
山月記
隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、 ついで江南尉に補せられたが、性、狷介、自ら恃むところ頗る厚く、 賤吏に甘んずるを潔しとしなかった。いくばくもなく官を退いた後は、 故山、略に帰臥し、人と交を絶って、ひたすら詩作に耽った。 下吏となって長く膝を俗悪な大官の前に屈するよりは、 詩家としての名を死後百年に遺そうとしたのである。
"padding-left: 3em;" を指定した時
山月記
隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、 ついで江南尉に補せられたが、性、狷介、自ら恃むところ頗る厚く、 賤吏に甘んずるを潔しとしなかった。いくばくもなく官を退いた後は、 故山、略に帰臥し、人と交を絶って、ひたすら詩作に耽った。 下吏となって長く膝を俗悪な大官の前に屈するよりは、 詩家としての名を死後百年に遺そうとしたのである。

別に"blockquote"でインデントすればいいのでは？と思う方がいらっしゃるかも知れません。 "blockquote"でインデント変わりにするのはよくありません。"blockquote"はあくまでも「引用文」の意味で、 たまたま表示上インデントされているようになっているだけです。文書構造と見栄えを混同しないようにしましょう。

top