ベストアンサー

WEBページ左右に区切り線を挿入

2008/04/28 17:59

お世話になっております。 Dreamweaver8、Windows XP環境でHP制作をしています。ページの左右（編集領域というのでしょうか）に線を入れたいのですが、どう調べてもわからず困っております。ボタンやFLASHなどの素材を配置したのですが、どうもバラバラな感じになってしまい、どこまでがページの横幅で、どこからが余白なのか分からないため、左右に線があって、その中に素材が納まっている感じにしたいのですが…。この説明でご理解いただけるでしょうか…？タグ等を見てもどれがその線に当たるのか分からず悩んでいます。ご存知の方いらっしゃいましたらどうぞお知恵を貸してください。よろしくお願いします。

noname#127702

ホームページ作成ソフト
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yosoho
ベストアンサー率59% (19/32)

2008/04/28 22:24 回答No.4

すいません、説明で「仮に<body>」と書いたことで、あいまいな説明になってしまい、申し訳ないです。正確に書きます。通常<body>は、白紙の紙を用意するイメージです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>練習</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header">ヘッダー部分</div> <div id="contents">コンテンツ部分</div> <div id="footer">フッター部分</div> </div> </body> </html> 上記のように、<body>の内側に本内容を表示する箱<wrapper（名前は任意）>があり、その内側に<header><contents><footer>が入れ子になってます。左右のグレーのライン（boader）はwrapperのCSSに定義します。 <body>（このページの実体）の中央揃えは<body>の左右marginをauto（自動）にします。 wrapper以下の箱に左右1pxのラインが加わりますので、<body>の幅より-2px狭くなってます。

質問者

お礼 2008/04/30 18:08

何度もご回答いただき、ありがとうございました。おかげさまで、無事左右に線をつけ、センタリングできました。☆☆うれしすぎます！☆ お忙しいところ、こんなに詳しくタグを書いてくださって、とても助かりました。「あいまいな説明になってしまって」なんてとんでもないです！私の勉強不足のせいでご迷惑おかけしたのに…すみません。まだまだ未熟ですが、もっと勉強してがんばっていきたいと思います。これからもこちらのサイトにお世話になることと思いますが、ご縁がありましたらどうぞよろしくお願い致します。本当にありがとうございました！

その他の回答 (3)

naokita
ベストアンサー率57% (1008/1745)

2008/04/28 22:12 回答No.3

＃２回答・お礼への回答ですが左寄りになって左線が隠れている為と思います。 --------------------------------- ↓下記が変ですよ。↓ --------------------------------- margin-top: 0px; margin-left: 0px; margin-top: 0px; --------------------------------- 下記サイトをご参考に http://www.mozilla.gr.jp/standards/webtips0004.html

参考URL：: http://www.mozilla.gr.jp/standards/webtips0004.html

質問者

お礼 2008/04/30 18:04

ご回答ありがとうございます！全く無知でお恥ずかしいかぎりです。お教えいただいたURLとても参考になり、お気に入り登録しました。おかげさまでなんとか希望通りにできそうです。本当にありがとうございました！

yosoho
ベストアンサー率59% (19/32)

2008/04/28 19:35 回答No.2

仮に<body>の幅が「800px」、高さを「1000px」だとして、 <body>の左右両側に「1pxの#CCCCCC色」のラインを引く場合、 CSSでborderのラインを定義すると楽です。 <style type="text/css">  </style> で、どうでしょう。

質問者

お礼 2008/04/28 20:22

ご回答ありがとうございます。お教えいただいたとおりにやってみたところ、右側に線が表示できました！ありがとうございます！！でも、左側には線が出ないのです。なぜでしょうか？ちなみに現在のタグは <style type="text/css">  </style> となっています。レイアウトの都合上、最後の方にあるフォントやフォントカラーの設定はこのままでいきたいと思っています。それからセンター揃えのページにしたいのですが、教えていただいたタグを入れたところ、左寄せになってしまいました。どうすればセンター揃えにでき、かつ左側にも線を表示できるのでしょうか？大変申し訳ないのですが、お教えいただけるとありがたいです。いくつもおたずねし、申し訳ありません。どうぞよろしくお願いいたします。

k_mori
ベストアンサー率62% (23/37)

2008/04/28 18:40 回答No.1

こんにちはホームページ作成の件についてですが htmlのタグはframesetですね使い方の例を書いておきます。 <FRAMESET rows="14%,*" frameborder=" NO"border="0"> <FRAMESET cols="80%,20%" frameborder="NO" border="0"> <FRAME name="top" src="その１" scrolling="NO"> <FRAME name="side" src="その２" scrolling="NO"> <NOFRAMES> <BODY></BODY> </NOFRAMES> </FRAMESET> <FRAMESET cols="15%,85%"> <FRAME name="left" src="その３" scrolling="NO"> <FRAME name="right" src="その４"> <NOFRAMES></NOFRAMES> </FRAMESET> <NOFRAMES> <BODY></BODY> </NOFRAMES> </FRAMESET> 上のことを実行すると上と横サイドに分かれます線のありなしは、framebolder、スクロールの有り無しは、scrolling で制御できます詳しいことは　以下のＵＲＬに書いてあります http://www.htmq.com/html/index.shtml

質問者