ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
ルビ要素のおさらい
日本語の振り仮名を表現する HTML 要素群:
| 要素 | 意味 | 必須? |
|---|---|---|
<ruby> | ルビ全体のコンテナ | 必須 |
<rb> | ルビベース(読みを振る本文) | 省略可 |
<rt> | ルビテキスト(振り仮名そのもの) | 必須 |
<rp> | ルビ非対応ブラウザ用のフォールバック括弧 | 推奨 |
<rtc> | ルビテキストコンテナ(複数 rt をまとめる) | 省略可 |
を使った基本パターン
<!-- もっとも単純 -->
<ruby>
<rb>漢字</rb>
<rt>かんじ</rt>
</ruby>
<!-- フォールバック括弧付き(推奨) -->
<ruby>
<rb>漢字</rb>
<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>
<!-- 1 文字ずつ個別にルビ -->
<ruby>
<rb>漢</rb><rb>字</rb>
<rt>かん</rt><rt>じ</rt>
</ruby>
表示例:
を省略した書き方
現代の HTML Living Standard では <rb> は省略可能で、ruby 直下のテキストがそのままルビベース扱いされます:
<!-- 省略形 (現代の主流) -->
<ruby>漢字<rt>かんじ</rt></ruby>
<!-- 個別ルビも省略形で -->
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
<!-- フォールバック括弧付き -->
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
を使う意義(明示派)
省略可能とはいえ、<rb> を明示的に使う意義もあります:
- 1 つの ruby 内で複数の漢字を個別に管理したい場合に分かりやすい
- CSS でスタイル指定が容易(
rb { font-weight: bold; }) - JavaScript で個別操作しやすい(
document.querySelectorAll('rb')) - XHTML / EPUB など厳密な記法を求められる場面で必須
2 段ルビ:
<rtc> はルビテキストをまとめるコンテナで、読みと意味の 2 段ルビに使えます:
<ruby>
<rb>東</rb><rb>京</rb>
<rt>とう</rt><rt>きょう</rt>
<rtc><rt>Tokyo</rt></rtc>
</ruby>
表示は「とう・きょう」が上、「Tokyo」が下(または逆)の 2 段ルビになります。
ブラウザ対応
| 要素 | Chrome | Firefox | Safari | 備考 |
|---|---|---|---|---|
<ruby><rt> | ○ | ○ | ○ | 基本機能は全ブラウザ対応 |
<rb> | ○ | ○ | ○ | 省略しても等価動作 |
<rp> | ○ | ○ | ○ | 対応ブラウザでは非表示 |
<rtc> | 2024+ ◯ | ○ | △ | 2 段ルビ。Safari は近年対応 |
CSS によるスタイル
/* ルビ全体のサイズ調整 */
ruby {
ruby-position: over; /* over (上) / under (下) / inter-character */
ruby-align: center; /* start / center / space-between / space-around */
}
/* ルビベース(rb / ruby 直下) */
rb {
font-weight: bold;
}
/* ルビテキスト */
rt {
font-size: 0.5em;
color: #666;
}
/* フォールバック括弧(ルビ対応ブラウザでは非表示) */
rp {
display: none;
}
歴史: なぜ復活したのか
<rb> は HTML 4.01 → XHTML 1.1 で導入され、HTML5 で「省略できるから不要」と一度仕様から外された経緯があります。しかし日本語コミュニティ(特に EPUB / 教科書出版)からの強い要望で、HTML Living Standard で復活しました。
| 仕様 | |
|---|---|
| HTML 4 / XHTML 1.1 | 必須要素として定義 |
| HTML5(初期) | 削除されていた |
| HTML5.1 | 復活 |
| HTML Living Standard(現行) | 省略可能だが定義あり |
使い分けの指針
- シンプルな振り仮名 →
<rb>省略でよい:<ruby>漢字<rt>かんじ</rt></ruby> - 1 文字ずつ別々の読み →
<rb>明示推奨 - 2 段ルビ(読み + 意味) →
<rtc>必須 - 古いブラウザ対応 →
<rp>()</rp>でフォールバック括弧を - EPUB / 教科書出版 →
<rb>明示が業界標準
FAQ
Q:
A: 必須ではありません。シンプルなルビなら省略で OK。ただし明示すると CSS / JS で扱いやすくなります。
Q: アクセシビリティ的にルビは読み上げられる?
A: ブラウザとスクリーンリーダーの組み合わせ次第。<rt> を読み上げるか飛ばすかが分かれます。重要な情報は本文中にも残しましょう。
Q: モンゴル文字や中国語にも使える?
A: 使えます。<ruby> は日本語専用ではなく、東アジア言語のルビ全般を想定した仕様です。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Unreal Engine AI MoveTo 完全ガイド(NavMesh / AIController / Behavior Tree) 2026-06-11 07:10:02
- Laravel ルート認証化完全ガイド — middleware と Gate 2026-06-11 07:10:02
- EJB完全ガイド(Stateless/Stateful/Singleton/MDB/CDIとの違い/Spring代替) 2026-06-11 07:10:02
- CDI完全ガイド(Inject/Produces/Qualifier/Scope/Spring DIとの違い) 2026-06-11 07:10:02
- DI(依存性注入)完全ガイド(Dependency Injection / IoC / Spring / CDI / コンストラクタ・セッター注入) 2026-06-11 07:10:02
- TCP/IP リンク層 (ネットワークインターフェース層) 完全ガイド 2026-06-11 07:10:02
- Apache .htaccess でベーシック認証を設定する手順(.htpasswd / htpasswd / AuthType Basic / トラブルシュート) 2026-06-11 07:10:02
- Python アプリのローカル独立配布完全ガイド(PyInstaller / wheel / Docker) 2026-06-11 07:10:02
- git 用語一覧完全リファレンス(Repository / HEAD / Branch / Rebase / Stash 他) 2026-06-11 07:10:02
- EJS テンプレートの共通化 (include) 完全ガイド 2026-06-11 07:10:02
- JAX-RS 完全ガイド(Java EE で REST API 開発 / @Path / @GET / Jersey / RESTEasy) 2026-06-11 07:10:02
- shutdown コマンド完全ガイド(Linux / Windows / systemd の使い分け) 2026-06-11 07:10:02
- Laravel のインストール手順まとめ — composer / Sail / Valet / Herd と初期設定 2026-06-11 07:10:02
- Python set 入門 — 作成方法、frozenset、内包表記、リスト重複削除 2026-06-11 07:10:02
- git log コミット履歴確認完全ガイド — oneline/graph/stat/blame 2026-06-11 07:10:02
コメントを削除してもよろしいでしょうか?