横の罫線（けいせん）を表示しよう！（hr要素）

使用タグ <hr>タグ

HTML一覧タグ辞典 … <hr> タグ

<hr>タグを使えば、横の罫線を表示できます。終了タグは必要ありません。

hr要素に指定できる属性のほとんどが推奨されない属性です！

hr 要素に指定できる属性は横方向配置を指定する align 属性、色を指定する color 属性、立体的な影を消す noshade 属性、太さを指定する size 属性、幅を指定する width 属性がありますが、この中で推奨されない属性は align 属性、noshade 属性、size 属性、width 属性です。そして color 属性は Internet Explorer 独自の属性ですので、ブラウザによって対応していない場合があります。
では、CSS で指定すればいいの？
この方法もCSSの仕様では横の罫線をCSSでデザインを変える方法について指定されていませんので、ブラウザにより指定方法が異なるという問題があります。では実際にどのように違うのか下の表に簡単にまとめています。

属性	Internet Explorer	Safari	FireFox	Opera
align	text-align プロパティ	margin-leftプロパティとmargin-rightプロパティ	margin-leftプロパティとmargin-rightプロパティ	text-alignプロパティ
color	colorプロパティ	background-color プロパティ	background-color プロパティ	background-color プロパティ
noshade	colorプロパティを設定した時点で影なしになります	border-styleプロパティの値を「solid」にする	border-styleプロパティの値を「solid」にする	border-styleプロパティの値を「solid」にする
size	heightプロパティ	heightプロパティ	heightプロパティ	heightプロパティ
width	widthプロパティ	widthプロパティ	widthプロパティ	widthプロパティ

このようにhr要素に指定できる属性の代わりのCSSはブラウザにより少々違います。このようなブラウザによる違いも将来的には整理される予定でしょうが、現状をみると、属性による横の罫線のデザインとCSSによる罫線のデザインは両方とも問題がありますので、罫線の指定方法は使用者に任せます。横の罫線を表示するもう一つの手は border-top プロパティや、border-bottom プロパティを使用して、枠線の上枠もしくは下枠のみを指定して罫線のように見せるという方法もあります。

使用例

では、実際に記述例を参考にしながら手順通りに入力していきましょう。

罫線を表示したい場所に<hr>タグを入力しましょう。これだけで横の罫線が表示されます。

記述例
<html> <head> <title>一人暮らしの前向き料理</title> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> <strong>ワンポイント</strong>を紹介します！</p> <p>おいしい<em>チャーハン</em>の作り方</p> <img src="sample.jpg" alt="チャーハン"> <hr> </body> </html>

使用例の表示

[hr要素適応前のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方

[hr要素適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方

このように「チャーハン」の下に横の罫線が表示されました。

画像の幅や高さ<BACK

<TOP>

<コース目次>

NEXT>リストを作成しよう！
最短・普通コースNEXT>リンクについて

関連情報ページ
このタグによく使われるCSS
幅と高さを指定する文字の横方向の位置を指定背景色/背景画像/の指定	文字の色を指定マージンの指定罫線のスタイルを指定
その他
CSSの基礎！

↑さらに更新予定です。

△ページトップへ

ゼロから始めよう！わかりやすい！ホームページ作成ガイド