※スタイルシート、スタイル属性の詳しい解説は、「HTMLの解説」にあります。

■ 縦罫線の作成(縦線を引く)

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

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

縦罫線を引くには様々な方法があります。
1.テーブルを使用する方法。
2.画像を使用する方法。
3.スタイル属性を使用する方法。

などです。

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

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


【サンプル1】 【サンプル2】 【サンプル3】 【サンプル4】
罫線の両側に文字が 記述できます。
line これはspanタグを





使用しています。


【サンプル5】 【サンプル6】 【サンプル7】

こちらはdivタグを




使用しています。

テーブルにスタイル属性を指定した例。
テーブルのセルの背景に画像を指定する方法。 罫線の両側に文字が記述できます。

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

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

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

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

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

【サンプル5】(スタイル属性を指定し擬似罫線を作る)
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>

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

【サンプル7】(セルの背景に画像を埋め込んで作る罫線)
テーブルのセルの背景に画像を埋め込み、繰り返しを使った罫線。
この場合はセルの幅、高さに応じて敷き詰められる。
スタイル属性の「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>

page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom