縦線をひく方法

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
p.left { border-left: 4px dotted #ff00ff; height: 60px; }
p.right { border-right: 5px double #0000ff; height: 60px; }
-->
</style>
</head>
<body>
<p class="left">この文字の左に縦線</p>
<p class="right">この文字の右に縦線</p>
</body>
</html>

表示サンプル

この文字の左に縦線

この文字の右に縦線

解説

それぞれの指定の仕方はこちらを参照下さい。

左側に線を引く場合は「border-left」プロパティを、右側に線を引く場合は「border-right」プロパティを使います。併せて、線の長さ（高さ）を調整したい場合は、「height: 長さ ;」と指定します。上記例のように「<div>」タグを使っても良いですし、テーブル内のセルに指定することもできます。

画像を使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<img src="m4.gif" alt="縦線" style="height:120px;width:5px;">
<img src="m4.gif" alt="縦線" style="height:30px;width:10px;">
</body>
</html>

表示サンプル

解説

最初から表示したい縦線の画像を用意するのも一つの手ですが、今回使用した画像は「縦線元画像」のような画像です。この画像の幅や高さをスタイルシートで指定する事によって、さまざまな縦線を表示することができます。これを応用すれば横線にも使えます。

画像の拡大と縮小方法についてはこちらを参照下さい。