【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を使っている場合や複数のブラウザで確認している場合はそれぞれで設定を行なってください。

Google Search Consoleでページが検索エンジンに登録されているか確認しよう

Googleの検索結果に自身のサイトのページが表示されるためには、まず検索エンジンにそのページが登録されている必要があります。 Google Search Consoleを使えば Googleの検索エンジンに登録されているか確認する事が出来ます。 Google Search ConsoleでURL検査 Google Search Console にログインします。上部にある検索欄に確認したいページのURLを入力してみましょう。 Googleに登録されている場合既に登録済みであれば「 URLはGoogleに登録されています」と表示されます。 Googleに登録されていない場合まだ登録されていない時は「 URLがGoogleに登録されていません」と表示されます。検索エンジンは定期的にサイトを巡回して登録作業を行いますが、出来たばかりのページなどはまだ登録されていない場合があります。このような時は「インデックス登録をリクエスト」をクリックすると優先的に登録作業を行ってもらう事が出来ます。

Bloggerでページを作成しよう

Bloggerには投稿とは別にページという機能があります。ページの機能をうまく活用して分かりやすいサイトを作りましょう。ここでは Bogger でページを作る方法を解説します。ページとはページとは投稿と同じように文章や画像などで構成された記事を作って公開する仕組みです。投稿はラベルで分類分けされたり日付でアーカイブされる機能があります。ページにはそれがありません。代わりに全ての投稿の上部または横側にページのリンクを表示させる事が出来ます。ページは「概要」や「プライバシーポリシー」などのような、どの投稿からもすぐにアクセスできるようにしておきたい情報を作る場合に便利な機能です。新しいページを作成しよう右側のメニューから「ページ」を選択します。「新しいページ」ボタンをクリックすると編集画面へと移ります。ページタイトルに注意！投稿ではパーマリンクという機能からページのURLを後から変更する事ができますが、ページではURLを変更する手段がありません。 URLはタイトルを元に自動で作成される仕組みですが、タイトルが日本語の場合<blog_page_xx.html>のようなページの内容とは関係ないものが付けられてしまいます。先ずはページ内容を表す英語でタイトルを付けるのが良さそうです。一度公開してURLが確定したら、その後でタイトルを日本語に編集してもURLは変わりません。少し面倒ですがこのような手順なら思い通りのページを作れそうです。本文の作成や公開手順本文の作り方は投稿の場合と同じです。見出しを付けたり画像を入れたりリンクを貼ったりがページでも同じ操作で行えます。下書きの保存や公開の流れも投稿と同じです。ページへのリンクを表示しよう投稿の場合は公開するとトップページ（ホーム）に概要が表示されますが、ページの場合は公開しただけではどこからもリンクされておらず作ったページにたどり着く手段がありません。トップページや各投稿からページへアクセスする為のリンクを表示させる設定を行ないましょう。右側のメニューから「レイアウト」を選択します。「ページリンク」ガジェットを見つけましょう。 ※使用して...

Ararami

このブログを検索