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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1020閲覧

cssでheightを設定しようとすると下にあるはずのfutterが移動してきてしまいます。

umi3

総合スコア18

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/12 06:37

編集2020/11/12 15:53

cssでheightを設定しようとするとfutterが移動してきてしまう。

heightの『%』表記を変更すればするほどよくわからない形で反映されてどう調べればいいのかよくわからないのでこちらに質問させていただきました。

該当のソースコード

html

1<!CDOCTYPE html> 2 <html> 3 <head> 4 <meta carset="utf-8"> 5 <title>ポートフォリオ</title> 6 <link rel="stylesheet" href="../css/story.css"> 7 </head> 8 <body> 9<div class="main"> 10 <div class="parallax-bg img-bg-01">固定背景1</div> 11 <div class="parallax-bg img-bg-02">固定背景2</div> 12 <div class="parallax-bg img-bg-03">固定背景3</div> 13 <div class="parallax-bg img-bg-04">固定背景4</div> 14 <div class="parallax-bg img-bg-05">固定背景5</div> 15</div> 16 <footer class="footerall"> 17 <div class="sns-box"> 18 <ul class="sns"> 19 <li><a href="https://twitter.com"><img src="../images/twitter.png" width="50px"></a></li> 20 <li><a href="https://www.facebook.com"><img src="../images/facebook.png" width="50px"></a></li> 21 <li><a href="https:/plus.google.com"><img src="../images/line.png" width="50px"></a></li> 22 </ul> 23 </div> 24 </footer> 25 </body> 26 </html>

css

1@caraset "UTF-8"; 2 3html { 4 font-famili: sans-serif; 5} 6body { 7 margin: 0; 8 background-color: #EEE; 9} 10.main { 11 height: 100%; 12 margin: 0 auto; 13 letter-spacing: 2px; 14 font-size: 10px; 15} 16.main div { 17 box-sizing: border-box; 18 color: #FFF; 19 font-size: 5rem; 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 height: 30%; 24 padding: 5%; 25} 26.parallax-bg { 27 background-attachment: fixed; 28 background-position: center; 29 background-size: cover; 30 background-repeat: no-repeat; 31} 32.img-bg-01 { 33 background-image: url('../images/card/ex.jpg'); 34} 35.img-bg-02 { 36 background-image: url('../images/card/work.jpg'); 37} 38.img-bg-03 { 39 background-image: url('../images/card/profile.jpg'); 40} 41.img-bg-04 { 42 background-image: url('../images/card/skill.jpg'); 43} 44.img-bg-05 { 45 background-image: url('../images/card/story.jpg'); 46} 47.footerall { 48 height: 100%; 49 background: linear-gradient(-135deg, #101010, #A6AAA9); 50} 51.sns-box { 52 padding-top: 70vh; 53} 54.sns { 55 text-align: center; 56 width: auto; 57} 58.sns li{ 59 width: auto; 60 padding: 10px 3% 10px 3%; 61 line-height: 10px; 62 display: inline-block; 63 list-style-type: none; 64}

イメージ説明

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

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

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

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

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

cerfweb

2020/11/12 10:14

やろうとされていることが今ひとつよくわからないので、できれば画像か何かで説明を追加してもらえますか。あと、futterというのはfooterのことでしょうか。
umi3

2020/11/12 11:47

すみません、footerのことです。 この上のコードを書くと、「固定背景2」の部分になぜかfooterが来てしまうのはなぜかわからなくて。。。
cerfweb

2020/11/12 12:16

AAA.jpg〜EEE.jpgはそれぞれどのくらいのサイズの画像ですか。縦横の寸法を教えてください。
umi3

2020/11/12 12:34

ありがとうございます。 画像の大きさは900*420です。
cerfweb

2020/11/12 13:03

ご提示いただいたコードを手元で再現してみましたが、おっしゃっているような現象は見られませんでした。もし可能でしたら、問題の部分のスクリーンショットを見せていただけますか。
umi3

2020/11/12 13:48

今合成して画像を作ったのでちょっとごちゃごちゃしてますが、 本当は「固定背景2」の部分に他の画像を入れてまして、このsnsが貼ってある白と黒のグラデーションの部分は「footer」に来るはずなんですが・・・ 要するに、「固定背景2」にあるはずの本来の画像がなくなって、 「footer」の背景とsnsアイコンが代わりに入ってて、 本来「footer」があった部分に何もなくなってる と行った状態です。。。 うまく説明するのが難しいですが、理解いただけたでしょうか・・・?
cerfweb

2020/11/12 14:12

提示されたcss以外に関係しているcss、あとjsなどはありませんか。
umi3

2020/11/12 14:36

他の部分消して見たりしてもその部分は変わらないですね。。。 cerwebさんの方でも同じような症状でしょうか?
cerfweb

2020/11/12 14:39

固定背景2(または他の固定背景の部分)とfooterが重なるという現象が確認できません。
umi3

2020/11/12 14:44

僕だけってことですか・・・ ちなみに、100%を30%にすると追加した写真の感じになりました
cerfweb

2020/11/12 15:19

.parallax-bgという名前のクラスがありますが、それを操作するJavaScriptなどは読み込まれていませんか?
cerfweb

2020/11/12 15:25

あと、腑に落ちない点が、兄弟要素の.main と .footerall双方にheight: 100%;が適用されていて、どちらのpositionもfixedでもabsoluteでもないことです。何か欠け落ちていませんか。
umi3

2020/11/12 15:55

何か見逃してるか不安になって来たので、一応htmlとcssのコードを全て貼り付けました。 申し訳ないですが、各区人よろしくお願いいたします。
guest

回答1

0

ベストアンサー

提示されたコードがそのままだとしたら、取り敢えず問題となりそうなのは最初の

html

1<!CDOCTYPE html>

です。Cを取り除いてみてください。

投稿2020/11/12 16:14

cerfweb

総合スコア1907

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

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

umi3

2020/11/13 01:18

うわぁ!直りました!!!!! まさかこんなところでミスするなんて・・・ ですが、この部分を直したら今度はcssの「height」が100%にならなくなってしまいました。。。
umi3

2020/11/13 05:52

すみません、自分で解決できました!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問