h1:ViewElements スタイル

使用ファイル

説明

背景

2004年12月13日に作成。IEで見ると何やってるんだかまるで分からないが、とりあえずGundomColor?スタイルと混ぜて代替スタイルにしてみた(→Firefox1.0で表示した際のスクリーンショット)。

自分のアイデアというわけではなくて、どこかのサイトで見た覚えのある遊びを真似してみただけなんだけど、HTML4.01Strict相当(だったかなぁ)の要素に:before:after疑似要素を引っ付けてソース風に表示させてどうこう、っていうもの。titleとかclassとかidを表示させようとしたらファイルサイズが愉快な事になった。

「本文と追加要素の区別を付けづらくなる」という意味で、Operaで見るのが一番おもしろいと思う。

やっていること

CSS2仕様書邦訳にもあるが、:before疑似要素と:after疑似要素に対しcontentプロパティを使用すれば文書の内容を生成することができる。また、生成内容には要素の持つ属性値(id、class、titleなど)を含むことが可能である。

それを踏まえ、下に示すコード(生成内容は属性セレクタによって制御される)を凡例とし、多くの要素に対して泥臭く同じ指定を行えば、このページに適用しているスタイルシートが完成する。……というか、もうちょっとスマートにならないもんかなコレ。

Internet Explorerはこの:before疑似要素と:after疑似要素に対応していないため、このページのスタイルは通常と何ら変わりないものとなっているはず。

凡例

p:before {
content:"<p>";
}

p:after {
content:"</p>";
}

p[title]:before {
	content:"<p title=\"" attr(title) "\">";
}

p[id]:before {
	content:"<p id=\"" attr(id) "\">";
}

p[class]:before {
	content:"<p class=\"" attr(class) "\">";
}

p[title][id]:before {
	content:"<p title=\"" attr(title) "\" id=\"" attr(id) "\">" ;
}

p[title][class]:before {
	content:"<p title=\"" attr(title) "\" class=\"" attr(class) "\">" ;
}

p[id][class]:before {
	content:"<p id=\"" attr(id) "\" class=\"" attr(class) "\">" ;
}

p[title][id][class]:before {
	content:"<p title=\"" attr(title) "\" id=\"" attr(id) "\" class=\"" attr(class) "\">" ;
}

h2:見出しのテスト

h3:見出し

h4:見出し

h5:見出し
h6:見出し

h2:段落を挟んだ際の、見出し間の距離をテスト

および、id付き見出し要素のテスト。

h3:見出し

段落です。

h4:見出し

段落です。

h5:見出し

段落です。

h6:見出し

段落です。

h2:主要ブロック要素のテスト

h3:p, hr

段落であります。折り返しがどこまで続くかなどを調べるために、少し長くしてあります。如何なる環境でもとりあえず折り返されてくれなければいけませんから、長さというものは稼がねばなりません。寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路のぶら小路パイポパイポパイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナーの長久命の長助。

段落どうしの距離はこんなもんです。


この上に罫線があります。

h3:ul

以下の記述で、ulとその子にリストを入れた場合の表示結果を確認します。

h3:ol

以下の記述で、olとその子にリストを入れた場合の表示結果を確認します。

  1. 順列リストです。
  2. 順列リストです。
  3. 順列リストです。
    1. これも順列リストです。
    2. これも順列リストです。
  4. 順列リストです。
    これは
    定義型リストです。
    これは
    定義型リストです。

h3:dl

以下の記述で、dlとその子にリストを入れた場合の表示結果を確認します。

これは
定義型リストです。
これは
定義型リストです。
これは
定義型リストです。
  1. これは順列リストです。
  2. これは順列リストです。
これは
定義型リストです。
これは
定義型リストです。
定義型リストです。
これは
定義型リストです。

h3:address

address要素はここです。
一応、終端にも書いてあります。

h3:pre

整形済テキストです。
<dl>
 <dt>これは</dt>
  <dd>定義型リストです。</dd>
 <dt>これは</dt>
  <dd>定義型リストです。
    <ul>
     <li>これは順不同リストです。</li>
     <li>これは順不同リストです。</li>
    </ul>
  </dd>
 <dt>これは</dt>
  <dd>定義型リストです。
    <ol>
    <li>これは順列リストです。</li>
    <li>これは順列リストです。</li>
    </ol>
  </dd>
 <dt>これは</dt>
  <dd>定義型リストです。
     <dl>
     <dt>これは</dt>
      <dd>定義型リストです。</dd>
      <dd>定義型リストです。</dd>
     </dl>
  </dd>
 <dt>これは</dt>
  <dd>定義型リストです。</dd>
</dl>
codeを子要素とした整形済テキストです。
<dl>
 <dt>これは</dt>
  <dd>定義型リストです。</dd>
 <dt>これは</dt>
  <dd>定義型リストです。
    <ul>
     <li>これは順不同リストです。</li>
     <li>これは順不同リストです。</li>
    </ul>
  </dd>
 <dt>これは</dt>
  <dd>定義型リストです。
    <ol>
    <li>これは順列リストです。</li>
    <li>これは順列リストです。</li>
    </ol>
  </dd>
 <dt>これは</dt>
  <dd>定義型リストです。
     <dl>
     <dt>これは</dt>
      <dd>定義型リストです。</dd>
      <dd>定義型リストです。</dd>
     </dl>
  </dd>
 <dt>これは</dt>
  <dd>定義型リストです。</dd>
</dl>

h3:blockquote

下記には、title属性とcite属性を明示したblockquote要素が置かれています。

寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路のぶら小路パイポパイポパイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナーの長久命の長助

下記には、cite属性とtitle属性の無いblockquoteが置かれています。

段落です。

  1. 順列リストです。
これは
定義型リストです。

段落です。

cite要素は後ほど。

h3:div要素

匿名(と言うかclass、idの無い)div要素の中に入っている段落です。

  1. 順列リストです。
これは
定義型リストです。
そして匿名のdiv要素に入っている生テキストです。

h3:table

caption要素のテスト。
theadの見出しセル見出しセル見出しセル見出しセル
データセルデータセルデータセルデータセル
データセルデータセルデータセルデータセル
データセルデータセルデータセルデータセル
tfootのデータセルデータセルデータセル

h2:主要インライン要素のテスト

本文、強調ひときわ強調引用title付き引用出典title属性付き出典略語定義語プログラムコード出力例

TAL (tal@quadspace.net)