diff options
Diffstat (limited to 'files/ja/web/html/element/br/index.html')
| -rw-r--r-- | files/ja/web/html/element/br/index.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/files/ja/web/html/element/br/index.html b/files/ja/web/html/element/br/index.html new file mode 100644 index 0000000000..138a9fbb08 --- /dev/null +++ b/files/ja/web/html/element/br/index.html @@ -0,0 +1,142 @@ +--- +title: '<br>: 改行要素' +slug: Web/HTML/Element/br +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><br></code> 要素</strong> は、文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>上記の例に見られるように、 <code><br></code> 要素はテキストを改行したい場所にそれぞれ含められます。 <code><br></code> の後のテキストは、テキストブロックの次の行の先頭から再開されます。</p> + +<div class="note"> +<p><strong>注</strong>: 段落の間を開けるために <code><br></code> を使わないでください。それぞれを {{htmlelement("p")}} 要素で囲み、 <a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref('margin')}} プロパティで間隔を制御してください。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("clear")}}</dt> + <dd>改行後の次の行を開始する場所を示します。</dd> +</dl> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h2> + +<p><code><br></code> 要素は、テキストのブロック内で改行するという、単一の明確な目的を持っています。そのため、寸法を持たず、自身が表示されることもなく、スタイル付けすることができるのはわずかです。</p> + +<p><code><br></code> 要素自体に {{cssxref("margin")}} を設定して、ブロック内のテキストの行間を開けることができますが、これは良いやり方ではありません。 — この用途のために設計された {{cssxref("line-height")}} プロパティを使用してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_br" name="Simple_br">単純な br</h3> + +<p>以下の例では <code><br></code> を使用して、住所のそれぞれの行の間に改行を生成しています。</p> + +<pre class="brush: html notranslate">Mozilla<br> +331 E. Evelyn Avenue<br> +Mountain View, CA<br> +94041<br> +USA<br> +</pre> + +<p>以下のように出力されます。</p> + +<p>{{ EmbedLiveSample('Simple_br', '100%', '90') }}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>段落間の間隔を広げるために連続した <code><br></code> 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。</p> + +<p>追加の間隔をあける必要がある場合は、 {{cssxref("margin")}} のような CSS プロパティを使用して効果を得るようにしてください。</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須で、終了タグを記述してはなりません。 XHTML 文書では、この要素は <code><br /></code> と書きます。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{HTMLElement("address")}} 要素</li> + <li>{{HTMLElement("p")}} 要素</li> + <li>{{HTMLElement("wbr")}} 要素</li> +</ul> |