HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素（ハイパーリンク）"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む（マークアップにより書き表す）文書構造になっています。
■ブロックレベル要素とは・・・？
ひとつのブロック（まとまり）から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。
■ブロックレベル要素群（abc順）
<address> <blockquote> <center> <div> <dl>
<fieldset> <form> <h1〜h6> <hr> <noframes> <noscript>
<ol> <p> <pre> <table> <ul>
▼
★ 水平線（横罫線） <hr>タグ
★ hr は 「Horizontal Rule」＝罫線の略
水平線は、<hr>タグで記述します。
<hr>タグが記述された前後は、要素特性により段落します。
<hr>タグは空要素タグのため、終了タグはありません。
下記に作例の立体的な水平線は、
<hr size="4" width="50%">
・・・水平線のサイズを"4"、長さを"50%"とした
「右寄せ」「センタリング」「左寄せ」の作例です。
（水平線の位置指定は後述 水平線に紫系統の色を指定しています。
▼
立体的な水平線"右寄せ" （レイアウト枠に対して長さを50％に指定）
立体的な水平線"センタリング"
（レイアウト枠に対して長さを50％に指定）
立体的な水平線"左寄せ" （レイアウト枠に対して長さを50％に指定）
水平線の長さ措定が無ければレイアウト枠の両端一杯（１００％）に表示されます。
作例 <hr size="8">
▼
<hr>タグに{size属性}と"値"を書き加えると、立体的な水平線になります。
▼
水平線の長さは[width属性]を指定します。
<hr size="ピクセル値" width="ピクセル値か割合">
▼
平面的な水平線は[<hr noshade>]と記述します。
<hr noshade
size="ピクセル値" width="ピクセル値か割合">
● ---水平線のサイズを段階的に比較した作例。--- ●
水平線のサイズ１
＝立体的な水平線 （レイアウト枠に対して長さを90％に指定）
水平線のサイズ２
＝立体的な水平線 （レイアウト枠に対して長さを80％に指定）
水平線のサイズ３
＝立体的な水平線 （レイアウト枠に対して長さを70％に指定）
水平線のサイズ４
＝立体的な水平線 （レイアウト枠に対して長さを60％に指定）
水平線のサイズ１０
＝平面的な水平線 （レイアウト枠に対して長さを60％に指定）
▼
水平線のサイズ指定は、"ピクセル"指定。
水平線の長さ指定は、ピクセル指定か、画面に対する割合（％）で指定しますが、ブラウザの画面サイズに応じて追従する"割合"指定が無難かも。
▼
水平線の位置指定は[hr要素]の中に[align属性]と、その値を指定します。
[hr要素]における[align属性]の既定値は、「中央揃え（align="center"）」のため、そのままでよければ記述不要。
既定値以外の値は、右寄せ指定が、align="right"、左寄せ指定は、align="left"と記述します。
要素名とalign属性、align属性とsize属性、size属性とwidth属性の間にそれぞれ半角スペース必須
↓要素名 hr ↓線のサイズ ↓線の長さ
<hr align="right" size="4" width="60%">
|←←属性→→||-属性-| |←←属性→→|
|←値→| |値| |←値→|
▼
hr要素における
水平線の位置指定＝"align属性"
水平線の太さ指定＝"size属性"
水平線の長さ指定＝"width属性"
平面的な水平線指定＝"noshade属性"
は、スタイルシートの設定を推奨しています。
下記の作例は、水平線はタグ要素に非推奨属性を指定した場合
▼
◇ソース表示
<hr align="left" size="4" width="60%">
◆ 水平線の位置指定 <IE対策とネスケ対策>
注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}
水平線の各種指定をスタイルシートで記述した場合
▼
◇代替記述インラインスタイルのソース表示
IE対策 >> text-align:left; ネスケ対策 >> margin-left:0px;
<hr style="text-align:left; margin-left:0px;height:4px; width:60%;">
hr size は height または border-width もOK
<hr style="text-align:left; border-width: 4px; width:60%;">
<hr noshade>・・・平面的な水平線は、スタイルシートの代替がないため[border属性]による記述が一般的
▼
◇<hr noshade>の代替として [border属性]を記述したソース表示
<hr style="border: 1px #000000 solid; color: #FFCCCC;
background-color:#FFFFCC;height:10px;width:60%;">
◆ 水平線の装飾
下記の作例は、スタイルシートによる代替記述によるものです。
hr要素に、style属性="水平線の高さ、枠の太さ、背景色"等を作例に応じて、それぞれ記述しています。
▼
■水平線に背景色を指定する・・・background-color属性を記述。
・・・style="background-color:#任意のカラーコード名;"
<hr style="height:4px;width:60%;background-color:#FFCCCC;>
■水平線を二重線にする
・・・二重線の指定は[border-style:double;"]
<hr style="color:#000;background-color:#FFCCCC;height:8px; width:60%;border:3px;border-style:double;">
■水平線を 点線にする [border-style:dotted;]
<hr style="color:#000;background-color:#FFCCCC;height:15px; width:60%;border:3px;border-style:dotted;">
■水平線を 破線にする [border-style:dashed;]
<hr style="color:#000;background-color:#FFCCCC;height:20px; width:60%;border:1px;border-style:dashed;">
■水平線に画像を貼付け
・・・background-image属性
・・・style="background-image:url(画像ファイル名);"
（サンプル画像→  12x12size・・・画像ファイル名は、back.gif）
<hr style="height:12px;width:60%;background-image:url(back.gif);">
■IEとネスケの違い
IEの表示と、ネスケの表示をそれぞれ比較してみると、上記作例の"水平線に色を付ける"、"水平線に背景画像を貼付け"以外は、全く見え方が違います。
|
