HRタグを使ってWebページ上で面白い見栄えの線を作る
ウェブサイトに水平の区切り線を追加する必要がある場合は、いくつかの選択肢があります。 これらの行の実際のイメージファイルをページに追加することはできますが、ブラウザでこれらのファイルを取得して読み込む必要があり、サイトのパフォーマンスに悪影響を及ぼす可能性があります。
CSS境界プロパティを使用して、要素の上端または下端のいずれかの行として機能する枠線を追加して 、効果的に区切り線を作成することができます。
最後に、 HTML要素を水平ルールに使用することができます。
水平ルール要素
Webページに要素を配置したことがある場合、これらの行が表示されるデフォルトの方法は理想的ではないことがわかりました。 つまり、これらの要素の視覚的外観をサイトの見た目に合わせて調整するには、CSSを使用する必要があります。
基本的なHRタグは、ブラウザが表示する方法で表示されます。 現代のブラウザでは、通常、線を作成するために幅100％、高さ2px、3D境界線を黒色で囲んだ非スタイリングHRタグが表示されます。
ここでは、標準のHR要素の例を示します。このイメージでは、現代のブラウザでは、非構造化HRがどのように見えるかを見ることができます。
幅と高さはブラウザ間で一貫しています
ウェブブラウザ間で一貫した唯一のスタイルは、 幅とスタイルです。 これらは、行の大きさを定義します。 幅と高さを定義しない場合、デフォルトの幅は100％で、デフォルトの高さは2pxです。
この例では、幅は親要素の50％です（以下の例では、すべてインラインスタイルを使用していますが、実際の設定ではこれらのスタイルは実際にはすべてのページで管理しやすいように外部スタイルシートに記述されます）。
style = "width：50％;">
そして、この例では高さは2emです：
style = "height：2em;">
国境を変えることは難しい
最新のブラウザでは、ブラウザは境界線を調整して線を作成します。 したがって、スタイルプロパティで枠線を削除すると、ページ上で線が消えます。 ご覧のとおり、この例では線が見えなくなるため、何も表示されません。
style = "border：none;">
境界線のサイズ、色、およびスタイルを調整すると、線が異なって見えるようになり、現代のすべてのブラウザで同じ効果が得られます。 たとえば、このデモンストレーションでは、境界線は赤、点線、1ピクセル幅です。
style = "border：1px＃000;">
しかし、境界と高さを変更すると、古くなったブラウザーでは現代のブラウザーよりもスタイルが少し違って見えます。 あなたがこの例で見ることができるように、IE7以下（悲惨なことに、時代遅れであり、もはやマイクロソフトによってサポートされていないブラウザ）でそれを見ると、他のブラウザ（IE8以上を含む）では表示されない、 ：
style = "height：1.5em; width：25em; border：1px solid＃000;">
これらの古くなったブラウザは、今日のWebデザインではあまり問題にはならない。
背景画像付き装飾線を作る
色の代わりにHRの背景イメージを定義して、正確に見えるようにすることができますが、マークアップには意味的に表示されます。
この例では、3つの波線の画像を使用しました。 繰り返しなしの背景画像として設定することで、書籍に表示されているのとほぼ同じようにコンテンツに改行が作成されます。
style = "height：20px; background：#fff url（aa010307.gif）ノーリピートスクロールセンター; border：none;">
HR要素の変換
CSS3を使用すると、ラインをより面白くすることもできます。 HR要素は伝統的には水平線ですが、CSSトランスフォームプロパティを使用すると、その外観を変更できます。 HR要素の好きな変換は、回転を変更することです。
HR要素をわずかに対角になるように回転させることができます：
hr {
-moz-transform：回転（10度）。
-webkit-transform：回転（10度）。
-o-transform：回転（10度）。
-ms-transform：回転（10度）。
変換：回転（10度）。
}
または、完全に垂直になるように回転することもできます。
hr {
-moz-transform：回転（90度）。
-webkit-transform：回転（90度）;
-o-transform：回転（90度）。
-ms-transform：rotate（90deg）;
変換：回転（90度）。
}
これは、文書内の現在の位置に基づいて人事管理をローテーションすることを忘れないでください。 これを使用してデザインに垂直線を追加することはお勧めしませんが、興味深い効果を得る方法です。
あなたのページにラインをつくる別の方法
HR要素を使用するのではなく、一部の人が行うことの1つは、他の要素の境界線に頼ることです。 しかし、人事制度は、国境を設定しようとするよりずっと便利で使いやすいことがあります。 いくつかのブラウザのボックスモデルの問題は、境界線を設定することをさらに厄介にする可能性があります。