ＨＰに縦の罫線を入れる方法

ＨＰで区切りとしてよく罫線を利用します。
横の場合は、ソースで<HR>と入れると表示されますよね。
表組に入れれば、表の幅に応じて引かれますし、％で長さも調整可能です。

ですが、縦の場合どのように引けばいいのか分かりません(T-T)
参考に、↓このようなイメージというＨＰがありますのでご覧下さい。
http://www.census-shizuoka.jp/traffic.html

ページ（文章のボリューム）によって、縦線の長さが違いますよね。
どのように作られているのか、ソースをコピーしてＨＰビルダーで
見てみましたが、縦の線が表示されませんでした…。

こうすれば作れるよ、とおっしゃる方、ご回答の程宜しくお願いします。

No.4 ベストアンサー 回答者： THX1138 回答日時： 2005/10/13 13:58

この縦の線の実体は、テーブルのセル区切り線です。

HTML に「縦の罫線」という要素が別途用意されているわけではありません。

例に挙がっているページでは右側（本文）のセルに

99行目：<td valign="top" class="boxLeft">

と、class 属性が指定されています。
具体的な指定は、スタイルシート

http://www.census-shizuoka.jp/index.css

に下記のように指定されています。

-----
td.boxLeft {
border-left-style: solid;
border-left-color: #999;
border-left-width: 1px;
（以下略）
-----

これは、セルの左の境界線を
・実線
・色は #999
・幅は１ピクセル
で表示しろ、と言う意味です。

なお、ホームページビルダーで正しく表示できないのは、参照している index.css をパソコン側にコピーしていないからです。

スタイルシートの詳細については参考 URL をご参照ください。

参考URL：http://www.kanzaki.com/docs/htminfo.html#simple- …

この回答へのお礼

ありがとうございました。
大変参考になりました。

お礼日時：2005/10/13 16:07

No.5 回答者： noname#163949 回答日時： 2005/10/13 14:05

縦線の引き方は解りませんが、ビルダーがあるのなら表の機能で作った方が早いですよ。

縦線の長さとかはドラックすれば自由自在に変えられますよ？

後は表の項目の中に結合とか有るのでそれを使うとリンクして有るような表とか出来ますよ。

この回答へのお礼

ありがとうございました。

お礼日時：2005/10/13 16:06

No.3 回答者： kalze 回答日時： 2005/10/13 13:57

ちゃんとソース見てないので、実際には違うかもしれませんが、見た目上こうやってるなぁとおもうので。

左部分と右部分は１つのtebleのセルに入っている
<table>
<tr><td>左部分</td><td>右部分</td><tr>
</table>

後はスタイルシートで、左部分と右部分の境目部分を表示すればよい。

例えば、
.boxleft { border:solid; border-width:0 1px 0 0; border-color:gray; }
.boxright { border:solid; border-width:0 0 0 1px; border-color:gray; }
のようにスタイルシートを定義しておき、
<table>
<tr>
<td class="boxleft">左部分</td>
<td class="boxright">右部分</td>
<tr>
</table>
としてやれば、左右のセルの境界部分のみボーダーラインが引かれる

この回答へのお礼

ありがとうございました。

お礼日時：2005/10/13 16:07

No.2 回答者： noname#14286 回答日時： 2005/10/13 13:55

そちらのHPは

全体的に、テーブルを利用して作られています。

長方形をおもいうかべて
右側の辺だけに、線を引くっというスタイルシートを書いています。

http://www.google.co.jp/search?hl=ja&rls=DVXA%2C …

ちなみに、そちらのHPでは
border-left-style: solid;
border-left-color: #999;
border-left-width: 1px;
このように指定していますね。

指定の方法は色々あります。

この回答へのお礼

ありがとうございました。

お礼日時：2005/10/13 16:07

No.1 回答者： nekonyanko 回答日時： 2005/10/13 13:55

CSSで定義されているようですね。

http://www.census-shizuoka.jp/index.cssを見てください。
ページの分割線というところがそうです。

この回答へのお礼

ありがとうございました。

お礼日時：2005/10/13 16:06