いつもお世話になります。
●確認ブラウザIE6、IE7、FF、 Mac Safari FF
左側幅可変のリキッドレイアウトの中で、
div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で
#footerはページ下部に固定されている、添付図の状態にしたい。
●できてること:
IE7、FFにおけるカラム高さの統一、固定フッタ
●ここができない:
1.IE6にてboxBとCの高さが揃わない(Cが足らない)
2.#wrapと#footerにすきまが空く(boxBとCの背景色がfooterの上まで来てほしいのです)(全部のブラウザにて)

★CSS
/*リキッドレイアウト部分*/
* {
margin:0;
padding:0;
}


body {
text-align:center;
}

#container {
width:96%;
margin-left:auto;
margin-right:auto;
text-align:left;
}


#boxA {
background:#ffc;
}

#boxB {
background:#fcc;
width:100%;
float:left;
margin-right:-200px;

}

#boxB p {
margin-right:200px;
}

#boxC {
background:#ccf;
width:200px;
float:left;

}

#boxD {
background:#cfc;
width:100%;
float:left;
}


/*100%固定フッタのためのCSS*/
*{
margin:0;
padding:0;
}

html,body{
height:100%;
background-color: #000000;
color: #000000;
}
html{
overflow-y:scroll;
}
#container {
width: 100%;
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
div#footer{
position:fixed;
bottom:0;
left:0;
text-align:center;
width:100%;
}

/* * * IE6 * * * */
* html,
* html body{
overflow-y:hidden;
}
* html div#maincontents{
height:100%;
overflow-y:scroll;
}
* html div#footer{
position:absolute;
}


/* カラム高さが違うものを揃える */

#wrap {
overflow:hidden;
}

#boxB,#boxC {
padding-bottom: 32768px;
margin-bottom: -32768px;
}

「カラム高さ揃え+固定フッター」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (2件)

多分、添付のレイアウト(フッター固定、2カラムの内メインはリキッド、2カラムの描画領域は常にフッターの上端まで)を、boxBとboxC両方の描画領域を内容量を問わず「実際に」footerの上端まで常にぴったりにする、というのはちょっと難しいのでは…と思います。



代替案としていかにもboxBとboxCがfooterの上端まで描画されている様な「見た目だけ」なら結構簡単にできるのですが。

質問者様の実際の(X)HTMLのソースがありませんでしたので、過去の質問から、XHTML 1.0 Transitional(XML宣言なし)/Shift_JISと仮定しました。
以下はその仮定で検証したサンプルです。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all" />
</head>

<body>

<div id="container">
<div id="header">
ヘッダー(高さ任意)
</div>

<div id="wrap">
<div id="boxB">
ボックスB最初<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB最後
</div>

<div id="boxC">
ボックスC最初<br />ボックスC<br />ボックスC<br />ボックスC<br />ボックスC<br />ボックスC<br />ボックスC最後
</div>
</div>

<div id="footer">
フッター(高さ固定)
</div>
</div>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
* {
margin:0;
padding:0;
}
html , body {
height: 100%;
background: #000;
color: #000;
}
body {
text-align: center;
}
#header {
background: #ffc;
}
#container {
position: relative;
width: 96%;
height: auto !important;
height: 100%;
min-width: 600px;
min-height: 100%;
margin: 0 auto;
text-align: left;
background: url(../images/boxc_back.gif) right top repeat-y #fcc;
}
#wrap {
zoom: 100%;
width: 100%;
padding-bottom: 3em;
}
#wrap:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 3em;
text-align: center;
background: #cfc;
}
#boxB {
float: left;
width: 100%;
margin-right: -200px;
}
#boxC {
float: left;
width: 200px;
}
----------------------------------------------------------------------
IE6/IE7、Firefox2/3、Safari3での表示結果を確認していますが、ほぼご希望通りになっているかと思います。

boxBとboxCには背景は指定せず、親の親であるcontainerの背景画像として指定する事で代用します。
上記の#containerのbackgroundで指定している、boxc_back.gifという画像は、カラム幅が200pxで固定されているboxCの背景です。今回のソースではboxCの背景は#ccfですので、W200px×H任意の領域を#ccfで塗った画像を用意します(これが実際には何らかのシームレスなテクスチャだとしても同じ要領です)。
これを、#containerのbackgroundで”右端から縦方向にのみリピート”させる事でいかにもboxCの領域にだけ#ccfの背景色が塗られている様な状態になります。一方、背景色としてboxBの背景にしたい#fccを併せて指定する事で、右から200pxより残りの領域に関しては#fccが描画されるので、結果としてこちらもboxBの領域にだけ#fccが適用されている状態になります。

また、footerの高さは固定とします。今は仮に3emとしてありますが、実際の内容量に合わせて適当な値をemで指定して下さい。
何故固定するかですが、containerの子要素として下端にabsoluteで固定されたfooterがある為、footerの前にくるboxBとboxCの内容量がウィンドウにスクロールが発生する様なボリュームになった際はそのままだと重なってしまいます。それを回避するには、#containerに”footerの高さと同じ値の”padding-bottomを指定する事で、常にfooterの高さ分の余白を確保できて実際の内容(テキストなど)は重ならない様にできるからです。

それから、#footerにclearプロパティを指定してfloatしているboxBとboxCをクリアするかわりに、boxBとboxCの直近の親である#wrapに所謂clearfixの指定を盛り込む事でクリアしてしまいます。

あと、これはオマケとして付け加えましたが、ウィンドウの幅を極端に縮めて左右の描画領域が200pxより小さくなってしまうと(まあ実際にはそこまで縮めて見る閲覧者がいるとは思えませんが)、リキッドでマイナス・マージンを指定されているboxBがboxCの領域に重なってしまいます。なので、できればそれを回避する為に、リキッド・レイアウトでも最小の幅は指定しておいた方が良いと思います。
この場合、#containerにmin-widthで200px以上の値を指定しておく事で実現できます。今回は仮に600pxとしてありますので、ウィンドウの幅が縮められてもboxBはウィンドウのサイズにかかわらず左右400px以上の描画領域が確保される事になります。
※ただし、このmin-widthはIE6では実装されていません。expressionを使う事で擬似的にmin-widthを実装できるのですが、表示の際にブラウザが固まってしまったりする事もあるのでちょっと注意が必要です。

いかがでしょうか?ご希望に添わなかったり不具合がある様でしたら補足して下さい。
    • good
    • 0
この回答へのお礼

>abrilさん
いつもありがとうございます♪
HTMLを質問に盛り込めなくて(字数制限で)すみませんでした。
カンペキです!
こうしたかったんです。
そうか、containerに背景色を指定して画像と併用するということに
思い至りませんでした!
containerにもmin-width、必要ですね。

それと質問なのですが、
Footerにクリアプロパティを指定しないで#wrapにクリアフィクスを
指定するのはどういう理由からなんでしょう…?
お時間のある時にでも宜しくお願いしますm(_ _)m

お礼日時:2009/05/28 11:42

> Footerにクリアプロパティを指定しないで#wrapにクリアフィクスを指定するのはどういう理由からなんでしょう…?



サンプルの構造の場合、仮に#wrapにclearixを用いないで#footerにclearプロパティを入れると不具合が出ます。
具体的には、boxBとboxCの内容が多くなってウィンドウにスクロールバーが発生すると、footerの下に丁度3em分と思われる空きが出来てしまう(html、bodyの背景色である黒が見える)のです(例によってIE6だけ挙動が違って出ませんが)。
何でそうなるのかは…すいませんちょっと面倒臭いので説明は省略させて下さい。
    • good
    • 0
この回答へのお礼

なるほど、私のwrapとfooterの間が空いてしまうな~と思っていたのは
そのための不具合だったのですね!
すっきりしました!
本当にどうもありがとうございました。

お礼日時:2009/05/28 12:26

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q美人に恐縮する男性

男性が言う、美人は苦手という言葉がイマイチ理解できません。

なんだかんだ美人が大好きなのになぜ美人に恐縮してしまうのでしょうか?

職場に新入りが入ってきました。

1人は清楚な美人系のしっかりした子。
もう1人は不思議ちゃんで天然なお世話にも美人ではない子。

黒髪清楚美人さんは誰が見ても美人という感じで雰囲気は大政絢や北川景子系統で、受け答えがしっかりしていて大人しい控えめな人です。

もう1人は例える芸能人はみつかりませんが、明るめショートのウエーブパーマで、性格は個性的な天然さんで面白い人です。

従業員の対応が美人さんより不思議さんに対するほうが、構ってるというか興味があるのかな?っという感じでした。

確かに美人さんは放置していても平気だろうなと思うくらいしっかりしています。
不思議さんは目を離すとやや危なっかしいです。

しかし、不思議さんには笑あったり小馬鹿にしたりするのに
美人さん相手には緊張しているというかあまり目を合わせていない感じです。

美人さんも不思議さんも両方愛想はいいです。
しかし不思議さんはなんか見ていて危なっかしいしたまにずれた発言も多く疲れます。

口数が少なめな大人しい美人はとっつきにくいですか?
年齢は美人さんが20で不思議さんは30です。

私の今までの男性は美人にはえこひいきが多く、美人にがつがつ絡みにいく上司ばっかりでしたので新鮮です。

それか、美人系はタイプではないんでしょうかね?

美人より少し崩れてるほうが親しみやすいという男性の心理を教えてください。
でも、性格もいい美人なら美人が最強じゃないですか?

男性が言う、美人は苦手という言葉がイマイチ理解できません。

なんだかんだ美人が大好きなのになぜ美人に恐縮してしまうのでしょうか?

職場に新入りが入ってきました。

1人は清楚な美人系のしっかりした子。
もう1人は不思議ちゃんで天然なお世話にも美人ではない子。

黒髪清楚美人さんは誰が見ても美人という感じで雰囲気は大政絢や北川景子系統で、受け答えがしっかりしていて大人しい控えめな人です。

もう1人は例える芸能人はみつかりませんが、明るめショートのウエーブパーマで、性格は個...続きを読む

Aベストアンサー

>口数が少なめな大人しい美人はとっつきにくいですか?

はい。

美人さんはどうしても男性からちやほやされやすく、
プライドも高いですから、
しょうむない男だと下手に近寄ると
どうせ美人だから近寄ってきているだけでしょとか
そういうけんもほろろな対応をされるかもしれない
という理由から、本人の性情や性格を
ある程度把握してからでないとからめない。
という自己防衛本能に基づくものです。

対応の差は自分のことを自覚している男性か
そうでないか。という違いに相違ありません。

Q*{margin:0px;padding:0px;}というCSSのタグの意味について教えてください。

<style type="text/css">
*{margin:0px;padding:0px;}
</style>

ホームページで上記のようなソースを見かけたのですが、これはどういう意味なのでしょうか?
試しに新規ページにこのコードを記述してbody内にtableを作ってみたのですが、tableに記述したcellpaddingが
数値をいろいろ変えても動作しません。
この*{margin:0px;padding:0px;}という記述をすることによる意図は何なのでしょうか?
宜しくお願いします。

Aベストアンサー

*はトランプのジョーカーみたいなものです。何にでも当てはまりますカードと思うといいです。

margin:0px;padding:0px;
これはマージンやパッディングを0にするってことです
何もしないで文字を入れると、ブラウザによってはぴったり上にくっつかないとか、くっつくとかいろいろ初期値が違うので、どのブラウザでも同じようにしたいときに、一律これだけと指示することが多いです。

●cellpaddingが聞かない理由と聞かせる方法
*はなんでもですが、より詳しい記述があれば、そちらを優先させるというルールがあります。詳細度といいます。同じ詳細度なら、後から書いた方が優先されます。

*(何でも)より見出しや段落、テーブルと具体的な場所に対する指示の方が優先されます。
そして外部よりヘッダ。ヘッダよりインラインの方が優先度が高くなります。
そして、タグによってはどこに記述しても*より弱いタグもあります。
今回のcellpaddingやfontがそれにあたります。誤解を恐れず大雑把に説明するとそんな感じになります。

cellpaddingを使う代わりに同じ効果ならcellpaddingを記載した場所に「style="padding:10px;"」と入れてください。インラインといいます。このタグを閉じる場所まで有効です。
もし、そのページ全体の表に入れたいなら、ヘッダ部分(<head></head>の間)に「<style>td{padding:10px;}</style>」と入れてください。tdの当てはまる場所すべてに効きます。サイト全体に聞かせたいなら外部にします。cssでは単位は0以外省略できません。

つまり外部に原則を記述、インラインに1回だけの例外のものを記述ってやり方もできるので、状況に応じて使い分けされるといいです。

*はトランプのジョーカーみたいなものです。何にでも当てはまりますカードと思うといいです。

margin:0px;padding:0px;
これはマージンやパッディングを0にするってことです
何もしないで文字を入れると、ブラウザによってはぴったり上にくっつかないとか、くっつくとかいろいろ初期値が違うので、どのブラウザでも同じようにしたいときに、一律これだけと指示することが多いです。

●cellpaddingが聞かない理由と聞かせる方法
*はなんでもですが、より詳しい記述があれば、そちらを優先させるというルー...続きを読む

Q美人の顔の欠点は「魅力」、不美人の顔の欠点は「欠点」

なぜ美人の顔の欠点は「魅力」になって、不美人の欠点は「欠点」なのでしょうか?

<しゃくれ>(美人)綾瀬はるか、桐谷美玲(不美人)アジアン隅田、たんぽぽ白鳥

たらこ唇でも言えると思います。石原さとみなど美人がたらこ唇だと『セクシー』ですけど不美人がたらこ唇だとブサイクな気がします

「美人は七難を隠す」と思います

Aベストアンサー

要は、顔パーツのバランスの問題じゃないですか?
ふくわらいでも、美人(平安美人みたいになりますけど)が作れますし、もちろん不美人にもなります。
並べるパーツは一緒なんですけどね。

Q*{margin:0px;padding:0px;}

*{margin:0px;padding:0px;}

という風に、スタイルシートで設定をしているのですが、
テーブルに余白を付けようとしても、できません。
どうすればいいのでしょうか?

Aベストアンサー

*{margin:0px;padding:0px;}を利用しても良いと思いますが(賛否両論)
HTML,CSSを理解しない内は利用しない方が勉強になり、
正しいマークアップも直感で理解できますので、
一旦デフォルトで表示してみて、お好みで個別指定する方が良いかも知れません。
例えば、
html,body{margin:0px;padding:0px;}
を書いてから、後付けでその都度追加するとか。
html,body,h1,h2,ul,ol,li,dl,dt,dd{margin:0px;padding:0px;}
慣れてから使う方が良いかも。
デフォルトのままで、レイアウトやブラウザ間の差異などが困るのなら指定すれば良い。
--------------------------------

テーブルの外側の指定なのか、
内側の指定なのかはわかりませんが、
外側でfloatで意図通りに解釈されていないのでは?
その場合には、色々手法がありますが、tableをdivで囲うのが簡単。

<div style="width:280px; border:red solid;">
<table border="1" style="margin: 20px 0 10px 30px;">
<tr><td>無指定</td><td>無指定</td></tr>
<tr><td style="padding:1em 2em;">
padding指定</td><td>無指定</td></tr>
<tr><td style="line-height:3;">
line-height指定</td><td>無指定</td></tr>
</table>
</div>

幅の解釈も標準か否かで違う。

*{margin:0px;padding:0px;}を利用しても良いと思いますが(賛否両論)
HTML,CSSを理解しない内は利用しない方が勉強になり、
正しいマークアップも直感で理解できますので、
一旦デフォルトで表示してみて、お好みで個別指定する方が良いかも知れません。
例えば、
html,body{margin:0px;padding:0px;}
を書いてから、後付けでその都度追加するとか。
html,body,h1,h2,ul,ol,li,dl,dt,dd{margin:0px;padding:0px;}
慣れてから使う方が良いかも。
デフォルトのままで、レイアウトやブラウザ間の差異などが困るのな...続きを読む

Q美人が損する事なんかあるのですか?

美人(男ならカッコいい)達が普通に生活してて損することありますか?

よく、美人は「彼氏がいると思われて告白されない」とか聞きますが
それは待ってるだけだからとおもいます。
不細工なんて、行動してもしなくても恋人作るの大変ですよね?

その他、自分が美人で本当に嫌とか損したという人いるのでしょうか?

頭がよければ、美人東大生。先生ならば美人女教師。たとえ漁師でも
美人ならば、美人漁師。
これでいて、美人が損なんかありえるのでしょうか?

半分愚痴ですいません。

Aベストアンサー

美人であることで得る結果は当然あるとはおもいますが、必ずうらやむことばかりでもないですよ。
良くも悪くもひとから必要以上に注目されてるので、ひとたび事が起きれば非難が集中しやすい立場にいるわけですし、それなりの気苦労はしてると思いますよ。
実際損をしているとはいえないかもしれませんが、得してると思われている分だけずるいような先入観をもたれることは多いかもしれませんね。

Qcssでhtml{width:100%;}の意味がわかりません

いつもお世話になっております。
早速質問です。
あるサイトのCSSを拝見すると、以下の様な記述がありました。
html{
width : 100% ;
height : 100% ;
}

body{
width : 100% ;
height : 100% ;
}
BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。
上記のCSSの意味を教えてください。
宜しくお願いします。

Aベストアンサー

私もNo.2-3様のご指摘の通りだと思いますが。
参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは…具体的なソースを見ていないので、明言は避けますが。自分が制作する上ではそういう指定をする必要性に迫られた事はないですね、今のところ。
そもそも、"width: 100%;"というのは「直近の親要素の幅に対する100%」です。html要素は「ルート要素(最大の親要素)」であり、それより上位の親要素は存在しないので、ディフォルトの幅はウィンドウサイズ全体と考えて良いのですから、そこに100%を指定してもただ無意味なだけだと思いますが。

ちょっと気になる発言があったので以下はそれについての蛇足ですが…
htmlやbody要素に何も幅が指定されていなくても、bodyの直接の子要素に位置するコンテナブロックであればディフォルトもしくはその要素へ直接"width: 100%;"を指定してもその横幅は画面サイズ一杯に広がりますよ。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<?xml version="1.0" encoding="Shift_JIS"?>
<!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>
<link href="css/sample.css" type="text/css" rel="stylesheet" media="all" />
<title>サンプル</title>
</head>
<body>
<div id="hoge1">
幅無指定のボックス
</div>
<div id="hoge2">
幅100%で指定のボックス
</div>
</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
body {
margin: 0;
padding: 0;
background: #fff;
}
div#hoge1 {
background: #fcc;
}
div#hoge2 {
width: 100%;
background: #ccf;
}
----------------------------------------------------------------------
上記では、hoge1(widthの値はディフォルト)もhoge2(widthの値は100%)でも結果は同じでいずれも「ウィンドウサイズ一杯」の幅でレンダリングされます。

私もNo.2-3様のご指摘の通りだと思いますが。
参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは…具体的なソースを見ていないので、明言は避けますが。自分が制作する上ではそういう指定をする必要性に迫られた事はないですね、今のところ。
そもそも、"width: 100%;"というのは「直近の親要素の幅に対する100%」です。html要素は「ルート要素(最大の親要素)」であり、それより上位の親要素は存在しないので、ディフォルト...続きを読む

Q美人過ぎなかった都議

東京都議会の女性議員が議会質問中にセクハラを受けたとしてニュースになってますが、この人は色々な職業の変遷を経て都議になってますが、以前から「美人過ぎるナニナニ」と、しきりと「美人過ぎる」称号が振られてました。
そこでニュースの写真を見てみましたが、そんなに美人なんですかね?
-----------------
■ 女性都議、セクハラやじ処分要求 批判相次ぐ
http://www.47news.jp/CN/201406/CN2014062001001554.html
-----------------
ちなみに手前の女性です。↑後ろの女性は誰か分かりませんが、誰なんです?
ニュース等の動画で見ると雰囲気的に美人過ぎさが目立つ感も無きにしも非ずですが、「雰囲気美人」なのか、「マジで美人」なのか、どんなもんなんでしよう。

ということで、質問は、
1 この人は本当に「美人過ぎる」のか?
2 後ろの女性は誰なのか。美人過ぎるのではないのか?
3 「雰囲気美人」なのか、「マジで美人」なのか。
4 雰囲気美人とマジの美人とどっちが好みですか。
ちなみに私はマジの美人が好みです。
ニュースの動画では、ブラしてないような感じでした。どう思いますか。

東京都議会の女性議員が議会質問中にセクハラを受けたとしてニュースになってますが、この人は色々な職業の変遷を経て都議になってますが、以前から「美人過ぎるナニナニ」と、しきりと「美人過ぎる」称号が振られてました。
そこでニュースの写真を見てみましたが、そんなに美人なんですかね?
-----------------
■ 女性都議、セクハラやじ処分要求 批判相次ぐ
http://www.47news.jp/CN/201406/CN2014062001001554.html
-----------------
ちなみに手前の女性です。↑後ろの女性は誰か分かりませんが、誰なんです...続きを読む

Aベストアンサー

 地域によって美人の基準が違うからでしょうが、どこにでもいる顔の女性にしか見えませんね。マスコミが何でも美人だとか、貴公子だとか、そういう捏造記事を書いているだけでしょう。

 ニュースを見ましたが、当て付けの中傷誹謗合戦の標的にされただけでしょう。美人と呼べば、角が立たないという読みがあるのでしょう。女性議員をブスと呼んだら、タダでは済みませんからね。プライドが高い人が多いですから。

 なお、一般に美人と呼ばれている女性は、テレビ映りが良い女性であって、美人であっても、テレビに映すと印象が悪い人もいます。テレビに映した時の印象が良ければ、美人でなくても美人扱いになるということでしょう。

 また、男性の関心を呼ぶ顔が美人とは限りません。どう見ても、美人ではないのに、男性の関心が大きい女性もいます。肉体美人とか、そういう人もいます。

Qcssで body{margin: 0 0 0 0;}と記述するとそれ以下のタグでは・・

お世話になります。
body { margin: 0 0 0 0;}
cssファイルに上記のように記述されているとしたら
bodyのなかに書いてあるpタグにも適用されるのでしょうか?

教えてください。お願いします。

Aベストアンサー

★『BODY』タグの属性にある『LEFTMARGIN』や『TOPMARGIN』がスタイルシートの
 『margin:0 0 0 0;』で変えられるだけです。他のタグに影響はありません。

●スタイルシート部
body{ margin: 0px; }
#Kind p, #Kind h1{ margin: 0px; }

●HTMLソース
<BODY>

<H1>サンプル1</H1>
<P>サンプル2</P>

<DIV ID=Kind>
<H1>サンプル3</H1>
<P>サンプル4</P>
</DIV>

</BODY>

説明:
・上記の DIV で囲まれた H1、P はマージンが 0px になりますが、それ以外の H1、P のタグは
 マージンが 0px になりません。使い分けるには、上記のように ID を使うか、CLASS の指定を
 すれば出来ます。
・サンプル1→マージン 0px にならない(既定値)
・サンプル2→マージン 0px にならない(既定値)
・サンプル3→マージン 0px になる(kind)
・サンプル4→マージン 0px になる(kind)
・以上。おわり。

★『BODY』タグの属性にある『LEFTMARGIN』や『TOPMARGIN』がスタイルシートの
 『margin:0 0 0 0;』で変えられるだけです。他のタグに影響はありません。

●スタイルシート部
body{ margin: 0px; }
#Kind p, #Kind h1{ margin: 0px; }

●HTMLソース
<BODY>

<H1>サンプル1</H1>
<P>サンプル2</P>

<DIV ID=Kind>
<H1>サンプル3</H1>
<P>サンプル4</P>
</DIV>

</BODY>

説明:
・上記の DIV で囲まれた H1、P はマージンが 0px になりますが、それ以外の H1、P のタグは
 マージンが 0px ...続きを読む

Q何故、美人の方が少ないのでしょうか?

何故、美人の方が美人じゃない人より少ないのでしょうか?
美人の方が多ければ、もっと楽しいし、相手見つけるのも楽なのに!
美人の方が多い状況はつくれないのでしょうか?

Aベストアンサー

みんな美人は 芸能界へ拉致誘拐されたんです!!

Qbackground-color: #ddd;の意味がわかりません

あるサイトの「body」の背景に以下のようなCSSがありました。

body {
background-color: #ddd;←これ何の意味?
color: #333;
background: url(●●/●●Bg.gif) repeat;
}

『background-color: #ddd;』の意味が
ネットで探してもそれらしいものが見つかりませんでした。

なにか、制作した人の独自のものなんでしょうか?

わかる方要らしたら教えていただけないでしょうか。

Aベストアンサー

ちゃんとCSSの規格書に書いてある色の指定方法ですよ。勝手に独自
の表現をしても、うんともすんともいいません。

#ddd は、#dddddd やrgb(221,221,221) と同じ明るめの灰色です。
同様に#333 はかなり濃い灰色ですね。

参考URL:http://www.w3.org/TR/CSS21/syndata.html#color-units


人気Q&Aランキング

おすすめ情報