デザインの変遷

このサイトのデザインの歴史を記録です。各サムネイル画像から当時のメインメニューページにリンクしてます。スクリーンショット(画像)ではなくHTML文書です。

第壱期

98年06月のサムネイル画像 98年6月当時のもの。たぶん第一期。のような気がする。97年10月にサイト開設してから半年も同じデザインでやってきたのかなあ? かなり疑問。

TABLEタグでレイアウトをやっとりますな。BR(強制改行)3連発とか、なかなか楽しいソースです(T_T)。あ、そうそう、なるべくいじらずに当時のままでお届けしてます。ただ、各項目のリンク先は現在のページだったりしますが。

第弐期

第弐期 その1

98年10月のサムネイル画像 98年10月のデザインです。いきなり背景が白っぽくなりました。ちょっとだけスタイルシートを使ってますな。メニューと更新履歴の間に縦線が入ってますが、TABLEを使ってすごく外道なやり方で表示してます。やっちゃいかんねこんなこと、人として。

"NEXT MONSTER"って、続き描いてないですね。もう2年半ほったらかし…。

第弐期 その2

99年8月のサムネイル画像 99年8月のデザインです。色とかはともかく、内容とか構成が今とまったくおんなじですねえ。第弐期 その1とほぼ同じデザインですが、全面的にCSSでのデザインに移行してます。CSS検証ソフトにかけたらエラーがぼろぼろ出てきそうで恐いですね(ってチェックしたことないんかいな? …はい。)

第参期

99年12月のサムネイル画像 99年12月のデザインです。おそらく99年11月ごろから00年7月ごろまで使ってたデザインです。わりあいはでな色合いというか、艶やかな色合いになりました。単にピンク色なだけという気もしますが。何でもかんでもセンタリングしたらええってもんちゃうでえみたいなレイアウトだし。極太明朝体を使いたいがためにFONTタグ使った記憶があります。この当時メインでつかってたのが Netscape Comunicator 4 でしたから…。

第四期

00年12月のサムネイル画像 00年12月のデザインです。さわやかな緑色になっとります。つくづくさわやかな色づかいやなあ。自分で作っといて感心するぐらい。00年7月ごろから12月まで緑色だったようです。

第伍期

01年1月のサムネイル画像 01年1月のデザインです。どうしてもファイルが見つからなかったので、スクリーンショットを参考にして再現しました。のですが、なんとか当時のファイルが発掘できたのでオリジナルに差し換えました(2001.05.20.)。涼しげな色合いをめざした記憶があります。1ヶ月ほどしか使わなかった短命なデザインですが、真冬にこの色合いは寒すぎたのでした。

第六期

01年2月のサムネイル画像 01年2月のデザインです。1月から3月くらいまでの2ヶ月ほどの命でした。梅をイメージしてますが、ちょっと色がきつすぎたような。

第四期から第六期までは色と模様が違うだけで基本的には同じデザインですね。

第七期

第七期 その1

01年4月のサムネイル画像 01年4月のデザインです。ひさしぶりに濃い色のバックに白抜き文字になりました。レイアウト自体はかわりばえしないんですが。webブラウザによってCSSの対応度が違うので、たとえば Internet Explorer では意図した通りの表示にはならない仕上がりになってたりしますが、しょうがないですね。

第七期 その2

01年6月のサムネイル画像 01年6月のデザインです。ちょびっとだけマイナーチェンジ。大見出し(h1)の白帯が細くなりました、とか、もくじがリストになったとか。でもWin版の Internet Explorer では、白帯が細くなってなかったりするらしいし。しくしく。

第七期 その3

01年7月のサムネイル画像 01年7月のデザインです。タイトルまわりを変更。

第八期

01年12月のサムネイル画像 01年12月のデザインです。また薄い色をベースにしました。今回はクリーム色系。Mozilla だと肌色のおまけがつきます。

HTML自体をできるだけプレーンに書かないと過去のCSSを代替スタイルシートに使えないことに気づくこのごろ。段組とかしたくなったらあとが恐いやろなー。

第九期

03年5月のサムネイル画像 03年5月のデザインです。CSSの対応度別にブラウザをCGIで振り分け、別々のCSSファイルを読ませることによって、すこしづづ違うデザインになるようにしました。対応しているブラウザでは服が透けて見える(?)しかけになってます。

ここでは2通りのXHTMLファイルを用意しました。ひとつはメディアタイプを text/html としたファイルで、優先スタイルシートに Windows IE用を、代替スタイルシートに Mozilla用、Mac IE用、Opera6用、Netscape4用を設定したものです。もうひとつはメディアタイプが application/xhtml+xml で、優先スタイルシートがMozilla用のものです。(サムネイルをクリックするとブラウザに適した方がでてきます)

text/html / application/xhtml+xml(古いブラウザでは表示できません)

第拾期

第拾期 その1

04年9月 04年9月のデザインです。第九期と同じギミックで、同様にブラウザによって適用するCSSファイルを変えているのですが、同時に背景画像、配色も変えています。

Gecko系 / Gecko系(application/xhtml+xml) / Windows IE / Mac IE / Opera6以下 / Netscape4など

第拾期 その2

05年3月 05年3月のデザインです。タイトル画像はHTML上では第十期その1と同じなのですが、CSSで差し替えています(可能なブラウザのみ)。

Gecko系 / Gecko系(application/xhtml+xml) / Windows IE / Mac IE / Opera6以下 / iCab / Netscape4など

第拾期 その3

05年3月 05年7月〜14年9月のデザインです。CSSで指定しているタイトル画像を変えたほか、フォント指定を変えた部分があるなど細かい変更があります。

Gecko系 / Gecko系(application/xhtml+xml) / Safari(application/xhtml+xml) / Windows IE7 / Windows IE6以下 / Mac IE / Opera6以下 / iCab / Netscape4など

第拾壱期

17年6月 14年10月〜17年6月のデザインです。HTML5に移行してメニュー部分や背景の画像をSVGで作ってます。