Elements Check

このページでは、記事内にさまざまな要素を出現させています。また、個別ページにしかないコメントとトラックバック欄のスタイルの確認ができます。

各(モダン)ブラウザーで、フォントサイズや余白を出来るだけ揃えました。また、テーブルやフォームなどは簡素ですが、自分の良く使う見栄えに整形しています。いつもここから色やボーダー、余白を調整してサイトの基礎部分を作っています。

このXHTML文書は、各要素の見栄えをチェックするために作ったので、内容的に意味のあるものではありません。無理やり色々な要素を出現させていたりしてますしー。

いきなりStrong!

kbd要素 Enter Tab Shift, kbd.accesskey P H N

これはP要素です。P要素のPはパラグラフ［Paragraph］のPで、長い文章の中の、一つの主題をもってまとまった部分、日本語では段落と訳されております。abbr要素→HTMLでは code要素→<p>文章</p>と書きます。

段落は１つのセンテンスを持ちます。センテンスとは、その段落の主張を一文でまとめたもので、センテンスのある上手な文章ならば、長い段落でも数秒で内容が把握できます。したがって、センテンスは段落の先頭に持ってくるのが良いとされています。

Ohh... Alphabet tte iiyonaa... Ippai kirei na Font arusi. tiisakutemo yomiyasuisi. zukkoi Death... MS gothic ha mou akitayo. motto Design sasero-!!! Ohh... Alphabet tte iiyonaa... Ippai kirei na Font arusi. tiisakutemo yomiyasuisi. zukkoi Death... MS gothic ha mou akitayo. motto Design sasero-!!!

• aaaaaaa
• bbbbbbb

上は引用した文章、blockquote要素。

Edit Module

貴方はIE6.0を使っているんですかぁ、del要素→"私も同じくずっとIE6.0を使ってますー。使い慣れてるのが一番ですもんねぇ、　ins要素→(現在はFirefoxを使用しています)、FirefoxのIE6と違う点といったら、タブブラウザーなことですかねー。タブは便利ですねー。Firefox用の沢山のPluginが出てるのもいいですねぇ。

List Module

ul, ol, li

今僕が欲しいものは

1. 電子レンジ
2. OmegaかRolexの腕時計
3. にゅーPC

項目はli要素、項目に順序があるなら外側をolで囲います。項目が並列の関係ならば、ulで囲います。

			<ul id="utilities">
			
			 <li>Entries AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
			  <ul>
			   <li>Entry1</li>
			   <li>Entry2</li>
			   <li>Entry3</li>
			
			  </ul>
			 </li>
			<li>Categories
			   <ul>
				<li>Category1</li>
				<li>Category2</li>
			
				<li>Category3</li>
			   </ul>
			  </li>
			</ul>
			

リストのネスト、ネストなリスト

リストが入れ子の状態になったときなどにフォントサイズが小さくなりすぎないように指定しています。

• About
  • This site
  • My Profile
• Categories
  • Diary
  • Movable Type
  • Artworks
  • XHTML/CSS
  • Links
• Guest Book
• Links

  LIの中にP要素P要素P要素P要素P要素

  LIの中にDT定義タイトル

  LIの中にDD定義説明

  • ABCDE cup
  • ABCDE cup
  • ABCDE cup
  • Fantasista CUP
    • ABCDE cup
    • ABCDE cup
    • ABCDE cup

dl, dt, dd

誰かさん

ねぇねぇウータンてA型でしょ

俺

おお、何でわかるの！

誰かさん

誰でもわかるよ。A型そのまんまって感じだよ。(笑

俺

残念、本当はO型でした。

誰かさん

え？O型!?　あ！あるある、そういうとこある～！(笑

img要素

Table Module

Yahoo UI Library Fonts CSSでは、body要素のフォントサイズに13pxの基準値を指定し、他の要素はその基準値からの相対的なフォントサイズをパーセンテージで指定します。

ブラウザ使用率

OS	パーセンテージ
IE6.0	74.84%
Firefox 1x	15.9%
Safari	3.35%
Opera	2.25%

Heading Level2

Heading Level3

Heading Level4

Heading Level5

Heading Level6