内包されたDIVにmarginを設定すると親要素にも同じマージンが設定されることがある【CSS】
1年以上前の記事です。内容が古い可能性があります。
これはわからんわ。
生徒さんの一人が陥った罠。
先生も知りませんでしたごめんなさい。
□ 【CSS Tips】ネストされたボックス要素のmargin-topのブラウザ毎の解釈の違い－Margin Collapsing – Awaresoft
空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる。
具体的に説明していこうと思います。
まずは、以下のソースを御覧ください。
□ HTML
<div id=”header”> ヘッダー </div>
<div id=”content”> コンテンツ </div>
<div id=”footer”> フッター </div>
</div>
□ CSS
width: 500px;
margin: auto;
background-color: #CCC;
}
#header {
height: 100px;
background-color: #FCF;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}
□ プレビュー
ここで、CSSを以下のように書き足してみます。（書き足し部分は赤字）
width: 500px;
margin: auto;
background-color: #CCC;
}
#header {
height: 100px;
background-color: #FCF;
margin-top: 50px;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}
さて、これがどんなふうに表示されるかご想像ください。
2択です。
□ プレビュー1
□ プレビュー2
おそらく多くの人はプレビュー1が正解だと思うと思います。
margin-topの設定を入れているのがheaderですからね。
ただ、これの正解はプレビュー2になります。
理由は前述のブログ引用の通り空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる
という「仕様」だから。
では、プレビュー1のように表示させるにはどうしたらいいか。
賢明な方はheaderにmargin-topでなく、wrapperにpadding-topの設定をすればいいと気付きます。
ただ、ここはあえて現状のCSS及びHTMLに何か書き加えることでなんとかやっていこうと思います。
1. HTML上のwrapperに何か書き込む。
□ ソース
<div id=”header”> ヘッダー </div>
<div id=”content”> コンテンツ </div>
<div id=”footer”> フッター </div>
</div>
□ プレビュー
2. CSSでwrapperにboaderの設定をする。
□ ソース
width: 500px;
margin: auto;
background-color: #CCC;
border: 1px solid #999;
}
#header {
height: 100px;
background-color: #FCF;
margin-top: 50px;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}
□ プレビュー
CSSでwrapperにpaddingの設定をする。
□ ソース
width: 500px;
margin: auto;
background-color: #CCC;
padding: 1px;
}
#header {
height: 100px;
background-color: #FCF;
margin-top: 50px;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}
□ プレビュー 
と、どれも見た目がちょっとだけ変わっちゃうんですよね。
HTMLで完全な空白ブランクを入れちゃうというのもありますがいまいちだし。。
だもんで、最初に思いついたようにwrapperにpadding-topを設定するのがやっぱり一番でしょう。
□ ソース
width: 500px;
margin: auto;
background-color: #CCC;
padding-top: 50px;
}
#header {
height: 100px;
background-color: #FCF;
}
#content {
height: 200px;
background-color: #FFC;
}
#footer {
height: 100px;
background-color: #CFF;
}
□ プレビュー
CSSもまだまだ奥が深い。
これで、CSS3が使われ始めたら、またいろいろと覚えなければならないことが出てくるんでしょうねぇ。
アドセンス広告メイン
関連記事
-
-
鍵（ロック）掛けられても鍵（ロック）掛ける前にフォローしておけばツイートが見れる【ツイッター】
1年以上前の記事です。内容が古い可能性があります。ツイッター（Twitter）っ …
-
-
オートフィルとオートコレクトとオートコンプリート
1年以上前の記事です。内容が古い可能性があります。P検3級シリーズ。（というのが …
-
-
Facebookのプロフィールを検索エンジンにヒットさせない設定
1年以上前の記事です。内容が古い可能性があります。【 一部手順が変わっ …
-
-
殆どのスマホユーザーの個人情報はFacebookに握られている
そう、それがシャドープロファイルと言われているものです。
そして怖いのはこのシャドープロファイル、Facebookアカウントを作ったことのない人のものまで作られているとのことです。あるFacebookユーザーの連絡先にあなたの個人情報が書かれていたら注意。
その方がFacebookに連絡先へのアクセスを許可していたらあなたがFacebookをやっていなくてもアウトです。ではどうやったら防げるのか？
最近ではFacebookアプリがプリインストールされているスマホ（スマートフォン）も多いのでほぼ防ぐことは不可能でしょうね。つまり、
過去にFacebookのアカウントを作ったことがなく、Facebookを利用している人とアドレスなどの交換をしていないという場合のみ「あなたのシャドープロファイルは作られていません」
とのこと。
Facebookのアカウントを作ったことがない人は結構いるんじゃないかと思います。
ただ、Facebookを利用している人とアドレス交換をしていない人なんて殆どいないんじゃないでしょうか？
そもそも、その人がFacebookをやっているのかどうか調べてアドレス交換するなんてことできないでしょうし。。これから、こういった情報が一般的になってくると、自分のようにFacebookやってる感を前面に出している人なんかは逆に、嫌厭されてしまうような時代がきてしまうのかもしれません。
でもね。
結局は架空請求や先日被害にあった債権回収詐欺等、それを使う悪いやつがいなければ別に個人情報何ら問題ないんですよね。
だって、かつては電話帳（ハローページ）に普通に電話番号が載っていた時代があるんですから。
嫌な時代になっちゃいましたねぇ。。あとはFacebookの技術を信じて、そういった悪い輩に個人情報が流れないようにしてもらうしかないですね。
よく、「あとは神のみぞ知る」なんてこと言うことがありますが、Facebookもそういう意味では神の領域に入りつつあるのでしょうか？
人間が神の領域に足を踏み入れるとどうなってしまうのか？ 注目して行きましょう。
-
-
Windows XPのメンテナンス
1年以上前の記事です。内容が古い可能性があります。過去に「Mac OS Xのメン …
-
-
4月～6月の残業は損。「社会保険料」が高くなる可能性
1年以上前の記事です。内容が古い可能性があります。へぇぇ。こういうカラクリがあっ …
-
-
フォトショップが立ち上がらなくなったときの対処法
1年以上前の記事です。内容が古い可能性があります。最近、自宅でフォトショップを開 …
-
-
国立西洋美術館で「考える人」を見た【古希のお祝い #2】
1年以上前の記事です。内容が古い可能性があります。今までの流れはこちら&rarr …
-
-
イメージ広告も表示させた方が広告収益が上がる
1年以上前の記事です。内容が古い可能性があります。以前、Googleに勧められて …
-
-
「iOS5」にしたらフリック入力で「ああ」が入力しやすくなった【iPhone】
1年以上前の記事です。内容が古い可能性があります。iPhone 3GSながらも思 …
