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


例えば、右の青い枠が伸びれば、左も連動して伸びる事になります。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/03/10 13:09:56
  • 終了:--

回答(3件)

id:izayoimizuki No.1

izayoimizuki回答回数302ベストアンサー獲得回数02006/03/10 15:47:46

ポイント20pt

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

でいかがでしょうか。

id:makocan

ご回答ありがとうございます。

試してみます。

2006/03/11 03:45:22
id:xkonnox No.2

紺野蒼回答回数34ベストアンサー獲得回数22006/03/10 21:36:32

ポイント20pt

http://www.scollabo.com/banban/ref/css.html

CSS$B%j%U%!%l%s%9(B/$B%9%?%$%k%7!<%H(B

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

id:makocan

ご回答ありがとうございます。

段違いや長さ違いはあるかもしれません。

スタイルシートは一切変更を行わずに、左右の青い枠に文字や画像を加えていき、その結果、右側の青い枠が倍以上に長くなった場合でも、左側も同じ長さまで伸びてくれるのを期待しております。

2006/03/11 03:50:31
id:amatoboss No.3

amatoboss回答回数14ベストアンサー獲得回数02006/03/11 02:32:00

ポイント20pt

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

それでしたら、スタイルシートで背景画像を張る方法と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;

}

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

http://www.htmq.com/index.htm

HTMLクイックリファレンス

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」で検索してみてください。

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません