CSS テストページ(now)

h2#RECENT

log RSS [Tw] はてなブックマーク一覧 

テストページにつき、ダミーリンクが多々あります。また (now) の付されたスタイルは更新が続いておりますので、スクリーンショットが古くなっている場合があります。ご容赦ください。

スタイル一覧
green(now)
green(1011)
think(now)
plant(1011)

スタイル紹介

green(now)

green(now)

2010年11月6日以降のデフォルトスタイルです。

green(1011) を大幅に書き換えたスタイルです。リンクの装飾を変更、div なし対応、h1 複数回登場に対応、max-width 対応、などが主な変更点です。詳細は「green」変更点メモ(2010-11-06)を参照してください。なお、元のバージョンは green(1011) として保存しています。

green(1011)

green(1011)

11月4日から6日までデフォルトスタイルでした。

WebbingStudio さんに製作していただきました。詳細は新スタイル「green」の製作過程メモ(2010-11-01)などを参照してください。

think(now)

think(now)

2009年春までのデフォルトスタイル。

plant(1011)

plant(1012)

2009年春から2010年10月までデフォルトスタイルでした。2010年11月9日最終更新。2011年5月11日、代替スタイルからも退役。

HTMLの構成

<div id="wrapper">
 <h1></h1>
 <ul id="gn">サイト内移動</ul>
 <table id="CATEGORY" class="menu"></table>
 <div id="main">
  <h2 id="RECENT"></h2>
  (本文)
  <ul id="address"></ul>
 </div>
</div>

補足説明
  • green(now) では、冒頭に h1 を、末尾に ul#address を配置する必要があります。また table.CATEGORY がある場合は、div 2つと h2#RECENT も必要になります。
  • green(1011) では、green(now) の制約に加え、常に div#wrapper と div#main がないと見た目がさびしくなる他、h1 の複数回登場は禁止です。
  • think(now) に必須の要素は皆無。上記の構成を完全に無視してかまいません。
  • plant(2011) では、最初の見出しを h1 にしてください。h1 の前に見出し以外の何かが入るのは問題なし。その他に制約はありません。
  • ul#gn の配置は自由。
  • ul#gn と table#CATEGORY の利用は任意。
一覧へ戻る

↓表示サンプル↓

div#main 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 小さな文字

  1. ol li
  2. ol li
    1. ol li ol li
    2. ol li ol li
dl dt
dl dt
ddにべた書き

dd内のp.as-it-is

  • dl dd ul li
  1. dl dd ol li
子dlのdt
子dlのdd

blockquote p

  • blockquote ul li
  1. blockquote ol li
blockquote dl dt
blockquote dl dd

blockquote blockquote p

caption
thead ththead ththead th
tbody thtbody tdtbody td
子table caption
thead ththead ththead th
tbody thtbody tdtbody td
tfoot thtfoot tdtfoot td
tfoot thtfoot tdtfoot td
legend フォーム
  •  text
  •  password
  •  checkbox

hr は下記の通り(注:CSSthink.css では非表示)。


↑で div#wrapper と div#main は終了です。↓では body 直下に要素を配置しています。

h1 a

h2 a

h3 a

h4 a

h5 a
h6 a

特殊

p.source あいうえお かきくけこけこ さしすせそ 季語は柿です 胸を張るきみ

p.longsource
仏説摩訶般若波羅蜜多心経
観自在菩薩行深般若波羅蜜多時、照見五蘊皆空、度一切苦厄。
舎利子。
色不異空、空不異色、色即是空、空即是色。
受・想・行・識亦復如是。
舎利子。
是諸法空相、不生不滅、不垢不浄、不増不減。
是故空中、無色、無受・想・行・識、無眼・耳・鼻・舌・身・意、無色・声・香・味・触・法。
無眼界、乃至、無意識界。
無無明、亦無無明尽、乃至、無老死、亦無老死尽。
無苦・集・滅・道。
無智亦無得。
以無所得故、菩提薩?、依般若波羅蜜多故、心無?礙、無?礙故、無有恐怖、遠離一切顛倒夢想、究竟涅槃。
三世諸仏、依般若波羅蜜多故、得阿耨多羅三藐三菩提。
故知、般若波羅蜜多、是大神呪、是大明呪、是無上呪、是無等等呪、能除一切苦、真実不虚。
故説、般若波羅蜜多呪。
即説呪曰、羯諦羯諦波羅羯諦波羅僧羯諦菩提薩婆訶。
般若心経

p a.note

p.as-it-is 字下げのないp要素。会話文などの表現に使う。その他の特殊な要素としては、文書冒頭部に配置される ul#gn と末尾に配置される ul#address と目次ページに使う table.menu がある。

h3#LOG