線 - とほほのWWW入門

横線を引くには <hr> を用います。hr は Horizontal Rule(水平罫線)の意味です。長さ、位置、色などを指定するには、スタイルシートの width, height, margin, background-color など用います。

HTML

<hr>
<hr style="width:300px">
<hr style="width:300px; margin-left:0">
<hr style="width:300px; margin-right:0">
<hr style="height:5px; background-color:#66f">
<hr style="height:5px; background-color:#66f; border:0">

表示

縦線を引くには

縦線を引くにはスタイルシートを用いて、下記のように実現します。

HTML

<div style="background-color:gray; width:2px; height:40px;"></div>

表示

文字などを枠線で囲むには

文字などを枠線で囲むには、スタイルシートの border を用います。border: には線の太さ、線種、色を指定します。文字と枠線の間の余白は padding で調整します。

HTML

<div style="border:1px solid gray; padding:5px;">
あああああ
</div>

表示

あああああ

自由な線・円・曲線を描くには

斜めの線、曲線、折れ線グラフの線など、もっと自由な線を引くには、VML(Vector Markup Language)を用いる方法があります。詳細は「とほほのVML入門」を参照してください。

HTML

<html xmlns:v="urn:schemas-microsoft-com:vml"> 
<head>
<title>VML TEST</title>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:line from="0,100" to="300,100" strokecolor="black" />
<v:line from="0,100" to="0,0" strokecolor="black" />
</body>
</html>