Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
<br> / <wbr> / <ruby>
『br』はテキスト中の改行、『wbr』はブラウザが任意に折り返せる位置のヒント、『ruby』は漢字などのルビ（読み仮名）を表示するための要素です。
構文
<!-- br: 改行（空要素） --> 1行目<br> 2行目 <!-- wbr: 折り返し可能な位置のヒント（空要素） --> https://www.example.com/very<wbr>/long<wbr>/url<wbr>/path <!-- ruby: ルビ（読み仮名）表示 --> <ruby>漢字<rt>かんじ</rt></ruby>
タグ一覧
| タグ | 概要 |
|---|---|
| br | テキスト中に改行を挿入します。終了タグは不要な空要素です。 |
| wbr | ブラウザが必要と判断した場合に折り返せる位置を示します。折り返しが起きない場合はハイフンなどは表示されません。終了タグは不要です。 |
| ruby | ルビ付きテキストの親要素です。ルビの対象テキストと『rt』要素をまとめます。 |
| rt | ルビのテキスト（読み仮名・注釈）を指定します。『ruby』の子要素として使います。 |
| rp | ルビ非対応ブラウザ向けのフォールバックを指定します。通常は括弧を入れます（例：<rp>（</rp>）。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- brで詩や住所などの改行 -->
<p>
東京都千代田区<br>
丸の内1-1-1<br>
〒100-0005
</p>
<!-- wbrでURLの折り返しヒント -->
<p>参考URL：https://www.example.com/docs<wbr>/html<wbr>/elements<wbr>/ruby</p>
<!-- rubyでルビを付ける -->
<p>
<ruby>薔薇<rt>ばら</rt></ruby>は
<ruby>美<rt>うつく</rt></ruby>しい花です。
</p>
<!-- rpでフォールバック -->
<p>
<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>
</p>
</body>
</html>
実行結果
『br』で改行され、住所が3行に分かれて表示されます。『ruby』のルビはテキストの上に小さく表示されます。
東京都千代田区 丸の内1-1-1 〒100-0005 薔薇（ばら）は美（うつく）しい花です。 ← ルビは文字の上に小さく表示
概要
『br』は詩・住所・歌詞など、改行が内容の一部として意味を持つ場合に使います。単に要素間の余白を空けるためのレイアウト目的での使用は避けてください。余白はCSSの『margin』や『padding』で指定するのが適切です。
『wbr』は長いURLやプログラムの識別子など、スペースなしで続く長い文字列に挿入します。ブラウザの幅が十分にある場合は折り返しが発生せず、見た目に影響しません。幅が足りない場合に、指定した位置で折り返されます。
『ruby』は日本語の教育コンテンツや、読み方を示す必要がある漢字に特に有効です。『rt』要素がルビのテキストを担い、対応ブラウザでは漢字の上部に小さく表示されます。ルビに対応していない古いブラウザ向けに『rp』でフォールバック用の括弧を入れておくと親切です。
対応ブラウザ
デスクトップ
Chrome49 以降 ○全バージョンで対応しています
Firefox57 以降 ○全バージョンで対応しています
Safari18 以降 ○全バージョンで対応しています
Edge80 以降 ○11 以前 ×
IE11 以前 ×
Opera48 以降 ○
14 以前 ×モバイル
iOS Safari18 以降 ○全バージョンで対応しています
Android Browser37 以降 ○4 以前 ×
Chrome Android36 以降 ○17 以前 ×
Firefox Android79 以降 ○3 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする