- ベストアンサー
右可変ブロックのボーダー表示について
- ネガティブマージンを使った２段組みの左固定、右可変のリキッドデザインで、右可変ブロックにボーダーを表示する方法について教えてください。
- test.htmlは２段組みの左固定、右可変のリキッドデザインになっており、右可変ブロックにはボーダーが表示されていますが、右に10pxのマージンを取る方法について教えてください。
- test.htmlにおいて、右可変ブロックのボーダー表示に問題があります。右に10pxのマージンを取る方法について教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
// スタイルシート * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; background-color: black; } #menu { position: absolute; top: 0; width: 150px; height: 100%; background-color: white; } #main { height: 100%; padding: 0 10px 0 160px; background-color: gray; } #mainContent { position: relative; top: 10px; border: 1px solid #85b3dc; } // HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="./test.css" type="text/css" /> <title>sample</title> </head> <body> <div id="main"> <div id="mainContent">MAIN_CONTENT </div> </div> <div id="menu"> MENU_CONTENT </div> </body> </html> スタイルシートの修正だけではちょっと難しかったので、html ソースを若干修正。副次的な効果としてコンテンツ部分のソースがメニューよりもファイルの上部に移動した為、SEO 的にも有利な記述になりました。 IE6 でも Firefox でも同じ表示になってると思うよ？ 追記１ ＞普通の感覚だとブラウザ枠いっぱいいぱいが100%ですよね＾＾ ＞ブラウザを突っ切って表示される理由が分かりません。 ブラウザ枠いっぱいいっぱいが100%で間違いありません。しかし #main は margin-left を 150px 指定しているでしょ？だから表示するのに『ブラウザの幅 + 150px 』必要なんです。不思議な事などカケラもありゃしません。 追記２ ところで記述する文書型に何故 xhtml1.1 を採用されたのでしょう？ 失礼ですが書かれたソースから判断するに、xhtml の正しい記述の方法を全く解ってらっしゃらないですよね？名前空間の宣言も 言語の指定もありませんし、空要素も一切閉じられていません。 xhtml は html に比べて記述のルールが厳格にチェックされます。正確な仕様をご存知でないのなら、無難に html4 の Transitional あたりで記述することをお勧めします。
その他の回答 (1)
- stpopo
- ベストアンサー率52% (13/25)
こんにちわ まだ勉強中の身です。 このCSSって横スクロールしますけど、いいのかな？ そこらへんは詳しい方にお任せするとして、 とりあえず、このCSSでマージンを取るとすると、下記の部分を変更しては どうでしょうか。 #menu { width: 150px; height: 100%; float: left; display: inline; margin-right: -170px; background-color: white; margin-top: 10px; margin-left: 10px; } #main { width: 100%; height: 100%; float: left; display: inline; margin-left: 170px; margin-right: -170px; background-color: gray; }
お礼
お返事ありがとうございます。 私もCSSはまだ始めたばかりで、試行錯誤しながら勉強中です。 Firefox ではブラウザの横スクロールが出ちゃいます；こちらの確認環境IE6ではスクロールはでません。なので、IE6では#mainのmargin-right: -150px;が効いてる感じですが、Firefox の方がウェブ標準に近い実装ですから、多分この書き方ではスクロールされることが正しいんでしょうね。 そもそも、なぜスクロールされるかが分かっていません。#mainではwidth: 100%; としていますが、普通の感覚だとブラウザ枠いっぱいいぱいが100%ですよね＾＾ブラウザを突っ切って表示される理由が分かりません。おそらくこの理由が解決されれば、質問している内容が解決されるのではと思っています。 ちなみに、教えていただいた方法でも解決されませんでした；
お礼
お返事ありがとうございます。 >> IE6 でも Firefox でも同じ表示になってると思うよ？ ん・・私のソースだと、IE6ではスクロールバーが出ず、FFでは出るという違いはあったんですが、見間違いかもしれませんね。 >> ブラウザ枠いっぱいいっぱいが100%で間違いありません。しかし #main は margin-left を 150px 指定しているでしょ？だから表示するのに『ブラウザの幅 + 150px 』必要なんです。不思議な事などカケラもありゃしません。 なるほど！こんな簡単なことにまったく気づきませんでした。そうですよね。width:100%にmargin-left:150pxすれば当然ブラウザ枠からはみ出ますよね＾＾そして、#mainContentにmargin-left:150pxすれば解決することにも気づきました(#mainの背景に少々問題がありますが、内容があれば問題ないです)。教えていただいた方法もまさにやりたいことでした。ありがとうございます。 >> ところで記述する文書型に何故 xhtml1.1 を採用されたのでしょう？ 失礼ですが書かれたソースから判断するに、xhtml の正しい記述の方法を全く解ってらっしゃらないですよね？名前空間の宣言も 言語の指定もありませんし、空要素も一切閉じられていません。 はい。おっしゃるとおり全く分かってないと思います。CSSを勉強しだしたのも一週間前ですから今は実用に向けて勉強中です。xhtml1.1を採用した理由もなるべく厳格にというだけです。仮に業務で使うのであれば、xhtml1.0 strict + css2 を採用しようと考えてます。いずれにしても、よりヴェブ標準に詳しくなってからの話です＾＾ hujitomoさんの書き込みによって、今まで気付きもしなかったところがはっきりと分かって大変満足しています。本当にありがとうございました。