CSS 着せ替え用 XHTML 1.1 文書
Abstract
CSS 確認用のサンプル XHTML 文書です。
ワツニュさんの人ん家のスタイルシートで表示を利用させて頂き、以下の入力フォームより人様の CSSファイル を指定することでそのスタイルシートを適用することもできます。
<h2>見出し</h2>
<h3>ヘディング3</h3>
<h4>ヘディング4</h4>
<h5>ヘディング5</h5>
<h6>ヘディング6</h6>
基本的なブロック要素
段落
<p>私はペンを持っている。</p>
引用
cite 要素で出典を示す場合
<blockquote>
<p>吾輩は猫である。名前はまだない。…</p>
<p><cite>夏目漱石『吾輩は猫である』</cite></p>
</blockquote>cite 属性で出典を示す場合
<blockquote cite="urn:ISBN:4003101014" title="夏目漱石『吾輩は猫である』">
<p>吾輩は猫である。名前はまだない。…</p>
</blockquote>整形済テキスト
<pre>整形済み要素では 改行も空白も、 あるがままに扱われる。
</pre>基本的なインライン要素
語句の強調
<em>強調する</em><strong>さらに強調</strong>
文中引用
<cite>夏目漱石の『吾輩は猫である』</cite>で
という有名な書き出しがある。<q>吾輩は猫である。名前はまだない。</q>
語句の説明
<dfn title="Macintoshユーザー">マカー</dfn><acronym title="North Atlantic Treaty Organization">NATO</acronym><abbr title="ショスタコーヴィチ交響曲第9番">タコ9</abbr>
改行
<p>あの人はバナナが好きだという。<br />
バナナの花ってどんなの？</p>
プログラム関連
<code>ソースコード</code><kbd>キーボード入力</kbd><samp>サンプル</samp><var>変数・引数</var>
リスト要素
番号無しリスト
<ul><li>私が好きな真っ赤なりんご</li><li>あなたが好きなのはバナナ</li>
</ul>番号付きリスト
<ol><li>まず良く洗ってから皮をむき</li><li>それからおもむろに囓りつく</li>
</ol>リストの入れ子
<ul><li>私が好きな真っ赤なりんご<ul><li>りんごといえばやはり陸奥</li><li>いいえ、なんといってもマッキントッシュ</li></ul></li>
<li>あなたが好きなのはバナナ</li>
</ul>定義型リスト
<dl><dt>りんご</dt><dt>apple</dt><dd>赤い色をした丸い果物。</dd><dt>バナナ</dt><dd>黄色い色をした細長い果物。</dd><dd>あなたが好きだといった食べもの。</dd>
</dl>追加・削除
ブロック要素として
<ins datetime="2002-10-07T00:00:00+09:00"><p>追記です。</p>
</ins><del datetime="2002-10-07T00:00:00+09:00"><p>古くなった情報です。</p>
</del>インライン要素として
<p><ins datetime="2002-10-07T00:00:00+09:00">追記です。</ins></p>
<p><del datetime="2002-10-07T00:00:00+09:00">古くなった情報です。</del></p>
その他のブロック要素
横罫線
<hr />その他のインライン要素
画像の表示
<img src="images/test.png" alt="代替文字" width="32" height="32" />
ルビ
<ruby><rb>融解塩電解</rb></ruby>
テキストの進む方向
<bdo dir="rtl">右から左へ</bdo>
表現・演出
- x
<sup>2</sup> - H
<sub>2</sub>O <i>イタリック</i><b>ボールド</b><tt>等幅</tt><small>小さく</small><big>大きく</big>
フォーム要素
一般的なフォーム
テーブル要素
行と列のグループ化
| 名称 | 味の特徴 | 色 |
|---|---|---|
| 果実総括 | 味覚総括 | 色彩総括 |
| りんご | 甘酸っぱい | おおむね赤 |
| なつみかん | かなり酸っぱいと思う | たいてい黄色 |