概要

このページは、
スタイルシートを用いないで
HTMLだけの見た目を
例示するページです。

ヘッダ, フッダなど制御用の箇所は、例外としてスタイルシートを用いています。特定の箇所をセレクタで限定する方法でスタイルシートを記述しています。

古いブラウザでも確認程度は出来る事を目標としています。
文法としては HTML5 で記述しています。ただ、HTML5 で新しく定義された要素などは使用せずに section 要素は div 要素で代用など、出来るだけ簡素な要素で記述しています。
あくまでスタイルシートを（記述者が）用いない場合の見た目のサンプルであり、HTML の各要素の例示ではありません。

以下は、前のページ「ＣＳＳとは」の「HTMLとは」を転記したものです。

HTMLとは

HTMLとは、
ハイパーテキストを
記述する為の、
マークアップ言語の
1つです。

HTMLとは Hypertext Markup Language(ハイパー テキスト マークアップ ランゲージ)の略語で、ハイパーテキストを記述する為のマークアップ言語の1つです。
Webページを表現する為に用いられ、「複数の文書を結び付ける役割のハイパーリンク」, 「画像等の埋め込み」, 「文書の論理構造や表示の仕方」などの記述等ができる言語の名称です。
SGMLを元に開発され、W3C勧告で標準化しています。文書の表示に関しては、スタイルシート言語にて記述して表示します。

HTMLに関しては、「離珠のHTMLでしぃ！」で記述しています。

いくつかの要素

見出し要素

h1例１

h1例２

h1例３

  1. <h1>h1例１</h1>
  2. <section>
  3. <h1>h1例２</h1>
  4. <section>
  5. <h1>h1例３</h1>
  6. </section>
  7. </section>

section 要素等の階層により h1 要素の装飾がブラウザによって異なっています。

整形済み要素等

罫線 
   整形済み

   改行してみた。
空白も  複数で
code要素と kbd要素と samp要素の例
  1. 罫線
  2. <hr>
  3. <pre> 整形済み
  4. <br > 改行してみた。
  5. 空白も  複数で</pre>
  6. <code>code要素</code>と
  7. <kbd>kbd要素</kbd>と
  8. <samp>samp要素</samp>の例

ブラウザによって異なる振る舞いの一例です。

アンカー要素等

トップページへ sample
CSSは、 カスケーディング・スタイル・シートの略語で、…
b要素と strong要素の例 small要素の例 H2OとX2の例
  1. <a href="./index.htm">トップページへ</a>
  2. <a href="./index.htm"><img src="./hani_c0504.gif" alt="sample"></a>
  3. <br><abbr title="Cascading Style Sheets">CSS</abbr>は、
  4. カスケーディング・スタイル・シートの略語で、…
  5. <br><b>b要素/b>と
  6. <strong>strong要素</strong>の例
  7. <small>small要素</small>の例
  8. H<sub>2</sub>OとX<sup>2</sup>の例

ブラウザによって異なる振る舞いの一例です。

フォーム要素等

legend の例






















70 %
  1. <form>
  2. <fieldset>
  3. <legend> legend の例</legend>
  4. <label for="iinInput">Sample input:</label><br>
  5. <input id="iinInput" size="12"><br><br>
  6. <label for="iinNumber">Sample input number:</label><br>
  7. <input id="iinNumber" type="number"><br><br>
  8. <label for="iinSearch">Sample input search:</label><br>
  9. <input id="iinSearch" type="search" size="12"><br><br>
  10. <button>ボタンの例</button><br><br>
  11. <input type="button" value="input button"><br><br>
  12. <input type="reset" value="input reset"><br><br>
  13. <input type="checkbox" id="iinCheckbox" name="ninCheckbox" checked>
  14. <label for="iinCheckbox"">: Sample checkbox</label><br><br>
  15. <input type="radio" name="ninRadio" value="radio1" checked>
  16. <input type="radio" name="ninRadio" value="radio2">
  17. <input type="radio" name="ninRadio" value="radio3"><br><br>
  18. <select id="iseSelect">
  19. <optgroup label="optgroup例１">
  20. <option>option例1-1</option>
  21. <option>option例1-2</option>
  22. <option>option例1-3</option>
  23. </optgroup>
  24. <optgroup label="optgroup例２">
  25. <option>option例2-1</option>
  26. <option>option例2-2</option>
  27. <option>option例2-3</option>
  28. </optgroup>
  29. </select><br><br>
  30. <textarea id="iteTextarea" name="iteTextarea" rows="3" cols="15">
  31. textarea sample.
  32. </textarea><br><br>
  33. <progress value="70" max="100">70 %</progress>
  34. </fieldset>
  35. </form>

ブラウザによって異なる振る舞いの一例です。
(JavaScriptの例示ではありません)

インタラクティブ要素等

Details インタラクティブ要素のサンプル
  1. <details>
  2. <summary>Details</summary>
  3. インタラクティブ要素のサンプル
  4. </details>

ブラウザによって異なる振る舞いの一例です。

hidden属性等

ここにtemplate要素とhidden属性の例があります。
(display: none;なので見えませんが。)

  1. <p>ここにtemplate要素とhidden属性の例があります。
  2. <br>(<code>display: none;</code>なので見えませんが。)</p>
  3. <template>templateの例</template>
  4. <div hidden>hidden属性の例</div>

ブラウザによって異なる振る舞いの一例です。

ブロック引用要素等

blockquote ブロック引用要素の見本
改行してみた。空白も複数で揃えたつもり
div ブロック引用要素の見本
改行してみた。空白も複数で揃えたつもり
  1. <blockquote>blockquote ブロック引用要素の見本
  2. <br > 改行してみた。空白も複数で揃えたつもり</blockquote>
  3. <div >div ブロック引用要素の見本
  4. <br > 改行してみた。空白も複数で揃えたつもり</div>

ブラウザによって異なる振る舞いの一例です。

リスト要素等

  • 順序なしリスト要素 ul
  • 順序なしリスト要素 ul
    • 順序なしリスト要素 ネスト ul ul
    • 順序なしリスト要素 ネスト ul ul
  1. <ul>
  2. <li>順序なしリスト要素 ul</li>
  3. <li>順序なしリスト要素 ul</li>
  4. <li><ul>
  5. <li>順序なしリスト要素 ネスト ul ul</li>
  6. <li>順序なしリスト要素 ネスト ul ul</li>
  7. </ul></li>
  8. </ul>

ブラウザによって異なる振る舞いの一例です。

説明リスト要素等

説明用語要素 dl dt
詳細説明要素 dl dd
説明用語要素 dl dt
詳細説明要素 dl dd
  1. <dl>
  2. <dt>説明用語要素 dl dt</dt>
  3. <dd>詳細説明要素 dl dd</dd>
  4. <dt>説明用語要素 dl dt</dt>
  5. <dd>詳細説明要素 dl dd</dd>
  6. </dl>

ブラウザによって異なる振る舞いの一例です。

行内引用要素等

行内引用要素
  1. <div><q>行内引用要素</q></div>

ブラウザによって異なる振る舞いの一例です。