水平線のサイズ水平線の表示位置 水平線の色水平線の背景画像 水平線の境界線改ページ指定 ページ全般css ﾘﾌｧﾚﾝｽ へ
水平線のサイズを指定する(CSS)
width: *px; height: *px;
　width と height は、全てのタグ（要素）に適用できます。ただし、width は非置換インライン要素、tr要素、thead要素、tfoot要素、tbody要素には適用できません。また、height は非置換インライン要素、colgroup要素、col要素には適用できません。
　width は横幅を、height は高さを指定するプロパティです。このプロパティを<hr>タグ（要素）に設定すると、水平線の長さや太さを指定できます。
　hr { width: 80%; height: 10px; }  .hrSize { width: 80%; height: 10px; }
プロパティ名値説　　明
width 数値＋単位（px 等）
or パーセント		 水平線の長さを指定
height 水平線の太さを指定
＊ 何も指定しない場合は、太さは 2px、長さは 100 パーセントになります。
　★ 使用例とブラウザでの表示 (a3-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .hr200 { width: 200px; height: 15px; }  .hr150 { width: 150px; }
使　用　例   ブラウザの表示
<hr class=hr200>
<hr class=hr150>
※ height（太さ）は通常は指定しません。標準の太さは２px で、.hr150 を使用している水平線です。
※ 水平線の幅は、パーセントもよく使われます。width: x%; は、指定した場所によって表示する「長さ」が変わってきます。 例えば、テーブル（表）のセル内で指定すると「セルの表示幅」に対して「xパーセント」の長さになります。
関連するページ
HTML タグページ 水平線を引く：水平線を引く
HTML タグページ 水平線のサイズと表示位置：水平線のサイズや表示位置を指定する
水平線のサイズ水平線の表示位置 水平線の色水平線の背景画像 水平線の境界線改ページ指定 ページ全般css ﾘﾌｧﾚﾝｽ へ
水平線の表示位置を指定する(CSS)
text-align: left; margin-left: 0px;
　text-align は、ブロックレベル要素（ひとつのまとまりを構成する要素）に適用できます。
　margin-*** は、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
　text-align は水平方向の揃え方を、margin-*** は上下左右のマージンを指定するプロパティです。
　これらのプロパティを<hr>タグ（要素）に設定すると、水平線の表示位置（左寄せ、右寄せ）を指定することができます。
　指定方法はブラウザにより異なります。Firefox などでは左（右）のマージンを０に設定して左寄せ（右寄せ）を指定しますが、Internet Exp. などでは text-align プロパティで指定します。 このように「ブラウザによって異なる」場合は、２つを同時に指定します。
　.hrRight { text-align: right; margin-right: 0px; width: 80%; }
※ 表示位置を指定する場合は、同時に水平線の長さを指定します。 長さを指定しなかった場合は、width: 100%; として扱われ、左寄せ（右寄せ）の指定が無意味になります。
プロパティ名値説　　明備　　考
text-align left左側に表示 Internet Exp. と Opera の
記述方法です。
right右側に表示
margin-left 0左側に表示 Firefox の記述方法です。
margin-right 0右側に表示
＊ 何も指定しない場合はセンターに表示されます。
　★ 使用例とブラウザでの表示 (a3-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .hrLeft { text-align: left; margin-left: 0; width: 50%; }
.hrRight { text-align: right; margin-right 0; width: 50%; }
使　用　例   ブラウザの表示
<hr class="hrLeft">
<hr class="hrRight">
※ ブラウザによって指定方法が異なる場合は、その指定方法を羅列します。 ブラウザでは、未対応（未定義）のタグや属性を「無視する」方法に統一されていています。文字の脱落などのパンチミスも同じ扱いです。
関連するページ
CSS スタイルシート上下左右のマージン(個別指定)：上下左右のマージンを個別に指定する
HTML タグページ 水平線を引く：水平線を引く
HTML タグページ 水平線のサイズと表示位置：水平線のサイズや表示位置を指定する
水平線のサイズ水平線の表示位置 水平線の色水平線の背景画像 水平線の境界線改ページ指定 ページ全般css ﾘﾌｧﾚﾝｽ へ
水平線に色を付ける(CSS)
backGround-color: blue;
　このプロパティは、全てのタグ（要素）に適用できます。
　backGround-color は、背景色を指定するプロパティです。このプロパティを<hr>タグ（要素）に設定すると、水平線に色を付けることができます。
　hr { backGround-color: #0000ff; height: 3px; border: none; color: #0000ff; }
プロパティ名値説　　明
backGround-color カラーコード or
カラーネーム		 水平線の色を指定
※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。カラーネームのページへ
　【水平線の境界線について】
　backGround-color プロパティの指定では、水平線の内側の色（背景色）を指定することになります。そのため、水平線の境界線は初期値（デフォルトの色）で表示されます。
　① backGround-color のみを指定した例
<hr style="backGround-color:#a0f0f0; height:8px;">
　【境界線を消したい場合】
　水平線の境界線を消したい場合は、border: none を指定します。
　しかし、Internet Exp.ではこの指定が無視されます。Internet Exp.でも境界線を消すようにするには、背景色と同じ色を color属性で指定します。
　② border: none のみを指定した例（Internet Exp.は無視します）
<hr style="border:none; backGround-color:#a0f0f0;
　  height:8px;">
　③ color プロパティを同時に指定した例
<hr style="color:#a0f0f0; border:none;
　  backGround-color:#a0f0f0; height:8px;">
　【height の指定】
　色の指定を反映させるには、height 属性で水平線の高さを指定し、背景が表示されるスペースを確保します。
　④ height 属性を指定しなかった例
<hr style="backGround-color:#ffdfef;">
　⑤ height: 10px; を指定した例
<hr style="backGround-color:#ffdfef; height:10px;">
　★ 使用例とブラウザでの表示 (a3-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： hr.a3-3exam1 { backGround-color: mediumpurple; height: 10px; }
hr.a3-3exam2 { backGround-color: teal; color: teal; height: 3px; border: none; }
使　用　例   ブラウザの表示
<hr class="a3-3exam1">
<hr class="a3-3exam2">
＊ 水平線の高さを指定する場合は、height:1px; ～ height:3px; 程度が適当です。指定方法は、hr.a3-3exam2 のタイプが実用的です。
関連するページ
HTML タグページ 水平線を引く：水平線を引く
HTML タグページ 水平線の色：水平線に色を付ける
水平線のサイズ水平線の表示位置 水平線の色水平線の背景画像 水平線の境界線改ページ指定 ページ全般css ﾘﾌｧﾚﾝｽ へ
水平線の背景に画像を使う(CSS)
backGround-image: url(URI);
　このプロパティは、全てのタグ（要素）に適用できます。
　backGround-image は、背景画像を指定するプロパティです。このプロパティを<hr>タグ（要素）に設定すると、水平線の背景に画像を使用できます。
　hr { backGround-image: url(back.gif); height: 10px; }
プロパティ名値説　　明
backGround-image url(URI)表示する画像ファイルを指定
　【画像の指定方法】
　url( ) … ( ) 内に画像のURIを指定します。
backGround-image: url(back.gif);
　背景画像の指定を反映させるには、height属性で水平線の高さも指定します（背景が表示されるスペースを確保するため）。
　また、backGround-repeat属性や backGround-position属性なども同時に指定できます。
　★ 使用例とブラウザでの表示 (a3-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： hr.a3-4exam1 { backGround-image: url(ballRed.gif); height: 14px; }
hr.a3-4exam2 { backGround-image: url(lineBlue.gif); height: 5px;
backGround-color: moccasin; backGround-repeat: no-repeat;
backGround-position: center; }
使　用　例   ブラウザの表示
<hr class="a3-4exam1">
<hr class="a3-4exam2">
☆ 水平線の高さは、使用した画像に合わせています。
関連するページ
CSS スタイルシート？：ボックスの背景に画像を使う
HTML タグページ 水平線を引く：水平線を引く
水平線のサイズ水平線の表示位置 水平線の色水平線の背景画像 水平線の境界線改ページ指定 ページ全般css ﾘﾌｧﾚﾝｽ へ
水平線の境界線を指定する(CSS)
border: 1px blue solid;
　このプロパティは、全てのタグ（要素）に適用できます。
　border は、境界線の太さ、色、スタイルを指定するプロパティです。このプロパティを<hr>タグ（要素）に設定すると、様々なタイプの水平線を作ることができます。
　hr { border: 1px #ff0000 solid; backGround-color: #ffdfe2; height: 10px; }
プロパティ名値説　　明
border 太さ､色､スタイル境界線の太さ、色、スタイルを指定
(境界線スタイル)
border-top  or
border-bottom		 solid直線を引く
dotted点線：太さは 3px 以上が適切
dashed破線：太さは 2px 以上が適切
　★ 使用例とブラウザでの表示 (a3-5)スタイルシートの書き方（基本）は、こちら です。
設定例 ： hr.a3-5exam1 { border: 2px #4a1b72 solid; height: 10px; color: blueviolet;
backGround-color: blueviolet; }
hr.a3-5exam2 { border: 3px solid; height: 10px; backGround-color: lightgreen;
color: lightgreen; border-color: #b0eeb0 #80bb80 #80bb80 #b0eeb0; }
hr.a3-5exam3 { border: none; border-top: 3px blue dotted; height: 3px; }
hr.a3-5exam4 { border: none; border-top: 2px green dashed; height: 2px; }
使　用　例   ブラウザの表示
<hr class="a3-5exam1">
<hr class="a3-5exam2">
<hr class="a3-5exam3">
<hr class="a3-5exam4">
関連するページ
HTML タグページ 水平線を引く：水平線を引く
水平線のサイズ水平線の表示位置 水平線の色水平線の背景画像 水平線の境界線改ページ指定 ページ全般css ﾘﾌｧﾚﾝｽ へ
印刷時の改ページ部分を指定する(CSS)
page-break-before: always; page-break-after: avoid;
　このプロパティは、ブロックレベル要素（ひとつのまとまりを構成する要素）に適用できます。
　page-break-before と page-break-after は、印刷時の改ページ部分を制御するプロパティです。
page-break-before … タグ（要素）の直前の改ページを制御
page-break-after … タグ（要素）の直後の改ページを制御
　hr { page-break-after: always; }
プロパティ名値説　　明
page-break-before
（直前）		 auto制御しない（初期値）
always直前で改ページさせる
avoid直前の改ページを禁止
page-break-after
（直後）		 auto制御しない（初期値）
always直後で改ページさせる
avoid直後の改ページを禁止
※ avoid の指定は、Opera のみが対応しているようです。
　【 指 定 例 】
　見出し <h2>タグ（要素）の直前で改ページさせる例
h2 { page-break-before: always; }
　水平線 <hr>タグ（要素）の直後に改ページさせる例
hr { page-break-after: always; }
　★ 使　用　例
設　定　例   印刷時の動作など
.before { page-break-before: always; } <div class=before>
タイトル行などの前に<div>タグなどを配置し、
そのタグに before を指定するとタイトル行の
直前で改ページします。
.after { page-break-after: always; } <hr class=after>
<hr>タグに after を指定し、水平線の直後に
改ページさせます。
＊ 改ページ箇所は、印刷プレビューで確認できます。改ページ箇所が適切に配置されているかは、プレビューで確認しながら使用して下さい。
水平線のサイズ水平線の表示位置 水平線の色水平線の背景画像 水平線の境界線改ページ指定 ページ全般css ﾘﾌｧﾚﾝｽ へ