Hatena::Groupcss

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

2006-02-21

ダイアリーデザイン手法(1):タイトルへの画像表示とサイドバー並列レイアウト 10:59 ダイアリーのデザイン手法(1):タイトルへの画像表示とサイドバー並列レイアウト - #DocSeri { style: boxtile; } を含むブックマーク はてなブックマーク - ダイアリーのデザイン手法(1):タイトルへの画像表示とサイドバー並列レイアウト - #DocSeri { style: boxtile; } ダイアリーのデザイン手法(1):タイトルへの画像表示とサイドバー並列レイアウト - #DocSeri { style: boxtile; } のブックマークコメント

はてなダイアリーCSS編集するにあたって、ちょっとしたコツなどを書いてみる。

とりあえずpaddingmarginを消す

ブラウザによってデフォルト設定の異なるpaddingmarginを一度すべて0に設定、必要に応じて後から上書きして行く。

 * { margin: 0; padding: 0; }

トップに画像を表示するには

ダイアリーではタイトル画像を使えるので、それでやってしまうのが一番簡単。

ただしテーマ作成時やグループではそうも行かないので、背景に画像差し込むことになる。

尚、画像は可能な限り左右方向のサイズに融通を利かせる(横方向繰り返しなり背景色同一化グラデーションなり)のが望ましい。これはユーザビリティを考慮して横幅を可変にするため。

h1の背景として表示

h1の背景とする方法の利点は解り易さ。h1ブロックがそのまま画像表示部となるので直感的に理解し易く、また調整がh1のみで完結する利点がある。

heightに画像高さを指定して下が切れないように、また背景を繰り返し表示しないように指定。

h1 { background: url(画像URL) no-repeat; height: 画像高さ; }

ちなみにこの方法ではh1テキスト表示位置がヘッダーテーブルとウィンドウ枠にぴったりくっついてしまう。適度に間を空けるにはh1paddingを指定すれば良いのだが、その場合指定したpadding量だけh1全体のサイズが広がることに注意。

画像背景色と地続きになるよう作成するなどすればこの辺りはあまり気にしなくて良い。

bodyの背景として表示

bodyの背景とする利点は、本文との一体感である。例えば比較的大きな画像を、下が徐々に背景色と同一となるようなグラデーションに加工して背景とし、上にタイトル部や本文を重ねてしまうような構造が考えられる。h1背景型でもpositionなどによる重ねで同様の表示ができないわけではないが、明らかにbody背景の方が楽に処理できる。


表示の際にはh1margin-bottomなどで画像の濃い部分が本文に重ならないよう高さを稼ぐ。またbackground-positionウィンドウ最上部からの幅を調節してヘッダーテーブルに重ならないようにする。

body { background: url(画像URL) no-repeat 0 60px; }
h1 { margin-bottom: 画像の高さ; }

このとき、h1を一時的にdisplay:noneして位置を調節しておく。これは、フォントサイズの異なる環境に対応するため。

調節が終わったらh1を再度表示、フォントサイズを指定する*1。このとき、文字サイズ分下がり過ぎてしまうことになるので、div.hatena-bodyのposition指定でh1の文字サイズ分引き上げて元の位置に直す。

本文とサイドバーの並列配置

ブログの構造としては非常にありふれた、右または左にサイドバーを配置するレイアウトのためのテクニック。

positionとfloatの2パターンがあるが、ここでは表示位置のずれが起き難いposition法を解説する。

位置基準枠の設定

div.hatena-bodyにposition:relativeを設定する。これはこの下の要素にpositionを指定する場合の基準点にするため。この設定をしておかないとウィンドウ枠自体を基準にしてしまい、都合が悪い。

body背景イメージの関係でdiv.hatena-body自体の位置を調節する場合を除き、それ以上の設定は必要ない。

本文の表示位置

div.mainの位置調整はmarginで行なう。サイドバーを設置したい方向のmarginを、予定している幅より少し大きめに空ける。

div.mainの幅は固定しないのが望ましい。

サイドバーの表示位置

div.sidebarにはposition:absoluteを指定、topを0とする。これでdiv.mainと頭を揃えることができる。

左に表示する時はleft:0;右ならright:0を指定。

続いてwidthにdiv.mainのmarginより少し小さな値を設定すれば、二つの枠が綺麗に並ぶ。

応用として、div.sidebarクラス名を替えて二つ用意し、それぞれにleft:0とright:0を指定、div.mainの左右マージンを空ければ3段表示も可能。ただし本文がかなり狭まるので注意して扱うこと。

続く

続きは次の日に。

*1:異なる閲覧環境のためにptやpxでサイズを固定しないこと。常にemや%,若しくはxx-small〜xx-largeによる可変サイズ指定を推奨する

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