このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<br>: 改行要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<br> はHTML の要素で、文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です。
試してみましょう
<p> O’er all the hilltops<br /> Is quiet now,<br /> In all the treetops<br /> Hearest thou<br /> Hardly a breath;<br /> The birds are asleep in the trees:<br /> Wait, soon like these<br /> Thou too shalt rest.</p>p { font-size: 1rem; font-family: sans-serif; margin: 20px;}上記の例に見られるように、<br> 要素はテキストを改行したい場所にそれぞれ含められます。<br> の後のテキストは、テキストブロックの次の行の先頭から再開されます。
属性
この要素にはグローバル属性があります。
非推奨の属性
CSS でのスタイル付け
<br> 要素は、テキストのブロック内で改行するという、単一の明確な目的を持っています。そのため、寸法を持たず、自身が表示されることもなく、スタイル付けすることができるのはわずかです。
margin を<br> 要素自体に設定して、ブロック内のテキストの行間を開けることができますが、これは良いやり方ではありません。 — この用途のために設計されたline-height プロパティを使用してください。
アクセシビリティ
段落間の間隔を広げるために連続した<br> 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。スクリーンリーダーは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これはスクリーンリーダーを使用している人の利用を混乱させ不満をためる可能性があります。
追加の間隔をあける必要がある場合は、margin のような CSS プロパティを使用して効果を得るようにしてください。
例
基本的な br
以下の例では<br> を使用して、住所のそれぞれの行の間に改行を生成しています。
Mozilla<br />331 E. Evelyn Avenue<br />Mountain View, CA<br />94041<br />USA<br />以下のように出力されます。
技術的概要
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ |
|---|---|
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須で、終了タグを記述してはなりません。 XHTML 文書では、この要素は<br /> と書きます。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | none,presentation |
| DOM インターフェイス | HTMLBRElement |
仕様書
| Specification |
|---|
| HTML # the-br-element |