概要
Text-level elements stylesheet test.
CSS files
a element
<p><a>a in p</a></p>
<a>
<p>p in a</p>
<div><p>p in div in a</p></div>
</a>p in a
p in div in a
language
The title of a work.
| language | sample download link |
|---|---|
| default / none | a element with download attribute |
| english | a element with download attribute |
| japanese | download 属性を持つ a 要素 |
a in heading
This is sample text.
heading in a
This is sample text.
Color theme
| theme | This is sample text. |
|---|---|
| Light theme |
|
| Dark theme |
|
| Current theme |
|
Emphasis elements
em, strong, small - Emphasis elements in heading element
em in em, strong in strong, small in small
string 要素は heading 要素内では異なる style を持つ
smallで途中で改行が行われる長いテストのための例文としてのいろは歌: いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす
前後に普通のサイズの文字がついているsmallで途中で改行が行われる長いテストのための例文としてのいろは歌: いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすの場合のテスト
s element
Contents that are no longer accurate or no longer relevant.
cite element
The title of a work.
| language | sample text |
|---|---|
| default / none |
cite, nested cite
|
| english |
cite, nested cite
|
| japanese |
cite, nested cite
|
quote element
Quoted from another source.
language
| language | sample text |
|---|---|
| default / none |
quote, nested quote |
| english |
quote, nested quote |
| japanese |
引用, 二重の引用 |
q 要素 の中ではコンテンツ生成しないことの確認
b,
code, var, samp, kbd, cite, strike, ins, del, ルビ要素
コンテンツ生成はしないが、装飾は意味と密接に関連しているため外見を保持する
dfn element
title 属性を持たない dfn 要素
title 属性を持つ dfn 要素
abbr element
title 属性あり HTMLとCSS
title 属性なし HTMLとCSS
ruby
本文に対してルビが長い場合のサンプルとしてのHTMLと、その逆パターンとしてCascading Style Sheets
本文もルビも非常に長い語の例として包括的な経済上の連携に関する日本国とグレートブリテン及び北アイルランド連合王国との間の協定
| ルビの振り方 | HTML code | Output |
|---|---|---|
| 1文字づつ |
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
|
漢字 |
| 熟語 |
<ruby>漢字<rt>かんじ</rt></ruby>
|
漢字 |
data element
<data value='3'>1 + 2</data>1 + 2
time element
<time>2022-01-01</time>
<time title='令和3年初日の出'>2022-01-01T07:00+09:00</time>
<time datetime='2022-01-01'>令和3年1月1日</time>
<time datetime='2022-01-01T07:00+09:00'>令和3年初日の出</time>code, var, samp, kbd element
code, var, samp, kbd
code in code, var in code, samp in code, kbd in code
samp in kbd.
sup and sub.
x2 + y2 = 1
H2O
i element
A span of text in an otherwise offset from the normal prose in a manner indicating a different quality of text.
b element
A span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance.
| language | This is sample text. |
|---|---|
| Default / None |
b - b element in heading elementbnested b |
| English |
b - b element in heading elementbnested b |
| Japanese |
b - H3 要素の中の b 要素b二重の b |
mark element
A run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
Color theme
| theme | This is sample text. |
|---|---|
| Light theme |
|
| Dark theme |
|
| Current theme |
|
bdi element
A span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
あいうえお、かきくけこ。 (dir='ltr')
あいうえお、かきくけこ。 (dir='rtl')
bdo element
テキスト方向書式設定コントロール (dir='ltr')
テキスト方向書式設定コントロール (dir='rtl')
span element
段落の中で title 属性や ID 属性などグローバル属性を使用する際に span を使う事がある
段落の中で <span title='title属性を持つspan要素'>title 属性</span>や <span id='KMV5L6DH'>ID 属性</span>などグローバル属性を使用する際に `span` を使う事があるbr element
段落の中で
強制改行を行った場合の
表示の確認
wbr element
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />12345678901234567890