CSS アーカイブ（2003-02-07）
スタイル紹介
- Change!!(0302)
デフォルトスタイルです。
実質的には deceiver(0302) です。備忘録の上に登場するたくさんのリンクをコンパクトに表示するため、実質3段組のレイアウトを採用。右肩のナビゲーションも充実させ、サイトのメインコンテンツをしっかり紹介しつつも、備忘録の読者にも不都合のないレイアウトを実現できるよう、いろいろ工夫しています。
装飾面では、deceiver(0205) からChange!!(0210) まで一貫していた border による見出しの表現を「うるさい」と感じるようになり、border をあまり用いず、それでいて見出しレベルが明瞭にわかるよう……と頭を悩ましています。見出しに背景色を入れるのも、見出しを帯状に強調するのと同じことなので、dt 要素にのみ採用しています。
試行錯誤の末、div に左 padding を設定し、見出しはマイナスの左 margin を取ってレイアウト基準線より左へ突き出し、本文に登場するブロックレベル要素は逆に小さなプラスの左 margin を取って基準線より一定距離だけ右に配置される、という方法を採用しました。上位の見出しほど基準線からの突き出しが大きくなるため、border に頼らずとも見出しレベルは一目瞭然です。しかも本文で用いるブロックレベル要素の左 margin が小さいため、本文中でのブロックレベル要素の入れ子について、特別に配慮したスタイル記述が一切不要となりました。
……しかしマイナスの左 margin は段組の邪魔となり、トップページには CSS の都合としか説明のしようがない div 2重がけが残ることになります。絶対配置で段組する手もあったのですが、調整が難しく、2重の div を float で並べる簡単さを選びました。
余談ですが、h1 の背景画像は Change!!(0210) の body 背景画像の一部を切り出したものです。新しい body の背景画像はティラノサウルスの全身骨格。アパトサウルスは短命政権で、すぐにティラノへ戻ってきたわけですが、薄い青紫の単色画像という処理は Change!!(0210) から引き継いでいます。
- flower(0302)
flower はいじればいじるほどダメになっていくスタイルでした。サイト名を画面の左上に固定表示し、本文とサイドバーを border で区切っているのですが、効果的な表現だとは思えません。またサイドバーに表示したい内容がないのに擬似フレームを維持することにはやはり無理があって、今回限りで flower は退役することになりました。
- ankoku(0302)
ankoku(0210)から大きな変化はありません。
- tnstyle(0302)
tnstyle(0210)から大きな変化はありません。
- HTMLの構成
<body id="gate">
<div id="contents">
<h1>サイト名</h1>
<ul id="gn">サイト内移動</ul>
<div id="main_menu">
<div id="lecture"></div>
<div id="advice"></div>
</div>
<div id="sub_menu">
<div id="text"></div>
</div>
<div id="add">
<ul id="ln">ページ内移動</ul>
（本文）
<ul id="address">フッター</ul>
</div>
</div>
</body>- 補足説明
- h1 に始まり ul#address に終るのが基本構成ですが、ankoku(0302) と tnstyle(0302) に必須の要素はありません。
- Change!!(0302) と flower(0302) では div#contents のみ必須です。なお、擬似フレームの固定表示部分に div#note_index または ul#ln を割り当てているため、div#note_index や ul#ln がない場合、無駄な余白ができます。
- ul#gn の配置は自由。
- div#main_menu、div#sub_menu は見出しを含むリンク群を2カラムで表示する場合に使ってください。div#add は float を解除します。
- 一覧へ戻る
↓表示サンプル↓
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 は下記の通り（注：一部のスタイルでは非表示）。