WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <hr>「水平線・区切り線」

<hr> 「水平線・区切り線」[読み方:エイチアール]

<hr>タグは、水平線を表示します。html5の定義では文書の段落などの区切りを意味するようになりましたが、html5でも水平線が表示されます。
<hr>は終了タグが不要です。

HTML規格HTML4.01HTML5
使用可否
広告

<hr> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツフローコンテンツを子要素にもてる場所終了タグ無

<hr>の属性

【構文】
<hr>
属性意味値のサンプルなど
size="線幅"線の太さを数値(ピクセル値)で指定
※HTML5で廃止。スタイルシートで指定。
"5"
width="線長さ"線の長さ数値(ピクセル値、パーセント)で指定
※HTML5で廃止。スタイルシートで指定。
"200","90%"
noshade線を影なしで表示する指定
※HTML5で廃止。スタイルシートで指定。
"noshade"
align="表示位置"線の表示する位置
※HTML5で廃止。スタイルシートで指定。
意味
left左寄せ
right右寄せ
center中央揃え
justify両端揃え
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<hr>のサンプル

<hr>
<hr size="10" width="60%" align="center">
<hr noshade>



ページTOP

スタイルシートを使用した<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>




DIVタグでも同じように表示されます。


ページTOP

留意事項

  • <hr>で指定できるsizewidth、noshade、align属性は、HTML5で廃止されました。スタイルシートで指定してください。
  • html4とhtml5で<hr>の意味が変わりました。
    html4は、水平線の表示
    html5は、文書の段落の区切り
    現時点ではhtml5でも水平線が表示されますが、段落の区切りを意味しない場合は<div>などを利用し線を表すこともできます。
    また、<section>タグを使用している場合は、<section>が段落の意味となるので<hr>は指定不要となります。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン