質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1413閲覧

フッターを最下部に表示して固定したい

emeraldturtle

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2019/09/21 14:32

編集2019/09/22 05:28

前提・実現したいこと

制作課題として、簡単なパララックスサイトを作ろうと思っています。スクロールボックスの上下にパララックスの画像があります。そのパララックス画像の下にフッターを作って表示し、固定することがゴールです。

発生している問題・エラーメッセージ

しかしフッターの位置がパララックス画像の中に入っているので、最下部に表示することができません。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="/">大項目1</a> 22<ul> 23<li><a href="/">小項目3</a></li> 24<li><a href="/">小項目4</a></li> 25</ul> 26</li> 27<li><a href="/">大項目2</a> 28<ul> 29<li><a href="/">小項目1</a></li> 30<li><a href="/">小項目2</a></li> 31 32 33</ul> 34</li> 35<li><a href="/">大項目2</a> 36<ul> 37<li><a href="/">小項目1</a></li> 38<li><a href="/">小項目2</a></li> 39</ul> 40</li> 41<li><a href="/">大項目3</a> 42<ul> 43<li><a href="/">小項目5</a></li> 44<li><a href="/">小項目6</a></li> 45</ul> 46</li> 47<li><a href="/">大項目4</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/ツールのバージョンなど)

よろしくお願いします

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/09/21 14:58

headerの中にfooterが入っているのですか?
hatena19

2019/09/21 15:27

コードは、マークダウン記法のコードブロックに入れてください。
yoshinavi

2019/09/22 02:43

>多分CSSが原因だと思われます → HTMLにも不備が見られます。開始タグと終了タグの位置、必要なタグの抜けが無いか?等を見直されると良いかと思います。 各コードは、ヘルプ等を参考にして、「コードブロック」として提示してください。 また、各コードには「インデント」を付けてみてください。確認がグッとしやすくなります。
emeraldturtle

2019/09/22 05:32

コードブロックを入れるという配慮に気づかず、申し訳ありません。 コードブロックを入れました。
emeraldturtle

2019/09/22 08:19

先ほど、回答者のアドバイスを受けて、position: absoluteを削除したらフッターを最下部に置くことが でき、問題が解決しました。  回答してくれた皆さん、ありがとうございます。コードブロックを入れるという配慮をせず、質問投稿した事は、本当に申し訳ありません。今後質問する時は、質問の内容を明確にして、相手にも伝わるように、慎重に投稿したいと思います。
guest

回答1

0

ベストアンサー

どのようなレイアウトがご希望なのか不明ですが、

dropmenu

parallax

contents

parallax

footer

というように各ブロックが重ならないように並べたいのなら、
parallax の position: absolute; を削除すればいいでしょう。

現状は position: absolute; があるために、parallax がフローから外れて、他のブロックに重なっています。

投稿2019/09/21 16:21

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

emeraldturtle

2019/09/22 08:10

すいません、ありがとうございました! position: absolute; を削除したらフッターを最下部に置くことができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問