hr要素

TOPページに戻る > html入門

hr要素

段落と段落の間に水平線を表示できます
ブロック要素で前後に改行がはいります。終了タグはなく内容を持たない空要素です
終了タグがない要素なので内容にできるものはありません
※XHTMLで使う場合hrの後ろに半角の空白/で閉じます
指定できる属性は推奨されない属性なのでcssでスタイルを指定しましょう

使い方（書式）

<hr>

hr要素

対応ブラウザ
要素の種類	ブロック要素
内容となる要素	なし

属性	説明
align属性	横幅を指定した場合に水平線の位置寄せを指定。値にはleft、center、ringht 推奨されない属性です。cssのtext-alignプロパティで指定してください
size	水平線の太さを指定 推奨されない属性です。cssのheightプロパティで指定してください
width属性	水平線の横幅を指定 推奨されない属性です。cssのwidthプロパティで指定してください
noshade属性	水平線の影を消すことができます 推奨されない属性です。cssのbackground-colorプロパティで指定してください IEはcolorプロパティで色を指定できます IEもheightプロパティで線の太さを3px以上にすればbackground-colorプロパティでも色を付けられるみたいです
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<hr>

実際の表示

---

cssでスタイルを指定

html

<hr class="hoge">

css

.hoge {
 text-align: center; /* センター寄せIE対策 */
 margin: 0 auto;     /* センター寄せIE以外のブラウザ */
 width: 300px;       /* 水平線の幅を指定 */
 }

.hoge2 { height: 5px; }   /* 水平線の高さを指定 */

.hoge3 { width: 300px; }  /* 水平線の幅を指定 */

.hoge4 {
 background-color: #0F0;   /* 水平線の色を指定 */
 color: #0F0;              /* 水平線の色を指定（IE対策） */
 height: 1px;              /* 水平線の高さを指定 */
}

実際の表示

センター寄せ

---

水平線の高さを指定

---

水平線の幅を指定

---

水平線の背景色を指定

---

その他のデザインはcssでスタイルを指定