みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

2段リキッド(右可変)時の右ブロックのボーダー表示について

タイトルでは分かりにくいですので、まずはCSSとHTMLのソースを添付します。

test.css===
* {
padding: 0px;
margin: 0px;
}

html, body {
width: 100%;
height: 100%;
background-color: black;
}

#container {
width: 100%;
height: 100%;
}

#menu {
width: 150px;
height: 100%;
float: left;
display: inline;
margin-right: -150px;
background-color: white;
}

#main {
width: 100%;
height: 100%;
float: left;
display: inline;
margin-left: 150px;
margin-right: -150px;
background-color: gray;
}

#mainContent {
margin: 10px;
border: 1px solid #85b3dc;
}
===

test.html===
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./test.css" type="text/css">
</head>
<body>
<div id="container">
<div id="menu">
MENU_CONTENT
</div>
<div id="main">
<div id="mainContent">MAIN_CONTENT</div>
</div>
</div>
</body>
</html>
===

test.htmlはネガティブマージンを使った2段組みの左固定、右可変のリキッドデザインとなっています。右可変ブロックには#mainContentにより、ボーダーを表示していますが、右可変ブロックの左には10px のマージンが取られているのに、右には10px のマージンがありません。右に10px のマージンをとるにはどうしたら良いのでしょうか?

分かりにくい内容とは思いますが、お願いします。

投稿日時 - 2010-03-26 10:44:53

QNo.5780261

すぐに回答ほしいです

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

// スタイルシート
* {
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 でも同じ表示になってると思うよ?

追記1
>普通の感覚だとブラウザ枠いっぱいいぱいが100%ですよね^^
>ブラウザを突っ切って表示される理由が分かりません。
ブラウザ枠いっぱいいっぱいが100%で間違いありません。しかし #main は margin-left を 150px 指定しているでしょ?だから表示するのに『ブラウザの幅 + 150px 』必要なんです。不思議な事などカケラもありゃしません。

追記2
ところで記述する文書型に何故 xhtml1.1 を採用されたのでしょう?
失礼ですが書かれたソースから判断するに、xhtml の正しい記述の方法を全く解ってらっしゃらないですよね?名前空間の宣言も 言語の指定もありませんし、空要素も一切閉じられていません。
xhtml は html に比べて記述のルールが厳格にチェックされます。正確な仕様をご存知でないのなら、無難に html4 の Transitional あたりで記述することをお勧めします。

投稿日時 - 2010-03-27 02:50:44

お礼

お返事ありがとうございます。

>> 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さんの書き込みによって、今まで気付きもしなかったところがはっきりと分かって大変満足しています。本当にありがとうございました。

投稿日時 - 2010-03-27 23:42:24

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

こんにちわ まだ勉強中の身です。

この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;
}

投稿日時 - 2010-03-26 14:34:47

お礼

お返事ありがとうございます。

私もCSSはまだ始めたばかりで、試行錯誤しながら勉強中です。

Firefox ではブラウザの横スクロールが出ちゃいます;こちらの確認環境IE6ではスクロールはでません。なので、IE6では#mainのmargin-right: -150px;が効いてる感じですが、Firefox の方がウェブ標準に近い実装ですから、多分この書き方ではスクロールされることが正しいんでしょうね。

そもそも、なぜスクロールされるかが分かっていません。#mainではwidth: 100%; としていますが、普通の感覚だとブラウザ枠いっぱいいぱいが100%ですよね^^ブラウザを突っ切って表示される理由が分かりません。おそらくこの理由が解決されれば、質問している内容が解決されるのではと思っています。

ちなみに、教えていただいた方法でも解決されませんでした;

投稿日時 - 2010-03-26 17:42:43

あなたにオススメの質問