人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: makocan
●カテゴリ:コンピュータ
✍キーワード:HTML サイト タグ 制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● izayoimizuki
●20ポイント

http://www.1coro.com/css/border.php

CSS-Styling [border]

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

でいかがでしょうか。

◎質問者からの返答

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

試してみます。


2 ● 紺野蒼
●20ポイント

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に命令したらいいのか変わります。

◎質問者からの返答

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

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

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


3 ● amatoboss
●20ポイント

http://www.nifty.com/security/common/img/wrapbg.gif

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

それでしたら、スタイルシートで背景画像を張る方法と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」で検索してみてください。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ