cman.jpWEBページ作成
広告
<hr> 「水平線・区切り線」[読み方：エイチアール]
<hr>タグは、段落レベルのテーマの区切り、たとえばストーリー内のシーンの変更、または参考書のセクション内の別のトピックへの移行を表し、水平線が表示されます。
<hr>は終了タグが不要です。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<hr> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ | フローコンテンツを子要素にもてる場所 <select> | 無 | 終了タグ無 |
<hr>の属性
【構文】
<hr>
| 属性 | 意味 | 値のサンプルなど | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| size="線幅" | 線の太さを数値（ピクセル値）で指定 ※HTML5で廃止。スタイルシートで指定。 |
"5" | ||||||||||
| width="線長さ" | 線の長さ数値（ピクセル値、パーセント）で指定 ※HTML5で廃止。スタイルシートで指定。 |
"200","90%" | ||||||||||
| noshade | 線を影なしで表示する指定 ※HTML5で廃止。スタイルシートで指定。 |
"noshade" | ||||||||||
| align="表示位置" | 線の表示する位置 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||
| 廃止された属性 |
|
|||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<hr>のサンプル
<hr>
スタイルシートを使用した<hr>サンプル
<head>
<style type="text/css">
<!--
.ex1 {
height: 20px;
background-color: #ccffff;
border: 2px #00cc33 dashed;
}
.ex2 {
height: 1px;
border: none;
border-top: 2px #0000FF solid;
}
-->
</style>
</head>
～
<hr class="ex1">
<br>
<hr class="ex2">
<br>
<p>DIVタグでも同じように表示されます。<p>
<div class="ex1"></div>
<br>
<div class="ex2"></div>
<style type="text/css">
<!--
.ex1 {
height: 20px;
background-color: #ccffff;
border: 2px #00cc33 dashed;
}
.ex2 {
height: 1px;
border: none;
border-top: 2px #0000FF solid;
}
-->
</style>
</head>
～
<hr class="ex1">
<br>
<hr class="ex2">
<br>
<p>DIVタグでも同じように表示されます。<p>
<div class="ex1"></div>
<br>
<div class="ex2"></div>
DIVタグでも同じように表示されます。
留意事項
| 関連するHTMLタグ | |
|---|---|
| div | 範囲指定（ブロック化） |
広告