質問: 「HTML&CSSとWEBデザインが1冊で身につく本」という 参考書を見ながら、webサイト制作に挑戦しております。 ### 現状 この本では、body部分にidを設定し、css側のbackground-imageで背景画像を表示させています。 いくつか制作パターンがあり、 1. 全画面を背景にする(フルスクリーン) 2. シングルカラムで上部だけ背景にする(マージンはcssで調整) などなどです。 ### 起きていたこと bodyに背景を設定しているからだと思うのですが、マウスを下にスライドすると MV以下のコンテンツ部分がMVにかぶさる現象が起きました。 ※bodyに背景(MV)が入っているため、コンテンツとbodyのcssの記述がわからなかった。 ``` About Privacy Contact ``` ### 自分で解決したこと 1. css側で「background-size:contain;」としたところ、 上記の問題点は解決できました。MVはレスポンシブにも対応できています。 2. マージンは、要素と要素の距離を調整してくれると解釈しており、 マージンの単位をpxから%に変えたところ解決。 ``` /* ----MV----*/ #index { background-image: url(/img/bg-index2.png); background-repeat: no-repeat; background-position: center top; /*background-attachment: fixed;*/ background-size:contain; /* 縦横比を保持したまま、表示領域に収める*/ } /* ----コンテンツ(MAP、サイドナビ)を中央に揃える---- */ .content { width: 960px; margin: 20% auto; } ``` ### 新たな問題 1. MVは解決したのですが、コンテンツ(MV以下部分)をchromeの開発環境(F12)を使い レスポンシブを選択。画面を大きくしたり小さくしたりしてみました。 最小サイズにしたところ、MVとコンテンツの間のマージンが広くなってしまいます。 iPhone6/7/8は問題なく見れております。 2. footerがコンテンツ上に表示されてしまう ``` (C)2018 abc. ``` ``` /* ----ここからフッター---- */ footer { text-align: center; color: #ffffff; padding: 20px 0; background-color: #767671; } footer small { font-size: 12px; } /* ----ここまでフッター---- */ ``` ### 解決したいことと質問 1. 上記レスポンシブのマージン対策をどのようにすべきでしょうか 2. 制作、レスポンシブ初挑戦ですので、コメントが多く入っており見苦しいかもしれませんが、 この記述が違う。などございましたらご指摘いただけますでしょうか。 ※作っているのはコンテンツ部分が2カラム。左カラムにはGoogleMap。右はナビになります。 どうぞよろしくお願いいたします。 ``` あああああ About Privacy Contact MAP テキストテキスト テキスト エリア エリア エリア エリア エリア テキスト テキスト テキスト テキスト ``` ``` @charset "utf-8"; body { margin: 0; padding: 0; background-color: #ffffff; color: #333333; font-size: 15px; line-height: 2; } /* ----ここからデフォルト解除---- */ p, h1, h2, h3, h4, h5, h6 { margin-top: 0; } img { vertical-align: bottom; } ul { margin: 0; padding: 0; } /* ----ここまでデフォルト解除---- */ /* ----aタグ---- */ a { color: #3583aa; text-decoration: none; } a:visited { color: #788d98; } a:hover { text-decoration: underline; } header { width: 960px; height: 100px; margin: 0 auto; } /* ----ここからグローバルナビ---- */ .global-nav { float: right; margin-top: 30px; } .global-nav li { float: left; margin: 0 20px; font-size: 20px; list-style: none; font-family: 'Bitter', serif; } .global-nav li a { color: #ffffff; } .global-nav li a:hover { border-bottom: 2px solid #ffffff; padding-bottom: 3px; text-decoration: none; } /* ----ここまでグローバルナビ---- */ /* ----MV----*/ #index { background-image: url(/img/bg-index2.png); background-repeat: no-repeat; background-position: center top; /* background-attachment: fixed;*/ background-size:contain; /* 縦横比を保持したまま、表示領域に収める*/ } /* ----コンテンツエリアの背景を白くする---- */ #wrap { clear: both; floatプロパティ左右の回り込み解除 background-color: #ffffff; } /* ----コンテンツ(MAP、サイドナビ)を中央に揃える---- */ .content { width: 960px; margin: 20% auto; } /* ----ここからフッター---- */ footer { text-align: center; color: #ffffff; padding: 20px 0; background-color: #767671; } footer small { font-size: 12px; } /* ----ここまでフッター---- */ /* ----フォント---- */ h1 { font-family: 'Bitter', serif; font-size: 36px; border-bottom: 1px solid #cccccc; } h2 { font-family: 'Bitter', serif; font-size: 24px; } /* ----左カラムMAP---- */ .main { width: 700px; /* margin: 100px 10px;*/ float: left; } /* ----サイドバー---- */ .sidebar { width: 200px; margin: 0 10px 0 30px; float: right; font-family: 'Bitter', serif; } .sidebar h2 { margin-bottom: 10px; } .sidebar ul { font-size: 16px; margin-left: 20px; } .sidebar ul a { color: #333333; } /* ----ここからSP---- */ @media screen and (max-width:600px) { body { font-size: 3.5vw; } h1 { font-size: 7.2vw; } h2 { font-size: 6vw; } header { width: auto; margin: 0 5%; } .gloval-nav { float: none; margin-top: 40px; text-align: center; } .gloval-nav li { display: inline; float: none; margin: 0 8px; } #wrap { margin-top: 48px; padding: 35px 0 0; } .content { width: 100%; } .main { float: none; width: auto; margin: 0 5%; } .sidebar { width: auto; float: none; margin: 0; padding: 30px 10% 10px; } } ```
回答: > > footerがコンテンツ上に表示されてしまう > > > こちらは、 `` で指定されている `clearfix` のCSSが記述されていないのが原因です。CSSに下記の記述を追加してください。 ``` .clearfix::after { content:""; display:block; clear:both; } ``` なおCSSの中で `#wrap` に `clear:both;` が指定されてますが、これだと `#wrap` より前に設定されたfloatの解除にしかならないため、`#wrap`の子要素のfloat解除の効果はありません。 本を見ながら勉強中とのことですので、再度floatとfloat解除の仕組みを書籍で復習された方が良いと思います。 > > 最小サイズにしたところ、MVとコンテンツの間のマージンが広くなってしまいます。 > > > こちらは実際にどのように表示されているのか分からないので何とも言えませんが、 20%の上マージンでは広すぎる、ということであればメディアクエリで条件分岐して もう少し小さいマージンを上書きすればよいのではないでしょうか?