整形テキスト HTMLのベーシック目次 アドレス

水平線 <hr>

HTMLでは標準的にブラウザのウィンドウ幅だけ水平線を引く<hr>タグが用意されています。こぼ節が変わる時やタイトルと本文を分ける場合などに用いられる<hr>タグは、ワンサイドタグで開始タグや終了タグがありません。

水平線の前後を空けたい場合は<p>(階段)タグを付けます。<p>タグがないと、

	
	
	水平線の前
	<hr>
	水平線の後
	
	
水平線の前
水平線の後

これに対して<p>タグを付けると以下のとおりです。

	

	水平線の前<p>
	<hr><p>
	水平線の後
	
	
これは水平線の前です。


これは水平線の後です。

拡張機能

HTMLの拡張機能として、水平線<hr>タグに4つの属性(オプション)が追加されました。水平線の厚み、横幅、位置、影を指定できるこれらの属性は、組み合わせて使用することも可能です。

<hr size=n> 水平線の厚み

size属性で水平線の厚みをピクセル値で指定できます。
	
	
	サイズ1
	<hr size=1>
	サイズ2
	<hr size=2>
	サイズ4
	<hr size=4>
	サイズ8
	<hr size=8>
	サイズ16
	<hr size=16>
	サイズ32
	<hr size=32>
	
	
サイズ1
サイズ2
サイズ4
サイズ8
サイズ16
サイズ32

<hr width=n | n%> 水平線の横幅

width属性では水平線の横幅が指定できます。幅の指定方法としてnをピクセル値、あるいはn%をウィンドウ幅に対するパーセンテージで書き込む2通りがあります。
	
	
	100ピクセル
	<hr align=left width=100>
	200ピクセル
	<hr align=left width=200>
	300ピクセル
	<hr align=left width=300>
	400ピクセル
	<hr align=left width=400>
	500ピクセル
	<hr align=left width=500>
	
	
100ピクセル
200ピクセル
300ピクセル
400ピクセル
500ピクセル
	
	
	10%
	<hr align=left width=10%>
	25%
	<hr align=left width=25%>
	50%
	<hr align=left width=50%>
	75%
	<hr align=left width=75%>
	100%
	<hr align=left width=100%>
	
	
10%
25%
50%
75%
100%

<hr align=left | right | center> 水平線の位置

水平線の幅が文書幅より狭い場合、どの位置へ置くかをalign属性で指定します。指定できる位置はleftが左、rightが右、centerが中央です。
	
	
	<b>左、50%</b>
	<hr align=left width=50%>
	<b>中央、50%</b>
	<hr align=center width=50%>
	<b>右、50%</b>
	<hr align=right width=50%>
	
	
左、50%
中央、50%
右、50%

<hr noshade> 水平線の影

このnoshade属性は、水平線に影(Shade)を持たせないで黒く塗りつぶす時に用います。
	
	
	影あり
	<hr align=left width=50% size=6>
	影なし
	<hr align=left width=50% size=6 noshade>
	
	
影あり
影なし

<hr color> 水平線の色

インターネット・エクスプローラ(Microsoft社)などでは、color属性によって水平線の色を指定できます。ただし、この属性がサポートされブラウザはまだ少なく、ネットスケープなどでは機能しません。
	
	
	赤い水平線
	<hr align=left color="#ff0000 width=50%">
	黄色い水平線
	<hr align=left color="#ffff00 width=50%">
	青い水平線
	<hr align=left color="#0000ff width=50%">
	
	
赤い水平線
黄色い水平線
青い水平線



Copyright (C) 1996-2003 by Yasukazu Yokoi. All Rights Reserved.