デザインサンプル

ここは…

2003 年 11月にヘンゼルの館移転 & リニューアルのためにいろいろとデザインを考えた、その残骸です。

いあ、なんとなく捨てにくくて…(^^;

…というか、CSS 覚えたてにありがち(だよね?)、なんでも div で処理しようとしてるです(笑)

当初から背景画像は決まっていたものの、本文をどうしようかかなり悩んだです。

旧サイトでよくやってしまっていたみたいに背景画像の上に直接字を置くのはやめようとは決めていました。よほど薄い背景じゃないかぎり、著しく読みにくくなっちゃうんですよね。

背景画像に似合うタイトルは…ということでいくつかテストしました。

なお、最初の 1つは「ロゴ&バナー無料自動作成」さんで作ったものです。

旧サイトでフレームを使ってやっていたように左にメニュー、右にコンテンツ、はほぼ決まっていました。

ただ左のメニュー部を背景に見合うよう装飾しようとして…これまた激しく悩みました(^^;

最終的には div タグが何重にもなるのを嫌って平面的なデザインで落ち着きましたが…立体感があるのも面白かったかな、と見るたびに迷います(笑)

ボディもフレーム(左のメニュー部)も独立して考えていたのではなかなか決まらないから…。

でも一緒に検討しても悩むものは悩む(笑)

#000000 な真っ黒もいやだけど、薄すぎて見えにくいのも…。というわけで表示して比較です。

ついでに font-family もチェック!

font-family をさらに追求です。

下のサンプルは Windows 以外とかインストールされたフォントが異なる環境で見たらどうなるか不明(笑)

ちなみにこのころはずっと cursive がお気に入りだったですが、同じ OS とブラウザでもマシンが違っていてインストールされているフォントに差があれば、ぜんぜん雰囲気が違う表示になることもあると知りやめちゃいます。

今さらデフォルトの下線なんて…というわけで(^^)b

最終的に固まったのがこのようなデザインです。

ただしこの後すぐに、IE 等では float によって折り返した可変サイズの右列に table などがあるとウィンドウ幅を縮めた時に div ブロックが上下にぶち切れてしまうことを知り、横幅固定にしているです

そしてそれからなかなか作業が進まないままずるずると時が経ち、2004年 9月になって rNote との衝撃的な出会いをしてしまうのでした♪