Apr. 19th,2015
＃
要素について
“hr”要素は段落レベルのテーマの区切りを表す要素です。
物語の中の場面の切り替わりや参考書の中の節での話題の切り替わりを表すのに使用することができます。
サンプルコード
<section>
<h1>バナナの果実の話</h1>
<p>
栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。
</p>
<hr>
<p>
ところでこのバナナ、一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>
</section>
バナナの果実の話
栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。
ところでこのバナナ、一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
一般的なブラウザでは“hr”要素の位置に水平線が表示されます。
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
align="" |
水平方向の表示位置 | left | 左寄せ |
| center | 中央 | ||
| right | 右寄せ | ||
| noshade="" |
単色で表示 | noshade | 単色で表示 |
| size="" |
水平線の高さ | 正の整数 | 高さのピクセル数 |
| width="" |
水平線の横幅 | 正の整数 | 横幅のピクセル数 |
| 正の整数% | 横幅の表示領域に対する割合 | ||
＃
“水平線”を表す
HTML4まで
HTML4までは“hr”要素は水平線を表す要素でした。HTML5でも一般的なブラウザでは“hr”要素の位置に水平線が表示されますが、文章の構造とは関係なく水平線を引く目的で使用するのは適切ではありません。
代替方法
特別な意味を持たせることなく水平線を引きたい場合は画像として埋め込むか、“p”要素や“div”要素などにスタイルシートの“border-bottom”プロパティや“border-top”プロパティなどを使用して境界線を部分的に引きます。
.horizontal-line {
border-top: 1px groove;
border-bottom: 1px groove;
}
<p class="horizontal-line">特に意味のないテキストだが上下に水平線を引きたかったのでスタイルシートで水平線を引いてみた。</p>
特に意味のないテキストだが上下に水平線を引きたかったのでスタイルシートで水平線を引いてみた。
＃
仕様書
“hr”要素はHTML2.0から定義されている要素です。意味が変更されましたが現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLHRElement : HTMLElement {
[HTMLConstructor] constructor();
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
hr {
display: block;
border-style: inset;
border-width: 1px;
margin-block-start: 0.5em;
margin-inline-end: auto;
margin-block-end: 0.5em;
margin-inline-start: auto;
overflow: hidden;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
hr {
unicode-bidi: bidi-override;
}
また、以下のスタイルシートを“表現上のヒント”としてUAスタイルシートに含むことが期待されています。
@namespace url(http://www.w3.org/1999/xhtml);
hr[align=left i] { margin-left: 0; margin-right: auto; }
hr[align=right i] { margin-left: auto; margin-right: 0; }
hr[align=center i] { margin-left: auto; margin-right: auto; }
hr[color], hr[noshade] { border-style: solid; }
