VIDEO LESSON

HTMLのrpタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:49動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の三十六本目は、アールピータグです。
0:07前々回のルビ、前回のアールティーに続いて、ルビの仕組みを支える三つ目のタグを取り上げます。
0:14アールピーの役割は少し特殊で、ルビ表示に対応していない環境のために、読みを囲む括弧などをあらかじめ用意しておくことです。
0:22普段、対応ブラウザーでは姿を見せない、いわば保険のようなタグです。
0:27地味ですが、どんな環境でも読みを正しく伝えるための、大切な仕掛けです。
0:32今回は、その見えない働きを、表示の仕組みから順に確かめていきます。
0:37どんな場面で必要になるのか、考えてみましょう。
0:41ルビに対応したブラウザーでは、読みは本文の上に小さく表示され、本文と区別できます。
0:48ところが対応していない環境では、読みが本文の直後にそのまま並んでしまいます。
0:55たとえば、属性、ぞくせい、と続くと、どこまでが本文で、どこからが読みなのか分かりません。
1:02そこで括弧で区切れば、属性かっこ、ぞくせい、かっことじ、という形になり、
1:07初めての人でも読みの範囲が分かります。
1:12文章をテキストとして取り出して読む場合にも、この区切りが助けになります。
1:18特に人名や専門用語では、読みを取り違えると意味まで変わることがあるため、
1:22区切りの有無が大切になります。
1:26基本の書き方を確認します。
1:29スライドの例では、属性、という本文に、ぞくせい、という読みを付けています。
1:36構造は、まず外側をルビで囲み、本文の属性を書きます。
1:41次にアールピーで開き括弧を置き、アールティーに読みを入れ、最後にもう一度アールピーで閉じ括弧を置きます。
1:51ポイントは、アールピーを読みの前後に一つずつ、対で使うことです。
1:57括弧の種類は丸括弧が一般的ですが、内容は丸括弧そのものではなく、アールピーの中身として書く点に注意してください。
2:07書いたあとは、タグの入れ子の順番が崩れていないかを、最初と最後から一組ずつ目で追って確認すると安心です。
2:17表示の仕組みを整理します。
2:19ルビに対応したブラウザーでは、アールピーの中身は表示されません。
2:24読みは本文の上に小さく出るので、括弧は邪魔になるからです。
2:28一方、対応していない環境では、アールピーの中身がそのまま表示され、本文、
2:32括弧、読み、括弧の順に横並びになります。
2:35つまり、書き手は一つのエイチティーエムエルを用意するだけで、二つの表示に自動で対応できるのです。
2:42環境ごとに別のページを作る必要はありません。
2:45この切り替えはブラウザーが行うため、特別な設定は不要です。
2:49画面に映らない間も、アールピーの情報はエイチティーエムエルの中に残っていて、
2:53必要な環境でだけ働きます。
2:56次に、文章の中で使う例です。
2:59スライドでは、段落の中で、相対、という言葉に、そうたい、という読みを付けています。
3:05書き方は単独のときとまったく同じで、ルビの中に本文、アールピー、アールティー、
3:09アールピーの順で並べるだけです。
3:13文中のすべての漢字に付ける必要はなく、読みにくい言葉に絞るのが読みやすさのコツです。
3:19段落の中で使うときは、前後の文章とのつながりも含めて、公開前に通して読んで確認しましょう。
3:26このように、本文の邪魔をせずに、必要な言葉へだけ小さな手がかりを添えられるのが、
3:30ルビ一式の良さです。
3:33アールピーを省いた場合とも比べてみましょう。
3:37上の例のようにアールピーがなくても、対応ブラウザーでは問題なくルビが表示されます。
3:43今の主要ブラウザーはほぼ対応しているため、実務でも省略されることが多い書き方です。
3:49ただし、非対応の環境では括弧の区切りがなくなり、本文と読みがつながってしまいます。
3:55下の例のようにアールピーを付けておけば、その心配がなくなります。
4:00手間は少し増えますが、読み手を広く想定するページでは、付けておく価値があります。
4:06公的な案内や教材のように、読む環境を選べない文章ほど、この一手間が効いてきます。
4:11属性について整理します。
4:13アールピーには、このタグ専用の属性はありません。
4:17括弧の文字は属性ではなく、アールピーの中身として直接書きます。
4:23必要に応じて、すべての要素で使えるグローバル属性を使います。
4:28アイディーは文書の中で一つだけの識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、
4:33ラングはその部分の言語を示す指定です。
4:39ほかに、独自の値を保持するデータ属性もあります。
4:43ただし、アールピーを装飾の対象にすることはほとんどなく、属性を付ける場面も限られます。
4:50指定する位置で迷ったら、括弧を変えたいのか、読み全体を変えたいのかを分けて考えると失敗しません。
4:58見た目についても触れておきます。
5:01アールピーは、対応ブラウザーではブラウザー側の標準ルールで自動的に非表示になります。
5:07そのため、書き手がシーエスエスで隠す指定を書く必要は通常ありません。
5:12逆に、無理に表示させるような指定をすると、対応環境で括弧が二重に出るなどの不具合につながります。
5:19読みの大きさを調整したいときは、スライドのようにアールティー側の文字サイズを変更します。
5:26アールピーは、見た目を作るタグではなく、表示できない環境への橋渡しをするタグだと覚えてください。
5:33大きさや色を全体で統一したい場合も、ルビ全体へまとめて指定する方が、読みの対応がずれずに済みます。
5:41ブラウザー互換性を確認します。
5:43記事が参照するエムディーエヌの記録では、アールピーを含むルビの仕組みは、
5:47クロームがバージョン五以降、エッジが十二以降、ファイアフォックスが三十八以降、
5:52サファリが五以降と、主要ブラウザーで古くから対応しています。
5:57そのため今の環境では、アールピーの括弧が画面に出ないのが正常な動作です。
6:01画面に括弧が見えないからといって、書き間違いを疑う必要はありません。
6:06確認したいときは、開発者ツールでエイチティーエムエルの構造そのものを見て、
6:10アールピーが正しく入っているか確かめましょう。
6:14スマートフォン側のブラウザーでも基本の考え方は同じですので、対象の実機で一度だけ流れを確認しておきましょう。
6:21実装時の注意点をまとめます。
6:23一つ目、二重括弧の防止です。
6:25括弧はアールピーの中だけに書き、本文やアールティーの中に同じ括弧を重ねて入れないでください。
6:32非対応環境で括弧が二つ並んでしまいます。
6:35二つ目、開き括弧と閉じ括弧は必ず対で書くことです。
6:39片方だけでは、区切りとして不完全になります。
6:42三つ目、アールピーは必ずルビの内側、アールティーの前後に置くことです。
6:47ルビの外に単独で置いても意味を持ちません。
6:50最後に、三百二十ピクセル程度の狭い画面でも、本文と読みが欠けないか確認しましょう。
6:56特に、ほかの例文をコピーして書き換える場合は、括弧だけが前の言葉のまま残っていないかを見直してください。
7:04最後に練習とまとめです。
7:06アールピーは、ルビを表示できない環境のために、読みを囲む括弧などを置くタグでした。
7:13大切なポイントは三つです。
7:15一つ目、アールティーの前後に、開き括弧と閉じ括弧を対で置くこと。
7:20二つ目、括弧はアールピーの中だけに書き、二重にしないこと。
7:25三つ目、対応ブラウザーでは見えないのが正常な動作だと知っておくことです。
7:30練習として、前回の復習も兼ねて、ルビ、アールピー、アールティーの三点セットで一つ書いてみてください。
7:38お疲れさまでした。
7:40次回はキュータグを解説します。
7:42小さなタグですが、見えないところで読み手を支える、思いやりの設計が詰まっています。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

rpタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ルビを表示できない環境向けの括弧などを置きます。

解説記事・サンプルコードを読む：HTMLのrpタグとは？属性・使い方・ブラウザー互換性と活用例 →