今、HTMLで左右に青い枠のあるサイトを制作しておりますが、テーブルタグを使わずに、この左右の青い枠を連動させて延ばすことは出来ませんでしょうか？

body{border:solid #00f;border-width:0 10px 0 10px;}

でいかがでしょうか。

スタイルシートで可能かと思いますが、左右の長さが同じなのか、段違いなのかでbodyに対して命令したらいいのか、divやPに命令したらいいのか変わります。

左右の青枠は縦に伸びればいいのでしょうか？

それでしたら、スタイルシートで背景画像を張る方法とborderを設定する方法があります。

まず背景画像を使った方法ですが、↑のURLの画像をセキュリティ@niftyは使っています。

http://www.nifty.com/webapp/security/index.jsp

#wrapというIDに上記の背景画像を設定し、そのidをdivに与えています。

<div id”wrap”>の内容物が増えると、背景画像が下に連続して表示されるので、あたかも灰色の帯びを設定しているような表示になります。

このスタイルを引用すると以下の通りです。

#wrap {

width: 770px;

margin: 0px 0px 1px 0px;

background: url(”../img/wrapbg.gif”) repeat-y;

}

この画像を変更して、左右に青色がある画像にすれば、左右の枠が伸びていく結果になります。

borderを設定する場合はもっと簡単です。

同じくidやclassを用意して、↓のようにします。

#hoge { border-left:1px solid blue; border-right:1px solid blue; }

↑はidの例ですが、1pxを変更すれば線の太さの調整ができます。

スタイルシートが難しいようでしたら、背景画像を使った場合は、設定したいものに以下のようにすればスタイルを適用できます。

<div style=”background:url(画像へのパス) 0 0 repeat-y;”>

</div>

borderを使う場合はstyleの中を変えてあげてください。

borderを使う場合の注意点は、widthをpxで指定したセレクタ(idやclass)に対してはborderを設定しないことです。

これはIE(5.x以下)とFireFoxやOperaなどはボックスモデルの解釈が異なるからです。

ブラウザで表示が違ってしまう！とハマる原因になります。

詳しくは「ボックスモデル　ハック　ie」で検索してみてください。

私が説明するより詳しい説明が載っているページが色々ありますので。