【HTML】ruby - 「ルビ」をふるための要素

【HTML】
ruby - 「ルビ」をふるための要素

「Ruby」タグのサンプルコード

入力コード

<ruby>
紫陽花
<rt>あじさい</rt>
</ruby>

<ruby>
<rb>英</rb>
<rb>国</rb>
<rt>えい</rt>
<rt>こく</rt>
<rtc>United Kingdom</rtc>
</ruby>

出力結果

紫陽花あじさい

英国えいこく United Kingdom

「ルビ」をふるためのタグ

ruby - ルビをふりたい文字をrubyタグの間に記述する
rb - ルビを振りたい文字を囲む
rp - ルビに対応していないときに出力される
rt - ルビの文字
rbc - ルビを振りたい文字をまとめるコンテナボックス。
rtc - ルビの文字をまとめるコンテナボックス。

「るby」の属性

ruby-align	ルビテキストの右寄せ、左寄せ等の値を指定
ruby-overhang	ルビ対象文字の前後文字に覆いかぶさるかを指定
ruby-position	ルビテキスト配置位置を指定

【CSS】ruby-alignの値一覧

auto	自動配置
left	左寄せ
center	中央寄せ
right	右寄せ
distribute-letter	両端揃え
distribute-space	均等割り
line-edge	行の左端では左寄せ、行の右端では右寄せ

【CSS】ruby-overhangの値一覧

auto	自動配置。前後の文字に覆いかぶさります。
start	開始部分のみ、前方のテキストに覆いかぶさります。
end	終了部分のみ、後方のテキストに覆いかぶさります。
none	前後のテキストには覆いかぶさりません。
whitespace	前後のテキストが空白の部分だけ覆いかぶさります。Microsoft の Webサイトに記載されていますが、実際には動作しないようです。

【CSS】ruby-positionの値一覧

before	横書きの場合は上側に、縦書きの場合は左側に表示します。
after	横書きの場合は下側に、縦書きの場合は下側に表示します。
inter-character	1文字ずつ、文字の右側に表示します。
inline	ルビが無効な場合と同様、テキストの右側に表示します。

【CSS】「ruby」への「CSS」サンプルコード

ruby-align:auto;
ruby-align:left;
ruby-align:center;
ruby-align:right;
ruby-align:distributed-letter;
ruby-align:distributed-space;
ruby-align:line-edge;

ruby-overhang:auto;
ruby-overhang:start;
ruby-overhang:end;
ruby-overhang:none;
ruby-overhang:whitespace;

ruby-position:before;
ruby-position:after;
ruby-position:inter-character;
ruby-position:inline;

ルビのサンプルコード

<ruby>
<rb>紫陽花</rb>
<rp>(</rp>
<rt>あじさい</rt>
<rp>)</rp>
</ruby>

<ruby>
<rbc>
<rb>山</rb>
<rb>田</rb>
<rb>太</rb>
<rb>郎</rb>
</rbc>
<rtc>
<rt>やま</rt>
<rt>だ</rt>
<rt>た</rt>
<rt>ろう</rt>
</rtc>
<rtc>
<rt rbspan="4">凸凹会社社長</rt>
</rtc>
</ruby>

出力結果

紫陽花 ( あじさい )

山田太郎やまだたろう凸凹会社社長

【HTML】「ruby」タグの属性

【一般属性】	意味	使用可能タグ
id=id	ID を指定
class=class	クラスを指定します。
name=name	名前指定
style=style	スタイルシートを指定
title=title	タイトルを指定。
style=style	スタイル指定
target=target	ターゲット指定
type=type	MIMEタイプ指定
unselectable=unselectable	選択禁止
dir=dir	文字の表示方向を指定。
lang=lang	言語を指定。
language=lang	スクリプト言語指定
accesskey=key	アクセスキーを指定。マウスの使えない環境でも、リンクにジャンプする
align=left	データの横方向の表示位置を指定 left=左側 right=右側 center=中央
tabindex=n	タブインデックスを指定。
contenteditable=bool	コンテンツの編集許可
contextmenu=id	コンテキストメニューを指定。
char=	文字による位置揃え
data-*=	ユーザ拡張属性
dir=	文章の方向を指定
disabled=	指定した要素を無効化
draggable=bool	ドラッグを可能にする。
dropzone=value	ドロップを可能にする。
hidden	要素を非表示にする。
hideforcus	フォーカスしていることがわかる変化を表示しない
spellcheck=bool	スペルをチェックする。
IE拡張属性	他にもIEで拡張された属性が指定可能。