Cascading Style Sheet Test Page
デザインの考証

　様々なブラウザにおいて同様な表示結果を得ることを目指すための CSS 動作チェック用サンプルページです。当サイト内で使用しているほとんどの CSS デザインの定義を、実際の表示結果で参照することが出来ます。…というのは半分表向きで、肥大化のためにカオスと化しつつある CSS 定義一覧をここで整理し直して今後の発展に役立てるための、個人的な備忘録もちょっとだけ兼ねています。
　ちなみにあなたが今これをご覧になっている UA は CCBot/1.0 (+http://www.commoncrawl.org/bot.html) ですよ～。

見出し (h1, h2, h3, h4, h5, h6)

デフォルト（クラスを指定しない状態）

見出し１(h1)

見出し２(h2)（未定義）

見出し３(h3)（未定義）

見出し４(h4)（未定義）

見出し５(h5)
見出し６(h6)
クラス指定

h1 : 長尺対応バージョン

　クラス名は "long"。

h1 : トラックバックバージョン

　クラス名は "trackback"。

h1 : Halloween スタイル

　クラス名は "halloween"。

表組み (table, tr, td, caption)

デフォルト（クラスを指定しない状態）
ねだん表
ジャガイモ1 こ¥100
しいたけ3 こ¥200
ごぼう2 本¥300
クラス指定
class= "dashed_border"
ねだん表
ジャガイモ1 こ¥100
しいたけ3 こ¥200
ごぼう2 本¥300

　金額を表す部分はセルに直接 class="money" とすることで右寄せになります。

番号なしリスト（箇条書き） (ul, li)

デフォルト（クラスを指定しない状態）
  • ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  • ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  • ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。
クラス指定
class= "circle"
  • ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  • ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  • ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。
class= "checked"
  • ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  • ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  • ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。
class= "inline"
  • ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  • ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  • ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。

　特に箇条書きで表示する必要はないけれども、文書構造としてリスト形式を保持したいときに使います。。

番号ありリスト (ol, li)

デフォルト（クラスを指定しない状態）
  1. ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  2. ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  3. ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。
クラス指定
class= "lower-roman"
  1. ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  2. ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  3. ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。
class= "lower-alpha"
  1. ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  2. ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  3. ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。
class= "katakana-iroha"
  1. ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  2. ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第１条に反する場合は、この限りではない。
  3. ロボットは、前掲第１条および第２条に反するおそれのないかぎり、自己をまもらなければならない。

「イ.ロ.ハ.ニ.」になってませんか？なってませんか、そうですか。

定義リスト (dl, dt, dd)

デフォルト（クラスを指定しない状態）
キリスト教
キリスト教（基督教、キリストきょう）は、ナザレのイエスを救世主キリスト（メシア）と信じ、旧約聖書に加えて、新約聖書に記されたイエスや使徒たちの言行を信じ従う伝統的宗教。
神道
神道（しんとう）は、日本列島に住む民族の間に自然発生的に生まれ育った伝統的な民族信仰を基盤として、豪族層により中央や地方の政治体制と関連しながら徐々に成立した日本固有の多神教の宗教。明確な教義はなく、森羅万象に神が宿ると考え、天津神・国津神や祖霊を祀り、儀礼を重んじる。清浄を第一とし、性善説に立つ。「神ながらの道」の略との説もある。
仏教
仏教（ぶっきょう）は、約2500年前（紀元前5世紀頃）にガウタマ（ゴータマ）・シッダールタ（釈迦）が現在のインド北部ガンジス川中流域で提唱し、各地に広まり現在も続く世界宗教。
クラス指定
class= "circle"
キリスト教
キリスト教（基督教、キリストきょう）は、ナザレのイエスを救世主キリスト（メシア）と信じ、旧約聖書に加えて、新約聖書に記されたイエスや使徒たちの言行を信じ従う伝統的宗教。
神道
神道（しんとう）は、日本列島に住む民族の間に自然発生的に生まれ育った伝統的な民族信仰を基盤として、豪族層により中央や地方の政治体制と関連しながら徐々に成立した日本固有の多神教の宗教。明確な教義はなく、森羅万象に神が宿ると考え、天津神・国津神や祖霊を祀り、儀礼を重んじる。清浄を第一とし、性善説に立つ。「神ながらの道」の略との説もある。
仏教
仏教（ぶっきょう）は、約2500年前（紀元前5世紀頃）にガウタマ（ゴータマ）・シッダールタ（釈迦）が現在のインド北部ガンジス川中流域で提唱し、各地に広まり現在も続く世界宗教。
--

強調表現 (em, strong)

"strong" は "em" より強い強調を表しますが、あんまり使い分けていません。デザイン上の区別も特につけていませんが、おおむねブラウザデフォルトの状態が em は Italic（斜体）、strong は Bold（太字） といった結果で表示されるようです。

デフォルト（クラスを指定しない状態）

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(em 要素による強調表現)

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(strong 要素による強調表現)

クラス指定
class= "red"

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(em 要素による強調表現)

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(strong 要素による強調表現)

class= "big-size"

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(em 要素による強調表現)

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(strong 要素による強調表現)

class= "marker"

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(em 要素による強調表現)

　ピアノの正式名称はグラヴィチェンバロ・コル・ピアノ・エ・フォルテ (Gravicembalo col piano e forte) である。
(strong 要素による強調表現)

コンピュータへの入出力を明示する (code, samp, kbd, var)

デフォルト（クラスを指定しない状態）
code （プログラムソース）
body{
	line-height: 1.4em; /*コメントに色を付けられます。*/
	padding:0px;
	margin:0px;
	font-family:sans-serif;
	color:#4f3232;
}

　ソース中の改行およびタブ類が表示結果にそのまま反映されます。よって、自動改行は行われず、はみ出た文字列に対して自動的にスクロール機構がつきます。

samp （出力サンプル）
Kernel 2.4.20-8 on an i686
login: webmaster
Password:
Last login: Sat Jan 29 20:44:06 from 192.168.1.3
[webmaster@3-tadpoles ]$ /usr/bin/analog
/usr/bin/analog: analog version 6.0/Unix
/usr/bin/analog: Warning F: Failed to create DNS lock file /usr/bin/dnslock:
backing off to DNS LOOKUP
(For help on all errors and warnings, see docs/errors.html)

　ソース中の改行およびタブ類が表示結果にそのまま反映されます。よって、自動改行は行われず、はみ出た文字列に対して自動的にスクロール機構がつきます。

var （変数・引数）

　関数 F に対する演算結果。

kbd （コンピュータへの入力）

　改行を行いたいときは Enter を押す。

クラス指定
kbd class= "block"
# mysqldump -u root --opt blog > /home/webmaster/mt.dmp
kbd class= "keyboard"

Alt + 半角・全角 で日本語入力を開始。 Space にて変換。

略語および頭字語 (abbr, acronym)

デフォルト（クラスを指定しない状態）
abbr（略語）

　携帯電話をケータイと書いたり、PHS をピッチと書いたり。

acronym（頭字語）

　Radio Detection and Ranging の頭文字を取って RADAR（レーダー）と書いたり、ドリームワークス SKG の SKG は 3 人の設立者、Spielberg、Katzenberg、Geffen の頭文字を取ったものとか。

dfn（定義）

　風力発電は、風の力（風力）によって発電機を回して発電することである。

引用 (blockquote, cite, q)

デフォルト（クラスを指定しない状態）
blockquote （引用文）

　リンクを張らせろとかいうしゃらくせぇメールはよこすなバカ野郎！　ケチなんかつけねーから、どこへでも黙ってさっさと張れ！　そういうメールをよこしやがったら、断るからな。いちいち相手の身元を確認していいの悪いの判断するほど暇じゃねーんだ！　そんなけちくさい真似するくらいなら、最初っから無料でこんなもん公開したりしねーぞ！　世間様におめもじさせられねぇと思ったら、その時点で引っ込めるわい。

　黙って張る分にはなんの文句もつけない。絶賛リンクも結構、「こんなバカがいる」的罵倒嘲笑リンクも大いに結構。煮るなり焼くなり好きにしやがれ。ファンメールもかねた事後報告もオッケー。あとおひねりでもくれるってんなら、もらってやるからありがたく思え。いいの悪いの返事も書いて愛想の一つも振りまこうってなもんだ。

cite （出典・参照先）

　Don't Give Me That "Permission to Link" Crap! に上のようなことが書かれていました。

q （引用分）

　リンクを張らせろとかいうしゃらくせぇメールはよこすなバカ野郎！ というのが、私としてもの本音でしょうか。

追加と削除 (del, ins)

デフォルト（クラスを指定しない状態）

　文中の追加された部分や削除された部分を明示するためのもの。

画像 (img)

デフォルト（クラスを指定しない状態）

　Windows Internet Explorer でアンカーとしての画像に下線と同じ色の枠線が自動的に付与されるのを防ぎます。class 定義の有無にかかわらず、全てのリンク付き画像に対して適用されます。

クラス指定
class= "left"

　指定された画像を左に寄せて，その反対側に後続の内容を流し込ませます。
　このプロパティの対象となる要素には，何らかの方法で幅を明示しなければ正常に働いてくれないことになっていますが、ちゃんと指定しても条件によっては変な動きをしちゃうことが IE では多々あるようです。なので、かなりの危険を伴う茨の道なり。
　そんなわけであまり応用的な使い方はしていません。

class= "withborder"

　ジャケット画像など、意図的に画像に対して枠線をつけたいときに。1 ピクセル幅の茶色(#4f3232)の線です。

class= "dashedborder"

　太枠点線を付ける。仕上がりはご覧のとおり。

class= "PhotoFrame"

　サービスプリント風の画像にします。Internet Explorer 6 以前では仕様上出来ないので、単なる10 ピクセル幅の白枠線を付けて代替しています。

class= "PhotoFrameL"

　先ほどの class= "PhotoFrame" の画像に対して、さらにテキスト回り込み属性を付け加えたもの。


--
class= "PhotoFrame2"

　こちらはテープつき。幅 400 px の画像に特化しているので、それより小さい画像だとテープが右に寄ってしまいます（笑）

べんりなクラス定義たち

注釈べんりセット

　本文中からはこんな感じで *1 呼び出す。

  • *1 正式にはテレビ・洗濯機・冷蔵庫 … ではなく、 八咫鏡(やたかがみ)・ 天叢雲剣(あまのむらくものつるぎ)・ 八尺瓊曲玉(やさかにのまがたま) ですね。どうでもいいことですが。
  • *2 よくよく考えたら住んでるのは横浜なので、横浜砂漠？
--
参照元明示べんりセット

　LI と併用した例。

参照元明示べんりセットその２
参照元

　たんに右に寄せるだけ。

その他痒い所に手を届かせるようなクラス定義

　見た目で判らない内容も多いです。

H1見出し下の概要について

　いやぁなんのことはございません。通常の文章に比べてちょっとだけ左の余白をあけて表示するだけです。タイトル下などの概要 (Description) 目的で使用。

メモ。注釈などに。

　文中に対してちょっとしたメモや注釈をしたい箇所を別表現するためのもの。

日時

　一応、日時の標記はフォントなどを統一して制御しておこうかなと。

  • Friday, 09-May-2008 22:01:34 JST 通常版
  • Friday, 09-May-2008 22:01:34 JST 小文字版

コード表記

　譜面に記してあるコード表示を、異なるプラットフォーム上（≒ブラウザ）でもでもそれに近いフォントを選んで表示するためのクラス定義。

Cm7-5、Cm7(♭5)、CØ、C-7-5、C-7(♭5)

セクション枠崩れ防止用 float 解除

　このページの最初に出てくる float 設定を文中で解除する際に、

<br style=”clear:both” />

　とかいちいち書くのが面倒くさいので作ったクラス定義です。

ブラウザ実装上の問題により、派手に使えないクラス定義

　ブラウザの CSS 実装はまだまだ途上の段階であり、W3C で仕様が決まっているのにもかかわらず、ブラウザによっては実際には使えないデザイン方法がまだまだ沢山あります。

ルビ・モジュール（ふりがな）

　XHTML 1.1 から導入されたルビ…モジュールですが、2005 年 2 月現在でこれを表示出来るのは私の知る範囲では Internet Explorer のバージョン 5 以降（Mac 版含む）のみで、さらにそれらでさえも複合およびグループ化されたルビはまだ使えないようです。ちなみに ↓ は普通のルビ。

小泉純一郎 ( こいずみじゅんいちろう )

　どうせまともに表示されないけどグループ化複合ルビは以下を参照。

小泉純一郎 ( こいずみじゅんいちろう KoizumiJunichiro )

　きちんと実装されたブラウザでは以下のような表示イメージになるはずです。

　今後の動向の様子見ですね。

Border Radius
角を丸めて表示しましょ
バトン
質問
そのまま回答
やまなん
そのまま回答