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

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

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

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

HTML5

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

Q&A

解決済

2回答

1030閲覧

上にスクロールするとfooterが一緒に上がってきてしまう。左側に隙間ができてしまう。

latenshrimp1

総合スコア18

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2019/04/29 08:59

スクロールすると一緒にfooterが上がってきてしまいます。
また、左側部分に隙間ができてしまいます。
スクロールの方はz-index: 2;やposition: absolute; などを試してみました。
また、左側の隙間の方は、width:100%を試しました。
宜しくお願いします。

<html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ちづる1</title> <link rel="stylesheet" href="chizuru.css"/> <title>ちづる</title> </head> <body> <header> <div class="container"> <div class="logo"> <img src="logo.png"></div> <div class="header-list"> <ul> <li>Cute</li> <li>Cute</li> <li>Cute</li> </ul> </div> </div> </header> <div class="main"> <div class="copy-container"><img src="header.jpg"></div> <div class="copy"><h1>Our Ability</h1></div> <div class="contents"> <div class="contents-item"><img src="img1.png"> <h3>Heal</h3> <p>We are excellent.</p></div> <div class="contents-item"> <img src="img2.png"> <h3>Fly</h3> <p>We are talented.</p></div> <div class="contents-item"> <img src="img3.png"> <h3>Sleep</h3> <p>We are clever.</p></div> </div> <div class="section-title"> <h2>We are necessary for<br>human life</h2> <p>Because we are very cute.<br> Please leave it to us if you need help.</p> <div class="btn sinup">MORE</div> </div> <div class="section-title-logo"> <img src="img-right.jpg"></div> </div> <footer> <footer class="footer">copyright 2019 Shima-Enaga</footer> </footer> </body> </html>

body

1 font-family: "Avenir Next";height: 100%; 2} 3 4.container{width: 1280px; height: 26px; } 5.logo{padding:0px 150px; float: left; } 6.header-list{ font-size:18px; font-family:ヒラギノ角ゴ ProN W3; text-align:right; margin-right: 150px;} 7.header-list li{ list-style: none; float: right; display: inline-block; padding: 16px 30px 16px 0px; color:#555555; 8 } 9.main{width:1280px; } 10.copy-container{width:980px; height: 600px;} 11 .copy h1{ text-align: center; color:#555555;; margin:70px 548px; border-bottom: 5px solid #51A2BC; width:185px; display: inline-block; } 12 13.contents{margin:52px ; text-align: center; color:#555555;} 14 .contents-item{ padding:50px; display: inline-block;} 15.contents-item h3{margin:20px; font-size:32px;} 16.contents-item p{font-size:20px; margin:32px;} 17 18.section-title{float:left; width:335px; margin-left:150px; color:#555555;} 19.h2{margin:80px; font-size:32px; } 20.p{color:#555555;margin-top:30px;} 21.sinup{font-size:22px;text-align:center;line-height: 50px;} 22.btn{color:#51A2BC; border-radius:25px ; 23 border: solid 3px #51A2BC; height:50px;width:165px; display:inline-block; } 24.section-title-logo{float: right;margin:20px 130px; margin-bottom:124.99px;} 25 26footer{background-color: #D5D5D5;height:50px; width:100%; margin-top:74.99px; 27 position: fixed; bottom: 0;} 28.footer{ color:#FFFFFF; font-size:12px;text-align:center; line-height:50px;}

イメージ説明

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

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

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

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

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

guest

回答2

0

取り急ぎ原因となっている箇所だけお伝えします。
・footerが一緒にあがってくる問題
footerタグに position: fixed が当たっているためです。positionは特に指定しなくてよいかと思います。
・左の隙間
bodyタグにデフォルトでcssがあたっているのでデフォルトのstyleをリセットをすると解決します。

投稿2019/04/29 09:14

tmykndr

総合スコア74

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

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

latenshrimp1

2019/04/29 10:36

回答ありがとうございます。 なるほど、position: fixed はfooterの位置が変な位置にきてしまうので、 下に固定したいと思い設定しましたが、違うのですね。 しかし、これをなくしてしまうと、また変な位置にきてしまいます。 footerを下に固定するにはどうすれば良いでしょうか?
guest

0

ベストアンサー

左側の隙間は

body{ margin: 0; padding: 0; }

で直ります。

footerがあがる原因は下記です。

footer{ ... /* position: fixed;←不要 bottom: 0; ←不要 */ clear: both; }

イメージ説明

position: fixed;は固定なのであがるのではなく画面上で固定されるからそう見えます。
footerの前の</div>タグが不要で、section-titleとsection-title-logoでfloatを使っているので次のfooterではclear:bothにしないと要素が重なります。
(個人的にはdisplay:flexの方がレスポンシブもキレイで使いやすいと思います。。)

他にも
・レスポンシブの記述がない
<meta name="viewport" content="width=device-width,initial-scale=1">
・CSSのクラス・ID名が記述されていない箇所がある
<footer>タグが2重になっている

などは直した方が良さそうです。。

投稿2019/04/29 09:22

編集2019/04/29 10:56
wataame

総合スコア302

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

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

latenshrimp1

2019/04/29 10:51

回答ありがとうございます。 左側の隙間は、アドバイスに従い無事解決できました。 footerタグ確かに二重になっていました、ありがとうございます。 position: fixed; bottom: 0;は、 footerがおかしな位置にきてしまうので、下に固定するために 入れたのですが、違うのですね。 しかし、これを外すとまたおかしな位置にきてしまいます。 どうすれば、下に固定できるのでしょう? ググってposition: absolute;を試したみましたが、うまくいきませんでした。 度々、の質問で申し訳ございませんが、宜しくお願いします。
wataame

2019/04/29 10:54

回答に追記しました。 footerにclear: both;を追記してください。 要素が重なっているのは直前のクラスでfloatを使っているためです。 floatを使った場合はclear:bothなどで解除しないとダメです。 ・基礎39. 回り込みの解除(floatの解除) https://web-manabu.com/html-css39/
latenshrimp1

2019/04/29 10:59

なるほど!ありがとうございます。 やってみたところ 無事、解決できました。 大変、助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問