Q&A
headerの中にfooterが入っているのですか？
前提・実現したいこと
制作課題として、簡単なパララックスサイトを作ろうと思っています。スクロールボックスの上下にパララックスの画像があります。そのパララックス画像の下にフッターを作って表示し、固定することがゴールです。
発生している問題・エラーメッセージ
しかしフッターの位置がパララックス画像の中に入っているので、最下部に表示することができません。HTML、CSS両方貼ります。多分CSSが原因だと思われます
エラーメッセージ
該当のソースコード
html
1コードの表示(ブロック) 2 3 4<!DOCTYPE html> 5<html lang="ja"> 6<head> 7 <meta charset="utf-8"> 8 <!-- CSSの読み込み --> 9 <link rel="stylesheet" type="text/css" href="css/style.css"> 10</head> 11<body> 12 13<div class="wrapper"> 14 15<header> 16 17 18 19 20<ul id="dropmenu" style="clear:both;"> 21<li><a href="/">大項目１</a> 22<ul> 23<li><a href="/">小項目３</a></li> 24<li><a href="/">小項目４</a></li> 25</ul> 26</li> 27<li><a href="/">大項目２</a> 28<ul> 29<li><a href="/">小項目１</a></li> 30<li><a href="/">小項目２</a></li> 31 32 33</ul> 34</li> 35<li><a href="/">大項目２</a> 36<ul> 37<li><a href="/">小項目１</a></li> 38<li><a href="/">小項目２</a></li> 39</ul> 40</li> 41<li><a href="/">大項目３</a> 42<ul> 43<li><a href="/">小項目５</a></li> 44<li><a href="/">小項目６</a></li> 45</ul> 46</li> 47<li><a href="/">大項目４</a> 48</li> 49</ul> 50 51<div class="parallax"><h2>HUNGRY?</h2></div> 52 53 54<div class="contents"> 55 This is Example. 56</div> 57 58 59 60<div class="parallax"></div> 61 62<!-- フッター --> 63<footer> 64<div class="footer_navigation"> 65<ul> 66<li><a href="index.html">HOME</a></li> 67<li><a href="#">豆のゆで方</a></li> 68<li><a href="#">豆の力</a></li> 69<li><a href="#">世界の豆</a></li> 70<li><a href="#">このサイトについて</a></li> 71</ul> 72</div> 73<small>(C) 2018 ISHIWATA Akemi</small> 74</footer> 75 76 </div> 77 </header> 78 79</body> 80</html>
CSS
1コードの表示(ブロック) 2 3charset "utf-8"; 4 5 6 7/*ラッパー*/ 8.wrapper{ 9 width:1240px; 10 margin:0 auto; 11 background-color: rgba(149, 78, 42,.8); 12 13} 14 15 16 17 18/* ナビゲーション */ 19#dropmenu { 20position: relative; 21list-style-type: none; 22width: 1240px; 23height: 30px; 24margin: 20px 0 10px 0; 25padding: 0; 26background: #fff; 27border-bottom: 1px solid #007CC3; 28border-radius: 3px 3px 0 0; 29} 30#dropmenu li { 31width: 18%; 32float: left; 33margin: 0; 34padding: 0; 35text-align: center; 36border-right:1px #fff solid; 37} 38#dropmenu li a { 39display: block; 40margin: 0; 41padding: 10px 0 6px; 42color: #000; 43background: #ba2636; 44font-size: 14px; 45line-height: 1; 46text-decoration: none; 47} 48#dropmenu li ul { 49position: absolute; 50top: 100%; 51right: 39px; 52list-style: none; 53margin: 0; 54border-radius: 0 0 3px 3px; 55 z-index: 1000; 56} 57#dropmenu li ul li{ 58overflow: hidden; 59width: 600px; 60height: 0; 61color: #000; 62-moz-transition: .2s; 63-webkit-transition: .2s; 64-o-transition: .2s; 65-ms-transition: .2s; 66transition: .2s; 67} 68#dropmenu li ul li a{ 69padding: 10px 15px; 70background: #E8F6FF; 71text-align: left; 72font-size: 12px; 73font-weight: normal; 74} 75 76 77/* ナビゲーションの枠内の色 */ 78#dropmenu li:hover > a{ 79background: #e2041b; 80color: #007CC3; 81} 82#dropmenu > li:hover > a{ 83border-radius: 3px 3px 0 0; 84} 85#dropmenu li:hover ul li{ 86overflow: visible; 87height: 29px; 88border-top: 1px solid #007CC3; 89 90} 91#dropmenu li:hover ul li:first-child{ 92border-top: 0; 93} 94#dropmenu li:hover ul li:last-child{ 95border-bottom: 0; 96} 97#dropmenu li:hover ul li:last-child a{ 98border-radius: 0 0 3px 3px; 99} 100 101 102 103@import url('https://fonts.googleapis.com/css?family=Quicksand'); 104 105body,html { 106 height: 50%; 107 margin: 0 auto; 108 font-family: Quicksand; 109 letter-spacing:2px; 110} 111 112 113 114 115/*ここまでパララックスとは関係のない設定*/ 116 117/*固定された画像*/ 118 119 parallax { 120 /* relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。*/ 121 position: absolute; 122 background-image: url('https://number.ismcdn.jp/mwimgs/f/6/-/img_f6d48d1af269e72c70634bfff9f93128208188.jpg'); 123 height: 100%; 124 /*background-attachment …… 背景画像の固定・移動を指定する 125 fixed: 背景画像の位置が固定され、スクロールしても動かなくなります。*/ 126 background-attachment: fixed; 127 /* background-position …… 背景画像の表示開始位置を指定する*/ 128 background-position: center; 129 /*cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する*/ 130 background-size: cover; 131 /* background-repeat …… 背景画像のリピートの仕方を指定する*/ 132 background-repeat: no-repeat; 133 width: 1240px; 134 height: 300px; 135 z-index: 1; 136 clear: both; 137 overflow: visible; 138 139} 140 141/*タイトル*/ 142 143 144/*スクロールするボックス*/ 145.contents { 146 position: relative; 147 /*z-index …… 重なりの順序を指定する*/ 148 /*z-index: 0; */ 149 height:800px; 150 background: #555; 151 font-size:60px; 152 background: #fff; 153 padding: 70px 20px; 154 text-align :center; 155 width:1240px; 156 padding-bottom: 100px; 157 } 158 159/* フッター */ 160.wrapper{ 161 min-height: 100vh; 162 position: relative;/*←相対位置*/ 163 padding-bottom: 120px;/*←footerの高さ*/ 164 box-sizing: border-box;/*←全て含めてmin-height:100vhに*/ 165 bottom: 0; 166} 167 168footer { 169 margin: 0; 170 width:1240px; 171 clear: both; 172 overflow: visible; 173 174} 175.footer_navigation ul { 176 margin: 10px 0; 177 font-size: 14px; 178} 179.footer_navigation li { 180 display: inline-block; 181 margin-right: 10px; 182} 183.footer_navigation a { 184 color: #86b12e; 185 text-decoration: none; 186} 187.footer_navigation a:hover { 188 color:#4f4f4f; 189} 190 191 192```ここに言語名を入力 193ソースコード HTML CSS
試したこと
.wrapper,.contents,.parallax,.footer の設定変更を試してもダメでした
補足情報（FW/ツールのバージョンなど）
よろしくお願いします
コードは、マークダウン記法のコードブロックに入れてください。
＞多分CSSが原因だと思われます
→ HTMLにも不備が見られます。開始タグと終了タグの位置、必要なタグの抜けが無いか？等を見直されると良いかと思います。
各コードは、ヘルプ等を参考にして、「コードブロック」として提示してください。
また、各コードには「インデント」を付けてみてください。確認がグッとしやすくなります。
コードブロックを入れるという配慮に気づかず、申し訳ありません。
コードブロックを入れました。
先ほど、回答者のアドバイスを受けて、position: absoluteを削除したらフッターを最下部に置くことが
でき、問題が解決しました。
回答してくれた皆さん、ありがとうございます。コードブロックを入れるという配慮をせず、質問投稿した事は、本当に申し訳ありません。今後質問する時は、質問の内容を明確にして、相手にも伝わるように、慎重に投稿したいと思います。
回答1件
0
ベストアンサー
どのようなレイアウトがご希望なのか不明ですが、
dropmenu
parallax
contents
parallax
footer
というように各ブロックが重ならないように並べたいのなら、
parallax の position: absolute; を削除すればいいでしょう。
現状は position: absolute; があるために、parallax がフローから外れて、他のブロックに重なっています。
投稿2019/09/21 16:21
総合スコア34073
あなたの回答
tips
プレビュー
