TOP ＞　Back ＞ Place ＞　Next

罫線で文章を区切ろう！

見出しを作り、細かく段落分けすることで、文章の読みやすいホームページを作ることができますね！。この他に、ページを水平線で区切ることでもっと見やすいページに出来ます。
HTMLには、ページ内に区切りを入れるための罫線「HR」という要素があります。
また、画像を使用する罫線もあります。

◆　水平線を引く「HR」要素

HR 要素（水平罫線）は、このサイトにも沢山使っている間仕切の役目で水平の線を引く要素です。

終了タグは要りません、「<HR>」タグの指定位置に罫線を引き、ホームページ中に視覚的な間仕切りを作ります。
XHTMLでは、<HR />と記述します。

・罫線の属性

太さの指定：現時点ではIEのみ作動
<HR STYLE="HEIGHT:数字px">が太さの指定で記述します。他にmm,cm,in,pc,等の単位もできます。

例：ピクセル指定
<hr style="height:20px">

幅の指定：
<HR STYLE="WIDTH:指定値%">が幅の指定です。値は「px＝ピクセル」や「％＝パーセント」で記述します。

例： ピクセル指定
<hr style="width:400px"> 

例：パーセンテージ指定（横幅の70％です）
<hr style="width:70%">

位置の指定：現時点ではIEのみ作動
<HR STYLE="TEXT-ALIGN:指定値">が位置の指定です。値は「"LEFT"」か「"CENTER"」か「"RIGHT"」で記述します。通常の値はCENTERになっています。

例：左寄せ
<hr style="text-align:left">

例：中央
<hr style="text-align:center">

例：右寄せ
<hr style="text-align:right">

色を付ける：現時点ではIEのみ作動
<HR style="color:色値">が位置の指定です。わかりやすく幅をつけてみました。

例：
<hr style="color:#00ffff">

例：<hr style="border:2px dotted lightskyblue;width:70%">

例：<hr style="border:1px dashed 1px violet;width:70%">

影を消す：非推奨の属性
<HR NOSHADE>が位置の指定です。わかりやすく幅をつけてみました。
XHTMLでは、単独で属性を最小化することは出来ないので、
<hr noshade="noshade" />となりますがブラウザによっては作動しません。

◆　空行（スペース）で区切りを表現する

あまりお勧めできませんが、文章の区切りを表現するためには、空行を何行分も入れて空間を作る方法もあります。
この場合、HTMLでは改行も文字の一種とされるためで、
「<DIV><BR><BR><BR><BR><BR></DIV>」のように記述しましょう。
<BR>タグの数だけ空行が作られます。

スペースを空けるなら、スタイルシートの領域"PADDING"や"MARGIN"を使いましょう。
<要素 STYLE="PADDING-BOTTOM:数字PX">〜〜〜</要素>や
<要素 STYLE="MARGIN-BOTTOM:数字PX">〜〜〜</要素>等で指定する方が良いと考えます。