スタイル紹介

deceiver(0205)

NN4 向けデフォルトスタイル。

CSS 対応が貧弱だった NN4 向けのスタイルを、なるべくリッチな感じに見えるよう改造したもの。見出しの border や文字サイズなどを延々といじり続け、決まった姿はありませんでした。

ここに収録したのは、たまたまサイトのスナップショットを作成した2002年5月5日時点のバージョンです。左インデントで要素の位置付けを示そうとする試みがなされていますね。h6、blockquote、table などは未指定で、多段リストも考慮していないため、表示サンプルは割と残念な感じに見えます。

• CSS0205_deceiver.css
• x-0205-dinosaur.gif

dino(0205)

IE5.5 以上の環境向けデフォルトスタイル。

『にゃごろう村』でフレームの不自由さを嘆いていた私が、CSS による位置固定表示に心奪われ、やりたかったことを全て実現したスタイルです。2月頃には完成していて、大学の研究室にあった iMac で表示確認した記憶があります。

2010年の私が見ると、サイト名を本文に重ねて表示する、h1 の border に至ってはスクロールバーにまで重なる、という妙な設計。にもかかわらず、不思議と魅力を感じます。とくに配色面で、後にも先にもこのようなスタイルを作ったことはなく、いまだに自分にとって特別な存在だったりします。

• CSS0205_dinosaur.css
• x-0205-dinonavy.gif

dummy(0205)

IE5.5 以上の環境向けに提供していた、素朴なスタイル。dino が個性的だったので、見た目にスッとなじんでもらえるものとして作りました。ただしテーブルレイアウト風のシンプルな2カラムと見せかけて、擬似フレームです。

『にゃごろう村』の頃からしばらく、メニューの位置固定表示は便利だと思っていたんです。長大な文書を作り、サイドバーに位置固定表示の見出し一覧を用意して、興味のある見出しをクリックすればパッと読める、冒頭に戻りたければ「page_top」みたいなリンクをクリックしてもらう、というような。

2002年までは、文章を書く方に苦労していたので、リッチな HTML 文書を作成することは相対的に大きな手間ではありませんでした。せっかく書いた文章を大切にしたい、という意識の方が強かったのです。しかし2003年以降、筆記ペースが上がるにつれ、私は文書作成の手間を惜しむようになりました。そうして、見出し一覧を用いたページ内リンクのない文書がどんどん増えていきました。すると擬似フレームの利点は消え、場所を無駄に食うデザインでしかなくなります。

dino も dummy も当初はとても気に入っていたにもかかわらず、後継スタイルが製作されずに消えていったのは、こうした経緯によります。

• CSS0205_dummy.css
• x-0205-dinosaur.gif

flower(0205)

当時のメインコンテンツはサイト批評サイトリンク集。リンク集に掲載していたサイトの大半は、ガールズサイトでした。リンク集を更新するため膨大なガールズサイトを眺めていたので、ガールズサイトっぽいスタイルもひとつほしいな、と思って dummy をベースとして作成したもの。苦心したのですが、「小文字＋花柄＋ピンク基調……なんて要素を積み上げたってガールズサイトにはならない」という当たり前の事実を思い知らされる結果に。

dummy ベースにしたのは、当時のガールズサイトではフレームが「便利」とされていたので、擬似フレームにしたかったからです。dino の幅固定も捨て難かったのですが……。

• CSS0205_girls.css
• x-0205-backnavi.png
• x-0205-title.png
• x-0205-flower.png

deceiver_n(0207)

deceiver の発展形のひとつ。未完成で、実際には閲覧者の前には出なかったもの。

スタイルを切り替えながらサンプルの表示を見ていくと、このスタイルだけ装飾対象の要素が断然多く、多段リストなどへの対応も完了していることがわかります。このスタイルには、後の think や plant へ受け継がれる特徴の過半が登場しており、試行錯誤の過程で私の理想が次第に形となっていく様子が伺えます。

追記：明らかに未完成で悲しい感じだったので、少し手を入れました。

• CSS0207_deceiver_n.css
• x-0207-body.png
• x-0207-h1.png
• x-0207-h2.png

works(0207)

これも実際には閲覧者の前には出なかったもの。

最初期の面影を残す唯一のスタイルです。div も多段リストも考慮せず、ほぼ見出しの装飾と body の背景画像だけというシンプルな作りとなっています。

早々に dino や deceiver に居場所を奪われてしまいましたが、その後も地道に更新し続けていました。バックアップが残っているのは2002年7月時点のバージョン。dino、deceiver、delta などと部分的に融合し、deceiver_n ほどではないものの、多くの要素にスタイルが用意されています。ここで試していた配色が、後に think へ逆輸入されました。

• CSS0207_works.css
• x-0205-dinosaur.gif

delta(0205)

2002年当時、『Delta』というウェブサイトがあって、そのスタイルが好きだったので、勉強がてらに真似したもの。フッターがフッターらしく表示されるスタイルは deceiver へと受け継がれました。

• CSS0205_delta.css
• x-0205-dinosaur.gif

2ch(0205)

ジュンさんが製作されたスタイルシート。パクリOKとのことだったので、見た目の変化が面白いと思って採用しています。当時の 2ch で使用されていた要素のみスタイル指定されています。

• CSS0205_2ch.css

HTMLの構成

<div class="frame"><div class="framefield">
　<h1 id="idindex">サイト名</h1>
</div></div>
<div class="navi"><div class="navifield">
　<dl>サイドメニュー</dl>
</div></div>
<div class="main"><div class="field">
　（本文）
<div id="idbottom">
　フッター
</div>
</div></div>

補足説明

• deceiver(0205)、deceiver_n(0207)、works(0207)、2ch(0205) に必須の要素はありません。
• div.frame は delta(0205) で必須。
• div.frame、div.navi、div.main の2重 div 3点セットは dino(0205)、dummy(0205)、2cher(0205) に必要です。なお、擬似フレームの固定表示部分に div.navi を割り当てているため、div.navi がない場合、無駄な余白ができます。
• div#idbottom によるフッターは deceiver(0205) と delta(0205) に対応しますが、必須ではありません。

一覧へ戻る

• CSS アーカイブ

↓表示サンプル↓

h1　a

h2　a

h3　a

h4　a

h5　a

h6　a

p　ひらがな　カタカナ　漢字　alphabet

p　使う要素→a リンク, em 強調, strong さらに強調, q インラインの引用, del 削除, ins 追記

p　使わない要素（基本的にスタイル未定義）→　b 太字, u 下線, cite 出典, i 斜体, strike 取消線, tt 等幅, code コード, dfn 定義されたターム, abbr 略語, acronym 頭辞語, samp 出力例, kbd キーボード入力文字列, var 変数, ^{sup 上付き文字}, _{sub 下付き文字}, big 大きな文字, small 小さな文字

• ul li
  • ul li ul li　いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす
    • ul li ul li ul li

      ul li ul li ul li blockquote p

    • ul li ul li ul li
    • ul li ul li ul li

    ul li ul li p　とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち

1. ol li
   1. ol li ol li　あめ つち ほし そら やま かは みね たに くも きり むろ こけ ひと いぬ うへ すゑ ゆわ さる おふ せよ えのえ[je]を なれ ゐて
      1. ol li ol li ol li
2. ol li

   ol li blockquote p　たゐにいて なつむわれをそ きみめすと あさりおひゆく やましろの うちゑへるこら もはほせよ えふねかけぬ

dl dt

dl dd

dl dd

dl dt

dl dt

1. dl dd ol li

   dl dd ol li blockquote p

dl dd dl dt

dl dd dl dd

blockquote p

• blockquote ul li

1. blockquote ol li

blockquote dl dt

blockquote dl dd

blockquote blockquote p

caption

thead th	thead th	thead th
tbody th	tbody td	tbody td table tbody td table caption 子table thead th 子table thead th 子table thead th 子table tbody th 子table tbody td 子table tbody td 子table tfoot th 子table tfoot td 子table tfoot td
tfoot th	tfoot td	tfoot td

legend　フォーム

• 　text
• 　password
• 　checkbox
• 　radio（label）
• 1 2 3

hr は下記の通り（注：一部のスタイルでは非表示）。

---