出力

• <li><a href>Personnel</a></li>（訪問済みリンクのつもりです）
• <li><a href>謎リンク</a>（未訪問を保つためクリックしないでください。クリックした際の保証はしません（<dfn>謎</dfn>）。）</li>

<h1>CSS Editor for Internet Explorer5</h1>

<p>このページは、<acronym>WYSIWYG</acronym>もどきのCSSエディタです。textareaに宣言（declaration）を記入し、ボタンを押すとスタイルに反映されます。詳細は下の使いかたをご覧ください。</p>

<p>このエディタでは、div等を使ったテクニカルなスタイル設定は出来ませんが、divやclass、id抜きでCSSを<em>完成させてから</em>、その後色々試してみることを<strong>強く</strong>お勧めします。</p>

<h2>使い方</h2>

1. <li>各要素（タグ名で分かるようにしてあります）をクリックすると、textareaが現われます。ただしハイパーリンクはマウスオーバーでOKです。</li>
2. <li>宣言（declaration）だけ記述してください。セレクタと<dfn>カーリーブラケット</dfn>は不要です。<dfn>セミコロン</dfn>は書いてください。例color:#000;。尚、改行しても大丈夫です。</li>
3. <li>記入が終ったら、セレクタ名のボタン（例H1{ }）を押してください。スタイルが直ちに反映されます。</li>
4. <li>hideボタンを押すとtextareaとボタンを非表示に出来ます。</li>
5. <li>宣言どおりに要素のスタイルが変化すれば成功です。</li>
6. <li>全ての記入が終ったら、ページ上部の出力ボタンを押します</li>
7. <li>Copy to ClipBoardボタンを押すと、出力内容をクリップボードにコピーできます。</li>
8. <li>ちなみに、これは順序型リストOLです</li>

<p>bodyセレクタの宣言（declaration）だけは、このtextareaに記入してください。</p>

<h3>注意</h3>

<p>一度記入したプロパティは<strong>消さないでください</strong>。値を書き換えるようにしてください。最後に正しく出力されません。また、textareaがカラッポのままルールを追加するボタン（例H1 { }）を押してしまうと、JavaScriptエラーになります。</p>

<p>リロードすると全ての宣言（declaration）がリセットされます。</p>

<p>例えばli要素をクリックすると、textareaは二つ現われます。liセレクタ用と、ulセレクタ用です。li要素は、ul要素の子要素だからです。要するに子要素をクリックすると、body以外の全ての親セレクタ用のtextareaが出現します。問題は、それらが重なってしまうことなんですが、hideボタンを押せば見えるようになります。</p>

<p>このエディタで出来るのは、基本的かつ重要なスタイルの設定だけです。クラスやID、div等を使った「テクニカル」なことは出来ません。また、HTMLとCSSの知識が必須となっております。</p>

<h4>補足</h4>

<p>textareaが狭いと思われた場合、適当にwidthとheightを変更してください。例width:30em; height:5em; </p>

<h5>その他</h5>

<p>見出しレベルが不自然に下がっていますが、気にしないでください。</p>

<h6>今後の予定</h6>

<p>アクセスキーを実装してキーボード操作しやすくします。要素も追加します。onkeypress属性もつけます。というか、onkeypress属性ってWin環境なら関係ないような気がするのですが。</p>

<blockquote>

<p>段落レベルの引用</p>

</blockquote>

<p><cite>参照元</cite>より</p>

<h2>これまでに登場しなかったインライン要素</h2>

• <a name>アンカー</a>
• <q>引用句</q>
• <code>コード</code>
• <samp>出力サンプル</samp>
• <var>変数</var>
• ちなみにこれは順不同リストです

<h2>定義リスト</h2>

<dt>被定義語句</dt>

<dd>定義</dd>