さて、どんどん進めるぞ。
続いて、見出しの設定だ。見出しといへばh1〜h6要素である。HTMLの学び始めに「H1タグは文字を大きく表示します。FONTタグとは違い、数字が小さくなるほど大きい文字になります。文字を大きくしたいときはFONTタグを使いましょう」などと教へられ、HTMLのマークアップの道を踏み誤ることになるアレである。こんな「常識」は忘れるべきだ。こんな解説をしてゐる本は今すぐゴミ箱に捨てろ。こんな解説をしてゐるサイトはブックマークから消せ。オレたちは嘘を教へられたんだ。「人」といふ字は人と人とが支へあつてゐる形なんかぢやないんだ。騙されるな。
W3C曰く、HTML文書は須く「見出し」と「本文」がセットになつて構成されてゐるべし、である。これを言ふとすぐに「形に縛られすぎだ、オレのホームページはもつと自由でゐたいんだ」とか言ひ出したくなるのが人の常だが、そこはそれ、発想を逆転させてみよう。フォーマットに合はせながら、どこまで自由な発想ができるか、と。あるいは、自由な発想から生まれた文書を如何にしてフォーマットに合はせるか、と。どんな素晴らしい発想も、形に縛られることでしか他人には伝へられないのだ。誰もあなたの脳の中は覗けない。つふか、たかだかこの程度のフォーマットに合せることで損はれるやうな個性なんて云々。
さて、はてなダイアリー(に限らずすべてのHTML文書)で推奨される構造とはこんなものだ。
<body>
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
本文
<h3>小見出し</h3>
本文
<h2>中見出し</h2>
<h3>小見出し</h3>
本文
<h3>小見出し</h3>
本文
<h2>中見出し</h2>
<h3>小見出し</h3>
本文
<h3>小見出し</h3>
本文
</body>
本来、文書の構造はこれだけでよい。小見出しはさらにh4,h5,h6と細かく取ることができるが、基本構造はこれだけである。はてなダイアリーの場合、これをさらにdivで括るからかへつてわかりにくくなつてしまふが、文書の構造を作るのはdivではなくあくまで見出しと本文の関係によつてである。
見出しのレベルについては、あくまでその文書の中で最上位となるものを<h1>と見倣す。<h1>では文字が大きすぎるからといつていきなり<h3>あたりから始めたりするのは間違ひだ。文字の大きさはスタイルシートで決めればよい。
さて、はてなダイアリーでは、それぞれの見出しの内容が以下の様に自動的に決定される。
h4〜h6は特に定義されてゐない。わざわざ使はうと思はない限り、さう使ふものでもない。
h1,h2,h3,h4,h5,h6 {
font-weight:bold ; /* 見出しは全部太字に */
margin:0 ; /* 外側の余白 */
padding:0 ; /* 内側の余白 */
}
h1 {
font-size:180% ; /* 文字サイズ */
color:#77bac1 ; /* 文字色 */
background-color:#4594a0 ; /* 見出し部分の背景色 */
background-image:url("http://d.hatena.ne.jp/images/diary/yms-zun/2002-12-30.gif") ; /* はてなロゴ画像 */
background-repeat:no-repeat ; /* ロゴ画像の繰返し設定 */
background-position:0% 100% ; /* ロゴ画像の表示位置 */
padding-left:110px ; /* ロゴ画像の横幅分だけ左に余白を取る */
border-bottom:1px #276d75 solid ; /* 下に枠線表示 */
vertical-align:bottom ; /* 文字の配置を下揃えに */
}
h2 {
font-size:140% ; /* 文字サイズ */
color:#066 ; /* 文字色 */
margin:0.5em 0 ; /* 外側の余白 */
padding-left:0.5em ; /* 内側左の余白 */
border-bottom:2px #fff solid ; /* 下に枠線表示 */
}
div.main h2 {
font-size:120% ; /* 文字サイズ */
color:#fff ; /* 文字色 */
padding-left:1em ; /* 内側左の余白 */
border-color:#fc0 ; /* 下線の色を変更 */
}
h3 {
font-size:120% ; /* 文字サイズ */
color:#fff ; /* 文字色 */
margin:1em 0 ; /* 外側の余白 */
border-bottom:3px #9ff solid ; /* 下に枠線表示 */
}
何やら記述が香ばしくなつてきた。順に説明すると、一行目で見出し要素六種類を全部太字で表示する様にしてしまつてゐる。余白も一旦全部詰めて、後から異なる部分だけ個別に設定することにした。
で、大見出しとなるh1要素である。これを「はてなダイアリー」のヘッダの様に見せかけるため、いろいろと設定しなくてはならない。まずはてなのロゴを切出して背景画像に設定し、見出しとなる文字列はロゴの幅だけ余白をとつて表示させるわけだ。この様にすることで、はてなダイアリーの出力するHTMLには手を出せなくともある程度自由に遊ぶことができる。これがCSSを使ふ醍醐味だと思ふがどうか。
続いて中見出しのh2要素。ここでまたややこしいことをしてゐる。まず普通のh2要素についてだが、ここでは文書の始めの方にある「この日記は」といふ見出しについて設定してゐる。レイトンブルーの背景に合せた配色だ。しかしこのままでは日記の日付の見出しとしては具合が悪い。そこで、日付の方では別の設定をしたいわけだ。
そこでdiv.main h2 { といふ記述が登場する。日記本体を括るdiv要素の中にあるh2要素については、こちらの設定を適用しますよといふ意味だ。先に書いたh2要素の設定はまんま生きてゐるから、そこから変更したい部分だけ上書きする様に設定すればよい。ここでは、下線の太さやスタイルはそのままに色だけを変更するようにしてゐる。
h3要素は、まあそのまんまだ。サンプル文書5。ついでにh4,h5のスタイルも設定。h6は使つた記憶がないし、使ふとしてもボールド表示だけで十分なので放置。
h4 {
padding-top:0.5em ; /* 内側上の余白 */
border-bottom:1px #fff solid ; /* 下に枠線表示 */
}
h5 {
border-width:1px 8px 1px 0 ; /* 枠線の幅 */
border-color:#696 ; /* 枠線の色 */
border-style:solid ; /* 枠線のスタイル */
margin:0.5em 0 ; 外側の余白
padding-top:0.25em ; /* 内側左の余白 */
width:50% ; /* 横幅を表示領域の50%に設定 */
}
h4の表示サンプル
h5の表示サンプル
ここで以前のCSS設定を改めて見返すと、何のために定義したかわからない様なクラス名が続々と出てきてゾッとする。それなりに意味はあるのだらうが、いつたいどこで使はれてゐるのやら。
ここまでのCSSをid:yms-zun:20030104にまとめて置いた。参考にしたい人はご自由にどうぞ。
