CSS アーカイブ（2002-10-25）
スタイル紹介
- Change!!(0210)
デフォルトスタイルです。
実質的には deceiver(0210) です。ページ内リンクを用意する手間を惜しむようになった結果、dino や dummy など擬似フレームを駆使していた2002年5月時点の主要スタイルは退役し、NN4 向けの汎用性追求型スタイルだった deceiver が全体のデフォルトスタイルへと昇格しました。
しかしその際、結局は擬似フレームを取り込み、deceiver ベースの dino スタイルとでもいうべき仕上がりとなりました。think(now) に通じる h1 の背景画像が登場したのもこのとき。水の流れを表現したイラスト、あるいは木目を青くしたようにも見えますが、じつは購入した素材集の風景写真を引き伸ばして色調を変えたものです。また、ティラノサウルスの頭骨に替えて登場した草原を歩くアパトサウルスの加工画像は、草原部分の仕上がりが面白かったため、後にいろいろ転用されることになります。
この頃、私は本文に様々な要素を用いるようになったので、必要なスタイル指定が急激に増えました。そのため、Change!!(0210) は deceiver(0205) の2倍近い文字数となっています。これが本当につらくて、複数のスタイルをメンテナンスすることに嫌気がさしたため、deceiver と同じく汎用型のスタイルだった works や delta も、この時期に退役させました。
ところで、deceiver とは詐欺師という意味。うさんくさい内容のサイトでも、見た目が端正だと説得力が増してしまう。そんな意味です。それを Change!! と改名したのは、当時、CSS の啓蒙活動をしていたことに関係しています。CSS 切替スクリプトは CSS で装飾する面白さを体感する最高のツールだと思う。デフォルトスタイルの名称を Change!! にすれば、CSS 切替のセレクトボックスにデフォルトで「Change!!」と表示されます。これなら多くの人が CSS を切り替えてみたくなるんじゃないかな……と期待したのです。
- flower(0210)
スタイル切替の啓蒙用に残したスタイルです。works や delta は男性的で、スタイルを変えてもインパクトが薄いと感じたため、ガールズサイト志向に挫折した flower(0205) を大改装して全面ピンクの flower(0210) を作りました。石鹸の包装っぽい仕上がりを目指し、概ね実現できたんじゃないかと思っています。
本文中の要素の装飾は deceiver(0210) の色違いです。本当は見出しの装飾なんかも花っぽくしたらよかったのでしょうが……。works や delta を退役させたのと同じ理由で、手抜きをしています。
- ankoku(0210)
野嵜健秀さんのALLNET最終版スタイルを少し改造（5分割されていたCSSをひとつに）したものです。ほとんどの要素についてスタイルの指定がされていて、再利用が許されており、なおかつデフォルトの Change!!(0210) とは全く見た目の異なるスタイルとして選択しました。
- tnstyle(0210)
野嵜健秀さんの@NetHome第四版スタイルを少し改造（5分割されていたCSSをひとつに）したものです。選択の理由は ankoku(0210) と同じです。
- print(0210)
印刷用スタイル。works(0207) をベースとして、モノクロで印刷しても要素の把握が容易であることを意図しています。しかしその後、自分自身がウェブページの印刷をしなくなったため、メンテナンスを続ける意欲を失い、半年程度で退役しました。
- HTMLの構成
<div id="contents">
<h1 id="idindex">サイト名</h1>
<ul id="gn">サイト内移動</ul>
<ul id="ln">ページ内移動</ul>
（本文）
<ul id="address">フッター</ul>
</div>- 補足説明
- ankoku(0210)、print(0210)、print(0210) に必須の要素はありません。
- Change!!(0210) と flower(0210) は、トップページ以外でも div#contents のみ必須です。なお、擬似フレームの固定表示部分に ul#ln を割り当てているため、ul#ln がない場合、無駄な余白ができます。
- 一覧へ戻る
↓表示サンプル↓
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 とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち
- ul li ul li ul li
- ul li ul li いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす
- ol li
- ol li ol li あめ つち ほし そら やま かは みね たに くも きり むろ こけ ひと いぬ うへ すゑ ゆわ さる おふ せよ えのえ[je]を なれ ゐて
- ol li ol li ol li
- ol li ol li あめ つち ほし そら やま かは みね たに くも きり むろ こけ ひと いぬ うへ すゑ ゆわ さる おふ せよ えのえ[je]を なれ ゐて
- ol li
ol li blockquote p たゐにいて なつむわれをそ きみめすと あさりおひゆく やましろの うちゑへるこら もはほせよ えふねかけぬ
- dl dt
- dl dd
- dl dd
- dl dt
- dl dt
- dl dd ol li
dl dd ol li blockquote p
- dl dd ol li
-
- dl dd dl dt
- dl dd dl dd
blockquote p
- blockquote ul li
- blockquote ol li
- blockquote dl dt
- blockquote dl dd
blockquote blockquote p
| thead th | thead th | thead th | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| tbody th | tbody td | tbody td
|
|||||||||
| tfoot th | tfoot td | tfoot td |
hr は下記の通り（注：一部のスタイルでは非表示）。