Hatena::Groupcss

#DocSeri { style: boxtile; } このページをアンテナに追加 RSSフィード

2006-02-27

ダイアリーデザイン手法(2):本文のスタイル 19:32 ダイアリーのデザイン手法(2):本文のスタイル - #DocSeri { style: boxtile; } を含むブックマーク はてなブックマーク - ダイアリーのデザイン手法(2):本文のスタイル - #DocSeri { style: boxtile; } ダイアリーのデザイン手法(2):本文のスタイル - #DocSeri { style: boxtile; } のブックマークコメント

続いてdiv.main内のスタイルを変更する。

div.main内には次のような要素が並ぶ。階層構造を解り易く説明するために箇条書きする。

これだけあるので大変そうだが、順を追って設定すればそう難しいことはない。

日ごとの区切り

日ごと・セクションごとに何らかの区切りがあると画面が締まる。

div.day/div.sectionにborderなどを設定する方法とh2/h3にbackgroundまたはborderを設定する方法がある。

div.day/div.sectionへのborder表示

hatenaテーマなどでも使われる、最も簡単な手法。

枠線で囲う場合、paddingなどなんらかの手段で本文と隙間を作らないと非常に読み難くなるので注意。

枠線を意識させたくない場合、背景に縦方向のグラデーションを敷くといった方法もある。

見出しスタイル

h2/h3に背景色や枠線を指定して区切りとすることもできる。

paddingで適度に内部要素との隙間を確保して、視認性を向上させると良い。

div.day/div.sectionにも枠線を指定した場合、h2/h3の外枠がdivの枠線とぴったり重なる方が見栄えが良いが、divにpaddingがあるとその分隙間ができてしまう。

divのpaddingを切って内部の角要素に個別指定する手もあるが、段落リスト引用・テーブルなど様々な要素を網羅するよりは、divのpaddingをそのままにしてh2/h3にそれと等しい量のマイナスマージンを設定する方が簡単。


また、好みの問題もあるが見出しにはletter-spacingで多少文字間を空け気味に配置すると上品に仕上がる。

角丸の見出し

見出し部分の角を丸める方法について。

現在Mozilla-moz-border-radiusで角の丸めを先行実装しているが、他に対応ブラウザがないので使用を推奨しない。

4箇所の角を全て丸めることは困難だが、2箇所ならなんとかなると思うので例を示す。

左右の角を丸めた画像とそれに繋がるグラデーション画像を用意し、それぞれL.gif、R.gif、G.gifと名付けた。

/*日ごと見出し*/
div.day {
	background: url(G.gif) repeat-x;
	margin: 1em;
}
h2 {
	background: url(L.gif) no-repeat;
	padding: 0.5em;
}
h2 span.date {
	float: right;
	margin: -0.5em;
	padding: 0.5em;
	background: url(R.gif) no-repeat right top;
}
/*セクションごと見出し*/
div.section {
	background: url(G.gif) repeat-x;
	margin: 1em;
}
h3 {
	background: url(R.gif) no-repeat right top;
	padding: 0.5em;
}
h3 span.sanchor {
	margin: -0.5em;
	padding: 0.5em;
	background: url(L.gif) no-repeat;
	display: block;
	float: left;
}

尚、グラデーション画像は角丸の高さと同じだけベタ塗り部分を用意する。そうしないとスムーズに繋がらない。


内包する要素の違いで、h2とh3では角丸の表示方法が逆になっていることに注意。

また、上記の例では便宜的に日ごとの見出しもセクションごとの見出しも同じスタイルになっているが、実際に利用する際にはどちらか一方のみに限定した方が良いだろう。

本文のスタイル

一文字下げ

はてなダイアリーでは改行ごとにpで括られ、空行2行をbrで置き換える仕様になっている。文法的には逆の方が適切なのだが、こうなっているわけは日本語の表記との相性にある。

日本語の適切な表記としては改行ごとに頭一文字分インデントされるべきだが、text-indentでは段落毎の最初の一文字しかインデントできない。そこでpとbrの役目をわざと逆にしてあるのだ。

従って一字下げを行ないたい場合は、わざわざ全角スペースを挿入する必要はなく、p { text-indent: 1em; }で済む。

行間調整

デフォルトでの表示は、文字感と行間がほぼ同じになっている。これはかなり読み難いので、行間を広く取って読み易さを向上させる。

pにline-heightで1.5em程度の行高さを指定。好みによるが、2em以上広く空けると却って読み難いだろう。

最初の一文字を大きく

西洋の書物などに時々見られる様式で、最初の一文字が大きな飾り文字などで表示され、残りの文字がそれに回り込むというものがある。

飾り文字はちょっと無理*1だが、回り込みの再現は難しくないので紹介しておく。

「最初の一文字」を指定するには疑似要素:fitrst-letterを用いる。しかしp:first-letterとしてしまうと改行ごとに適用されて大変なことになるので、セクションの最初の要素のみに限定せねばならない。つまりh3直後のpのみを指定すれば良い。

h3とpは共にdiv.sectionの子要素なので、「同一階層の直後の要素を指定する」隣接セレクタ+が利用できる。h3+p:first-letter { font-size: 3em; float: left; }とでもすれば、それらしい表示ができるだろう。

内容がごく短かった時の後続要素の配置を考慮して、section終端のdiv.refererlistあたりにclera: leftを追加するのが望ましい。

続く

次はサイドバー編

*1:font-family:fantasyで装飾文字を指定できることになっているが、Mozillaでは設定されていないようだし、いずれにせよフォント種類は指定できない

トラックバック - http://css.g.hatena.ne.jp/DocSeri/20060227