【CSS】marginが親要素からはみ出して適用される？

スタイルシートでデザインを作り込んでいく時、思った通りに margin が効いてくれない事があります。

marginは 0px なはずなのに・・・

以下の例を見てください。

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
  <style type='text/css'><!--
body{
  background-color:#ffffff;
  margin: 0;
}
.div1{
  background-color:#ffff00;
  margin: 0px;
}
--></style>
</head>
<body>
  <div class='div1'>
    <h1>タイトル</h1>
    <p>テスト</p>
  </div>
</body>
</html>

<div>要素は背景色を黄色にしています。
<body>要素も<div>要素も margin は 0px に設定しているので、余白なく黄色い四角が表示されるように思いますが実際は隙間が空いてしまいます。

隙間の正体

この隙間は<h1>要素の margin です。
<h1>要素の margin が親要素である <div>要素を超えて適用されています。
このような現象は <div>要素の padding と border が共に 0px の場合に起こります。

margin には接する要素の margin を相殺するという仕様があります。
相殺されるケースは以下のような場合です。

親要素の margin-top と先頭の子要素の margin-top
親要素の margin-bottom と最後の子要素の margin-bottom
同階層の最初の要素の margin-bottom と次の要素の margin-top

相殺されると値の大きい方の margin だけが適用されます。

対処方法

親要素のスタイルシートに「overflow: hidden;」を追加します。
overflow はボックス内に要素が入らない場合の挙動を指定するものです。
hidden; ははみ出す部分は非表示にするという指定ですが、親要素の Width や Height が Auto (初期値) の場合はボックスサイズが変わるので問題ありません。

.div1{
  background-color:#ffff00;
  margin: 0px;
  overflow: hidden;
}

Bloggerの統計で自分がアクセスしたカウントを除外しよう

Bloggerには統計機能がありブログへのアクセス数などを確認できる機能があります。ですが、確認のために自分でサイトへアクセスするという事は多いと思います。そのアクセスが統計にカウントされると正確な値が分からなくなりますよね。ここでは Bloggerの統計で自分がアクセスしたカウントを除外する方法について解説します。自分のページビューを統計情報に含めない設定設定は「統計」→「概要」から行います。「自分のページビューの追跡を管理」をクリックします。「このブログの自分のビューを追跡しない」にチェックを入れましょう。この設定はブラウザ毎に行う必要があります。複数のPCを使っている場合や複数のブラウザで確認している場合はそれぞれで設定を行なってください。

Bloggerで欧州連合の法律に関する通知を確認しよう

Bloggerにログインすると「欧州連合の法律により、欧州連合からの訪問者には・・・」という通知が表示されてます。難しい言葉が並んでいますがちゃんと読んで確認しましょう。通知の内容について通知はこのように書かれています。ー引用ー欧州連合の法律により、欧州連合からの訪問者には、ブログで使用されている Cookie およびブログで収集されているデータに関する情報を提供する必要があります。また、これらの法律では多くの場合、同意を得ることが求められます。 Blogger や Google の特定の Cookie（Google アナリティクスや AdSense の Cookie、Google が収集するその他のデータを含む）が Google で使用されている旨の通知をブログに追加しました。あなたはこの通知が自分のブログで実際に動作し、表示されることを確認する責任を負うものとします。サードパーティの機能を追加するなどして他の Cookie を使用している場合、この通知は動作しない可能性があります。他のプロバイダの機能を追加している場合は、ユーザーから追加の情報を収集している可能性があります。この通知とお客様の責任については詳細をご覧ください。 WebサイトにはCookieという機能があり訪問者の情報を収集する事が出来ます。これによりどのページを何回見に来たかといったアクセス解析などが行えたりするわけです。 EUでは法律でデータ収集に関して同意を得ることが必要になりました。こんな風に言われるとどのように対応すればいいのか不安になりますが、これに関しては Bloggerが自動で対応してくれています。BloggerではEU圏からアクセスした訪問者の場合には同意を求める通知を表示してくれるようになっているようです。つまり「 Blogger側で対応しておいたのでその動作確認だけしてね」というお知らせになります。というわけで動作の確認をしたいのですが・・・確認の手段がありませんね。ヨーロッパ旅行に行くしかないんでしょうか・・・

Bloggerの記事にラベルを付けよう

Bloggerには記事を分類分けする為の「ラベル」という機能があります。同じラベルが付いた投稿だけを一覧表示する事が出来るので、関連する記事を見つけやすくなります。ここでは Bloggerで記事にラベルをつける方法について解説します。ラベルを付けると？記事にラベルと付けるとページの最後に付けたラベルが表示されるようになります。このラベルをクリックすると同じラベルが付けられた記事の一覧が表示される仕組みになっています。記事にラベルを付けてみようラベル付けは投稿の編集画面から行う事が出来ます。「投稿の設定」から「ラベル」を選びましょう。 ↓ 入力欄に任意の単語を書き込んで「完了」ボタンを押せば設定完了です。１つの記事に複数のラベルを付けたい場合は単語をカンマで区切って入力します。他の記事で既に使用しているラベルが入力欄の下に表示されています。同じラベルを付けたい場合、表示されているラベルをクリックする事でも入力欄に追加する事が出来ます。

Ararami

このブログを検索