デザインパターン研究

1. 素

素ってなにさ。とくにデザイン要素を加味してないものってことでよろしく。

2. なんでもセンタリング

なぜか死滅せずに生き延びてますね。右と左にすきまを作るため(センタリングしてることを目立たせるため)、たぶんやたらと<br>が入ってると思われます。

例では<br>を使ってないですが(そのため左右の端がわりと揃ってる)、意味もなく文字を拡大し色付けしてます。うわあ。

3. 水平線で区切る

<hr>を使って水平線を引くのがお手軽ですが、スタイルシートなどで見出しを帯状にする手もあります。

4. 企業サイト的

デザインのパターンかなあ、これ?

上部にカテゴリ別のリンクや現在地点の表示(トップからたどってきた順に表示されるので童話『ヘンゼルとグレーテル』になぞらえて「パンくずリスト」と呼ばれる)、左側にリンクリスト(ナビゲーション)。横にあるのは「ナビゲーションレール」というらしいです。そして左上のロゴはトップページへのリンクになってるのが一般的ですね。

ナビゲーションレールは左側にあることが多いのですが、ブラウザのスクロールバーが右側にあるのでナビゲーションレールも画面の右側にある方がユーザビリティ的に望ましいようです。

5. 片側に絵(あるいは模様やロゴ)を置く

両側に置くのもありますね。

ここでのサンプルは以前のスタイルをそのまま使いました。

6. 枠で囲む

一つの項目を枠で囲むわけです。

ここでのサンプルは以前のスタイルを少し変えて使ってます。

7. 中央にグラフィックとメニュー

画面の真ん中あたりにグラフィックとメニューからなるブロックを配置します。1つのページにメニューしかない場合もあり、メニュー部分の下に何らかの内容が続く場合もあり。

ここでのサンプルは、古いブラウザではメニュー部分が左右方向の真ん中にきませんのでご注意ください。