■ 縦罫線の作成（縦線を引く）

ホームページのレイアウトを整理する上で縦線（罫線）を引きたいと思うことがあります。
ところがHTMLに縦罫線に該当するタグはありません。

そこで、擬似的な縦罫線を作成する方法を説明します。

縦罫線を引くには様々な方法があります。
１．テーブルを使用する方法。
２．画像を使用する方法。
３．スタイル属性を使用する方法。
などです。

また、これらを複数組み合わせる方法もあります。
スタイル属性を使用したほうが説明がしやすいのでスタイル属性で解説します。

テーブルの作成、画像の指定なとを詳しく知りたい場合は「HP作成の予備知識」もしくは「HTMLの解説」を参照してください。
※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

【サンプル１】	【サンプル２】	【サンプル３】	【サンプル４】
	罫線の両側に文字が 記述できます。		これはspanタグを ↓ ↓ ↓ ↓ ↓ 使用しています。

【サンプル５】	【サンプル６】	【サンプル７】
こちらはdivタグを 使用しています。	テーブルにスタイル属性を指定した例。	テーブルのセルの背景に画像を指定する方法。 罫線の両側に文字が記述できます。

このページはスタイルシートを使用しているので下記の記述方法とは異なる場合があります。

【記述サンプル】

【サンプル１】（テーブルを使用した単純な罫線）
テーブルの背景色を指定し、幅を指定する。
縦線の長さはテーブルの高さで指定します。
<table style="height: 150px; width: 1px; background-color: gray; border-collapse: collapse;">
<tr>
<td></td>
</tr>
</table>

【サンプル２】（テーブルのセルを使用した罫線）
セルの背景色を指定し、そのセル幅を指定する。
縦線の長さはテーブルの高さで指定します。
<table>
<tr>
<td>罫線の両側に文字が</td>
<td style="width: 1px; height: 150px; background-color: blue;"></td>
<td>記述できます。</td>
</tr>
</table>

【サンプル３】（画像を使用した擬似罫線）
画像ソフトで「1px」か、「2px」ほどの小さなボックス（四角）を色指定して作成する。
この画像を貼り付け、幅、高さとも指定する。
<img src="../../images/sample/2pxbxor.gif" width="1" height="150">

【サンプル４】（スタイル属性を指定し擬似罫線を作る）
spanタグにスタイル属性を指定する。
文字や行数に応じた縦罫線が表示される。
<span style="border-left: 1px solid fuchsia; line-height: 1.0em;">
これはspanタグを<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
使用しています。<br>
</span><br>

【サンプル５】（スタイル属性を指定し擬似罫線を作る）
divタグにスタイル属性を指定する。
文字や行数に応じた縦罫線が表示される。
<div style="border-left: 1px solid red; line-height: 1.0em;">
<p>
こちらはdivタグを
</p>
<p><br></p>
<p><br></p>
<p>
<br>
使用しています。<br>
</div>

【サンプル６】（テーブルにスタイル属性を指定した罫線）
同様にテーブルタグにスタイル属性を指定した方法。
ただし、セル単位の指定はできない。
<table style="height: 150px; border-left: 2px solid violet;">
<tr>
<td>テーブルにスタイル属性を指定した例。</td>
</tr>
</table>

【サンプル７】（セルの背景に画像を埋め込んで作る罫線）
テーブルのセルの背景に画像を埋め込み、繰り返しを使った罫線。
この場合はセルの幅、高さに応じて敷き詰められる。
スタイル属性の「background-repeat: repeat-y;」を追記すれば縦方向のみの繰り返しとなる。
<table style="height: 150px;">
<tr>
<td>テーブルのセルの背景に画像を指定する方法。</td>
<td style="background-image: url('../../images/sample/vlinevl.gif'); width: 3px;"></td>
<td>罫線の両側に文字が記述できます。</td>
</tr>
</table>