Homepage Zero ガイド
logo

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

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>横の罫線(けいせん)を表示しよう!

横の罫線(けいせん)を表示しよう!(hr要素)

最短コース普通コースじっくりコースアイコンの説明最短コース普通コースじっくりコースアイコンの説明

使用タグ <hr>タグ

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

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

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

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

このように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要素適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理

料理を少しおいしくするための
ワンポイントを紹介します!

おいしいチャーハンの作り方

チャーハン

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

関連情報ページ

このタグによく使われるCSS

その他

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

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system