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

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

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

Google Search Consoleにサイトマップを登録しよう

Google Search Consoleにサイトマップを登録する事で自身のサイトを検索エンジンに見つけてもらう事が出来ます。ここでは Google Search Consoleにサイトマップを登録する方法について解説します。サイトマップとはサイトマップとはサイトを構成する各ページのURLや最終更新日などをリストアップしたものです。検索エンジンから扱いやすいようにXMLファイルで記述するXMLサイトマップ(sitemap.xml)という形式が多く使われています。検索エンジンはこのファイルを見て新たに作られたページや更新されたページを見つけて検索ランキングに反映させていきます。サイトマップがあれば更新情報をいち早く検索エンジンに伝える事ができます。 Search Consoleへサイトマップを登録 sitemap.xmlの作成 Search Consoleへ登録する為にはまず sitemap.xml が必要なわけですが、Bloggerではこの sitemap.xml を自動で生成してくれています。生成されるサイトマップは以下のようなURLになります。 https://[ブログのアドレス]/sitemap.xml このブログの例） https://ararami.blogspot.com/sitemap.xml Search Consoleへ登録 Google Search Console へログインします。「サイトマップ」を選択して「新しいサイトマップの追加」の欄に sitemap.xml と入力して「送信」ボタンをクリックします。送信がうまくいくと「送信されたサイトマップ」に追加されステータスに「成功しました」と表示されます。

Ararami

このブログを検索