構文
<hr>
説明文
<hr>タグは,横線を引く。例えば,文書を区切りたい場合などに利用する。
<hr>タグでは「width」属性で線の長さ,「size」属性で線の幅などを指定できる。しかし,HTML 4 Strictからはタグの属性ではなくスタイル・シートを利用して線のデザインを行うようになった。
サンプル
HTMLソース
:
<p> なにはともあれ,今後の動向に注目したい。</p>
<p align="right">更新日:2010年1月10日</p>
<hr width="70%">
<h2>CSS 3の新機能</h2>
<p> 最近ではスタイル・シートを利用したサイトの作成が一般的となってきて
おり・・・</p>
:
ブラウザ表示例
なにはともあれ,今後の動向に注目したい。
更新日:2010年1月10日
CSS 3の新機能
最近ではスタイル・シートを利用したサイトの作成が一般的となってきており・・・
:対応状況
HTML | IE | Firefox | Opera | |||||
---|---|---|---|---|---|---|---|---|
4 strict | 4 Transitional | 5 | 6 | 7 | 2 | 3 | 8 | 9 |
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
要素,タグ
タグ要素 | ブロック要素 |
---|---|
包括可能要素 | 無し |
タグ記述条件 | 開始タグ:必須 終了タグ:無し |
属性
よく利用する属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
align=配置位置 | 横方向における内容の配置位置を指定する。「left」で左揃え,「center」で中央揃え,「right」で右揃えになるように配置する | × | ○ | |
width=幅 | 罫線を表示する際の横幅を指定する。数値のみで指定すると単位がピクセルとなる。割合で指定する場合は「%」を末尾に付ける | × | ○ |
その他の属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
class=クラス名 | このタグのクラス名。CSSでスタイルを指定する場合などに利用される | ○ | ○ | |
dir=方向 | タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する | ○ | ○ | |
id=ID | タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する | ○ | ○ | |
lang=言語 | タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する | ○ | ○ | |
noshade | 影をつけずに罫線を引く | × | ○ | |
size=太さ | 罫線の太さを指定する。数値のみで指定すると単位がピクセルとなる | × | ○ | |
style=スタイル | タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 | ○ | ○ | |
title=タイトル | タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する | ○ | ○ |
マウスやキーボードの状況変化に関わる属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
onclick=スクリプト | このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する | ○ | ○ | |
ondblclick=スクリプト | このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する | ○ | ○ | |
onmousedown=スクリプト | このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseup=スクリプト | このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseover=スクリプト | このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する | ○ | ○ | |
onmousemove=スクリプト | このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseout=スクリプト | このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeypress=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeydown=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeyup=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する | ○ | ○ |
スタイル・シートでデザインを設定する
HTML 4 Strictからは,線のデザインについてはスタイル・シートを利用することを推奨している。<hr>タグの各属性は以下のようなスタイル・シートに置き換えることができる。
<hr>の属性 | 対応するスタイル・シート |
---|---|
align | align |
color | color |
noshade | border-style |
size | border-width |
width | width |
例えば,幅5pxの青の点線にしたい場合は以下のように指定する。
<hr style="border-width:5px;color:#0000ff;
border-style:dotted none none none;">
「border-style」をdottedにすると点線で描かれる。また,dottedの後のnoneが3つ続くのは線が矩形の4辺のように上下左右の線で<hr>が構成されているためである。そのため,下左右の3つの線を表示しないように「none」にしている。