ITメモ
Make SiteMap HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
【HTML】HTMLメールの作り方【HTML】ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方【HTML】HTMLタグに「マウスアクション」を指定する方法【XML】サイトマップ作り方
「HTML」の基礎知識
【HTML】「HTML」の書式【HTML】「HTML」でのコメントの仕方【HTML】「CSS」の使い方【HTML】「Javascript」の使い方【HTML】「ブロック要素」と「インライン要素」【HTML】「HTML」の特殊文字一覧【HTML】ヘッダー部分の編集方法【HTML】他のページに移行する「リンク」の作り方 【HTML】表の作り方【HTML】Webページに画像の埋め込む方法【HTML】動画を埋め込む方法【HTML】音声ファイルを埋め込む方法【HTML】地図を埋め込む方法【HTML】入力フォームの作り方
「HTML」タグ
【HTML】「a」タグ - リンクの作り方【HTML】「link」タグ - 別ファイルを関係定義・読み込みをする【HTML】「h1-h6」 - Webページの見出しの設定方法【HTML】ruby - 「ルビ」をふるための要素
SEO(Search Engine Optimization)
【SEO対策】SEOとは【SEO対策】アクセスアップするコーディング【SEO対策】検索エンジンに登録する方法
SEOの基礎
【SEO対策】「ページタイトル」 -- タイトル適切なページタイトルを付ける
サイト構造の改善
コンテンツの最適化
クローラーへの対処
モバイルSEO
プロモーションと分析





【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-character1文字ずつ、文字の右側に表示します。
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で拡張された属性が指定可能。