構文
<p>・・・<br>
・・・</p>
説明文
<br>タグは,そこで改行を行う。例えば,段落中で次の行から都筑の文書を表示したい場合などに<br>タグを記述する。
また,<img>タグで回り込み処理を行っている場合,<br>タグに「clear」属性を指定することで回り込みを解除できる。ただし,HTML 4 Strictでは,「clear」属性は非推奨となっているため,回り込み解除はスタイル・シートにて行う。
<br>タグはインライン要素であるため,基本的にブロック要素の中で利用するようにする。
サンプル
HTMLソース
<p>以下のように記述すれば赤文字で表示される。<br>
<span style="color:red">赤文字</span></p>
ブラウザ表示例
以下のように記述すれば赤文字で表示される。
<span style="color:red">赤文字</span>
対応状況
HTML | IE | Firefox | Opera | |||||
---|---|---|---|---|---|---|---|---|
4 strict | 4 Transitional | 5 | 6 | 7 | 2 | 3 | 8 | 9 |
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
要素,タグ
タグ要素 | インライン要素 |
---|---|
包括可能要素 | 無し |
タグ記述条件 | 開始タグ:必須 終了タグ:無し |
属性
よく利用する属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
clear=解除対象 | 画像などのオブジェクト左右に回りが行われている際に、<br>タグの位置で回り込み解除する。「left」では左回り込み、「right」では右回り込み、「all」では左および右の両方の回り込みを解除する。「none」を指定した場合は回り込みは解除しない | × | ○ |
その他の属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
class=クラス名 | このタグのクラス名。CSSでスタイルを指定する場合などに利用される | ○ | ○ | |
id=ID | タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する | ○ | ○ | |
style=スタイル | タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 | ○ | ○ | |
title=タイトル | タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する | ○ | ○ |
回り込みを解除する
<img>タグでは「align」属性を利用して文字の回り込みを行うことができる。この回り込みを開場する際には<br>の「clear」属性を利用する。「clear」属性には,右の回り込みを解除する場合「right」,左の回り込みを解除する場合「left」,両方解除する場合「all」を指定する。ただし,<br>では回り込みを解除すると共に改行が行われる。
<div><img align="left" width="100" height="100" src="br.gif"
alt="画像"></div>
<p>ケアンテリアという犬はイギリスの方で飼われていた。岩場で小動物を狩るこ
とからケアン(積み石)のテリアと名づけられた。最も古いテリア種として知ら
れている。<br clear=left>
気質は好奇心旺盛で,怖いもの知らずである。しかし,飼い主には従順で
ある面もある。</p>
ケアンテリアという犬はイギリスの方で飼われていた。岩場で小動物を狩ることからケアン(積み石)のテリアと名づけられた。最も古いテリア種として知られている。
気質は好奇心旺盛で,怖いもの知らずである。しかし,飼い主には従順である面もある。
スタイル・シートで回り込みを解除する
HTML 4 Strictから回り込み処理にはスタイル・シートを利用することが推奨されている。そのため,<br>タグの「clear」属性は非推奨となっている。
スタイル・シートで回り込みを解除する場合は,解除するタグ内のスタイル・シートに「clear」を指定する。この際「left」を指定すれば左の回り込みを解除し,「right」を指定すると右の回り込みを解除する。両方解除する場合は「both」を指定する。
<div style="float:left">
<img src="br.gif">
</div>
<p>画像の右に文書の回り込みが行われる。</p>
<p style="clear:left;">スタイル・シートのclearで回り込みを解除でき
る。</p>
画像の右に文書の回り込みが行われる。
スタイル・シートのclearで回り込みを解除できる。