Group Style Test.

Robert.KIMATA.info の group 系要素の style test

この文書はスタイル確認を目的としているため、文章構造を無視してテストケースのための markup が行われています

p 要素

段落要素

とても長い単語を含む段落123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 の例

hr 要素

hr 要素の前後は 0.5rem

hr 要素の前後は 0.5rem

blockquote 要素

1段落目: 属性を持たないblockquote

2段落目: とても長い単語を含む blockquote 内の段落123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 の例

1段落目: cite 属性のみ

2段落目

1段落目: title 属性のみ

2段落目

1段落目: cite 属性及び title 属性

2段落目

1段落目: とても長い cite 属性の値ととても長い title 属性の値を持つ blockquote 要素

2段落目: とても長い cite 属性の値ととても長い title 属性の値を持つ blockquote 要素

blockquote 要素内の　pre 要素

text
Super long text
---------1---------2---------3---------4---------5---------6---------7---------8---------9---------A---------B---------C---------D---------E---------F
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

List 要素

  1. ol list 1
  2. ol list 2
  3. ol list 3
    1. ol in ol - list 1-1
    2. ol in ol - list 1-2
    3. ol in ol - list 1-3
    • ul in ol - list 2-1
    • ul in ol - list 2-2
    • ul in ol - list 2-3

  1. p in li 1

  2. p in li 2-1

    p in li 2-2

  3. とても長い単語を含む順序ありリスト123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

dt 1
dd 1
dt 2
dt 3
dd 3

p in dd 4-1

p in dd 4-2

とても長い単語を含むdt要素 `123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890`
とても長い単語を含むdd要素 `123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890`

div 要素

h2 要素の次の div 要素の中の p 要素

div 要素の margin や padding は 0 だが、div 要素の内外に分かれることで margin の打ち消しあいが発生せず段落間の隙間が開いて描画される

div 要素に挟まれた p 要素

div 要素の中の p 要素 1

div 要素の中の p 要素 2

div 要素の後ろの p 要素 1

div 要素の後ろの p 要素 2

h2 要素の属する section 要素の最後の子要素の div 要素の中の p 要素

スタイルを指定ししていない要素

特にStyleを指定していないため全称セレクタによる指定とデフォルトスタイルとの相性を確認

menu 要素

  • p 要素
  • hr 要素
  • blockquote 要素
    •

    figure と figcaption 要素

    figure と figcaption の sample code
    <figure>
  <figcaption>figure と figcaption の sample code</figcaption>
  <pre class='parent-of-code'>...</pre>
</figure>
    とても長い単語を含む figcaption `123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890`

    とても長い figure 内の単語123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890