＜rt要素＞ - ルビのテキスト

公開日: 2017/02/09

rt要素は、ルビのテキストを表す要素です。この要素がルビとして、対象のテキストの上部に小さく表示されます。ruby要素の子要素として使って下さい。

概要

名前

rt (Ruby text)

カテゴリー

なし。

配置できる場所

ruby要素の子要素。

コンテンツモデル

Phrasing content。

タグの省略

rt要素、または、rp要素が直後に続く場合は終了タグを省略できる。

自身の後にもうコンテンツがない場合は終了タグを省略できる。

DOM Interface

HTMLElement

デフォルトのスタイル

ruby > rt {
	display: block;
	font-size: 50%;
	text-align: start;
}

rt {
	line-height: normal;
	-webkit-text-emphasis: none;
	text-indent: 0px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-rt-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜rt要素＞ - ルビのテキスト</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/rt/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>rt要素は、ルビのテキストを表す要素です。ruby要素の子要素として、ルビを振る対象のテキストの直後に配置しましょう。</p>

<p><ruby>SYNCER<rt>シンカー</rt></ruby>をこれからもよろしくお願いいたします。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/608/"> <meta charset="utf-8"> <title>【デモ】＜rt要素＞ - ルビのテキスト</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/rt/"> </head> <body>

<p>rt要素は、ルビのテキストを表す要素です。ruby要素の子要素として、ルビを振る対象のテキストの直後に配置しましょう。</p> <p><ruby>SYNCER<rt>シンカー</rt></ruby>をこれからもよろしくお願いいたします。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>