Color Selector

default niceblue intenseblue otherblue blue puregreen grassgreen green olive gold orange pink fuchsia violet red

Container Selector

テスト(デザイン用)

Share on LinkedIn
Pocket


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 (in section)

Heading 2 (in section)

Heading 3 (in section)

Heading 4 (in section)

Heading 5 (in section)
Heading 6 (in section)

Heading 1 (in article)

Heading 2 (in article)

Heading 3 (in article)

Heading 4 (in article)

Heading 5 (in article)
Heading 6 (in article)

Heading 1 (in hgroup)

Heading 2 (in hgroup)

Text-level semantics

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Address: somewhere, world

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example

Embedded content

audio


img


svg



video


Interactive content

details / summary

More info

Additional information

  • Point 1
  • Point 2

Grouping content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
<html>
    <head>
    </head>
    <body>
        <div class="main"> <div>
    </body>
</html>

blockquote

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.

ordered list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

unordered list

description list

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value

figure

Figcaption content

Tabular data

Jimi Hendrix – albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00

Forms

Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.

Inputs as siblings of labels

Clickable inputs and buttons

box-sizing tests

Default Style Sheet

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

a.. souieba Windows Vista de New Font demasune. Meiryo toka iuyatu. Flash8 demo tukawareteru New Anti-alias technology ClearType wo zentei to site tukurareta Font datte. miyasui hazudawa

Text Module

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

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

いきなりStrong!

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

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

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

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. Nixsonの腕時計
  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要素 a

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 Level1

Heading Level2

Heading Level3

Heading Level4

Heading Level5
Heading Level6

Form Module

Comment Form

Remember Me?




問い合わせがボチボチあるので返答しますが、このページは要素の見栄えを確認するために3ping.org管理人が製作したものですが、使いたい場合は自由に使用して下さって結構です。

Return to Page Top

address 3ping.org wu@gmail.com
Share on LinkedIn
Pocket