CSS再構築(その二) 日記本文

立て続けにその二である。といふのも、一のままでは読み辛くて仕方ないからだ。
さて、はてなダイアリーはdiv要素を沢山使ふ。div要素とは、特に目的の定められてゐない便宜的な要素である。「HTMLの各要素には意味や目的がきちんと定められてゐることが重要である」とする考へからは、divの多用はよろしくないこととされてゐる。しかしはてなダイアリーは自動的にdiv要素を出力してしまふのであり、それを避ける方法はない。ならば上手くレイアウトに活用するのが知恵といふものだ。
さて、日記本体に出力されるのは以下のdiv要素だ。

<div class="main">
  <div class="day">
  見出し：日付
    <div class="body">
      <div class="section">
      見出し：話題
      日記本文
      </div>
      <div class="section">
      見出し：話題
      日記本文
      </div>
      <div class="section">
      見出し：話題
      日記本文
      </div>
    </div>
  </div>
  <div class="day">
  見出し：日付
    <div class="body">
      <div class="section">
      見出し：話題
      日記本文
      </div>
      <div class="section">
      見出し：話題
      日記本文
      </div>
      <div class="section">
      見出し：話題
      日記本文
      </div>
    </div>
  </div>
</div>

この様に、クラス名"day"のdiv要素で一日単位に括られ、日付の見出しがあつて次に"body"、さらにその中に"section"で括られた話題が並ぶ。そして、画面に表示されてゐる一ページ分の日記が"main"で括られてゐる。随分深い入れ子構造だ。"body"は余計だろ、とも思ふが活用しだいでデザインに幅が出る可能性はある。それにしてもbody要素と同じ名前のクラス名は感心しない。
もちろんこれらはすべてデザインに利用できるが、よほど注意深くしない限り全部細かく指定しすぎてもややこしくなるだけなので、ひとまづ一日単位の"day"をターゲットにデザインを決めようと思ふ。下記の設定をスタイルシートに追加。

div.day { 
    color:#fff ; /* 文字色の設定 */
    background-color:#333 ; /* 背景色の設定 */
    border:1px #999 solid ;  /* 枠線の設定 */
    margin:2em 0 ; /* 枠の外側の余白設定 */
    padding:0 ;  /* 枠の内側の余白設定 */
    line-height:2em ; /* 本文の行の高さの設定 */
    }

これで一日ごとのブロックがグレーの枠線で括られ、その内側が濃いグレーの地に白い文字で表示される様になる。これだけでも少しはいつもの大和但馬屋らしくなつただらう。サンプル文書2。
枠の外側の上下に一文字分の余白を空けて一日単位に分かれる様にし、本文の行間は一行分空けることにした。emは「一文字分の横幅」といふ単位なので厳密には一行分とはやや違ふが、ここではスルーしてほしい。
まだ少し読みづらいので、話題ごとの"section"に余白を設定する。上下に二行分、左右に一文字分の余白を空けるために、下記の設定を追加。

div.section { padding:2em 1em ; } /* 枠の内側の余白設定 */

サンプル文書3の通りである。