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

質問

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

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

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

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

回答No.4

THX1138 · ベストアンサー

この縦の線の実体は、テーブルのセル区切り線です。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-html

お礼

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

回答No.5

noname#163949

縦線の引き方は解りませんが、ビルダーがあるのなら表の機能で作った方が早いですよ。
縦線の長さとかはドラックすれば自由自在に変えられますよ？

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

お礼

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

回答No.3

kalze

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

左部分と右部分は１つの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>
としてやれば、左右のセルの境界部分のみボーダーラインが引かれる

お礼

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

回答No.2

noname#14286

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

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

http://www.google.co.jp/search?hl=ja&rls=DVXA%2CDVXA%3A2005-04%2CDVXA%3Aja&q=border+css+table&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_ja

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

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

お礼

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

回答No.1

nekonyanko

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

お礼

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