トップ > 逆引きリファレンス > 線

横線を引くには

横線を引くには <hr> を用います。hr は Horizontal Rule(水平罫線)の意味です。属性によって長さ、左右の位置、太さ、影の具合、色などを指定することができます。

<hr>
<hr width=200 align=left>
<hr width=200 size=5>
<hr width=200 size=5 noshade>
<hr width=200 size=5 color=red>

縦線を引くには

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

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

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

文字などを枠線で囲むには、<table> の border=1 属性を用いる方法もありますが、スタイルシートの border を用いる方法もあります。border: には線の太さ、線種、色を指定します。文字と枠線の間の余白は padding で調整します。

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

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

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

<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>

Copyright (C) 2003 杜甫々
初版: 2003年10月12日
http://www.tohoho-web.com/how2/line.htm