HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座

|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 講座インデックス > 改行(br要素)と区切り線(hr要素)
様々なブックマークサービスがご利用頂けます。

改行タグと区切り線

■ br 要素
テキストや、画像などのインライン内容を強制改行します。
ソース  ソース
テキストを<br>改行します。
表示  表 示
テキストを
改行します。
br 要素を続けて指定する事で、ブラウザの表示上、空白行が作成されますので、あたかも段落を構成しているように表示されますが、これは、正確には文法的に誤りです。
ポイント  一部のブラウザでは1つ以上の br要素は記述しても無視されます。
■ hr 要素
区切り線(罫線)を表示します。
属性
  • width (幅(長さ)を指定します。非推奨)
  • align (表示位置を指定します。非推奨)
  • size (高さ(太さ)を指定します。非推奨)
  • color (区切り線の色を指定します。IE、Firefox、Safariが対応。)
  • noshade (平面的な区切り線を指定します。)
■width 属性 (非推奨)
区切り線の幅(長さ)を指定します。値は、数値(ピクセル)または、パーセンテージ値で指定します。
CSSの widthプロパティで代替指定する事が推奨されています。
ソース  ソース
<hr width="200">
表示  表 示

■align 属性 (非推奨)
width属性で区切り線の長さを指定した場合に、ウィンドウ内での左右揃えを指定する属性です。指定しない場合の基準値は center。
CSSの marginプロパティで代替指定する事が推奨されています。

  • left (左揃え)
  • center (中央揃え)
  • right (右揃え)
ソース  ソース
<hr width="200" align="right">
表示  表 示

■color 属性 (非推奨)
区切り線の色を指定します。値は、RGB値、又は、カラーネームで指定します。
CSSの colorプロパティで代替指定する事が推奨されています。
ソース  ソース
<hr color="red">
表示  表 示

横幅
■size 属性 (非推奨)
区切り線の高さ(太さ)を指定します。値は、数値(ピクセル)で指定します。指定しない場合の基準値は、ブラウザにより様々ですが、およそ、1〜2ピクセルでの表示になります。
CSSの heightプロパティで代替指定する事が推奨されています。
ソース  ソース
<hr size="10">
表示  表 示

■noshade 属性
平面的な区切り線を表示します。値はありません。
ソース  ソース
<hr noshade>
表示  表 示


hr要素 属性のCSS代替指定
■ width プロパティ
width属性の代替指定として、区切り線の幅(長さ)を指定します。
値は、数値(ピクセル)または、パーセンテージ値で指定します。
ソース  ソース (hr要素内での指定)
<hr style="width : 200 ; ">
ソース  ソース (head要素内での指定)
<style type="text/css">
<!--
hr { width : 200 ; }
-->
</style>
表示  表 示

■ margin プロパティ
marginプロパティで、区切り線の表示位置を指定します。
値は、数値(ピクセル)または、パーセンテージ値で指定します。
⇒ margin プロパティ
ソース  ソース (hr要素内での指定)
<hr style="width : 200 ; margin-left : 100 ; ">
表示  表 示

■ height プロパティ
size属性の代替指定として、heightプロパティで、区切り線の高さ(太さ)を指定します。
値は、数値(ピクセル)または、パーセンテージ値で指定します。
⇒ height プロパティ
ソース  ソース (hr要素内での指定)
<hr style="height : 10 ; ">
表示  表 示

■ color プロパティ
color属性の代替指定として、colorプロパティで、区切り線の色を指定します。値は、RGB値、又は、カラーネームで指定します。
⇒ color プロパティ
ソース  ソース (hr要素内での指定)
<hr style="color : red ; ">
表示  表 示


(C) いまさらHTML CSS講座 2002-2008 All right reserved