hr要素

TOPページに戻る > html入門

スポンサード リンク

hr要素

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

使い方(書式)

<hr>

hr要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 ブロック要素
内容となる要素 なし

属性 説明
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でスタイルを指定





(C)2012 ホームページ作成無料