プロが教えるわが家の防犯対策術！

書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません

解決済

  • 質問者：SUI42
  • 質問日時：
  • 回答数：2件

書籍を確認したり、お手本でダウンロードファイルにあるCSSとも見比べておかしな点はないようなのですが、フッターが画面の下ではなく中途半端な位置にあります。
もしちゃんと画面下部に表示させようとおもったら、marginを追加すればいいのでしょうか？

HTML↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WCB Cafe - MENU</title>
<meta name="description" content="ブレンドコーヒーと
ヘルシーなオーガニックフードを提供するカフェ">
<link rel="icon" type="image/png" href="images/favicon.png">

<!--CSS-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="h<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+ … rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>

<body>
<div id="menu" class="big-bg">
<header class="page-header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.svg"
alt="WCBカフェホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="news.html">News</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>


<div class="menu-content wrapper">
<h2 class="page-title">Menu</h2>
<p>
体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
美味しいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。
</p>
</div><!-- /.menu-content-->


<footer>
<div class="wrapper">
<p><small>&copy; 2019 Manabox</small></p>
</div>
</footer>

</body>
</html>


CSS↓
@charset "UTF-8";

/*共通部分
-----------------------------------*/
html{
font-size: 100%;
}
body{
font-family:'M PLUS 丸みを帯びた 1c', "サンセリフ","哲学者",Yu Gothic Medium","游ゴシック Medium","YuGothic",
"游ゴシック体","ヒラギノ角ゴ　Pro W3","sans-serif";
line-height: 1.7;
color: #432;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}

/*HEADER
----------------------------------*/
.logo{
width: 210px;
margin-top: 14px;
}
.main-nav {
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main-nav li{
margin-left: 36px;
}
.main-nav a{
color: #432;
}
.main-nav a:hover{
color: #0bd;
}
.page-header{
display: flex;
justify-content: space-between;
}
.wrapper{
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;}


/*　大きな背景画像 */
.big-bg{
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home{
background-image: url(../images/main-bg.jpg);
min-height: 100vh;
}
#home .page-title{
text-transform: none;
}



/* フッター
--------------------------------*/
footer{
background: #432;
text-align: center;
padding: 26px 0;
}
footer p{
color: #fff;
font-size: 0.875rem;
}



/* MENU
----------------------------------------*/
#menu{
background-image: url(../images/menu-bg.jpg);
min-height: 100vh;
}
.menu-content{
max-width: 560px;
margin-top: 10%;
}
.menu-content .page-title{
text-align: center;
}
.menu-content p{
font-size: 1.125rem;
margin: 10px 0 0;
}

「書籍を見つつサイト造りの練習をしているの」の質問画像

質問者からの補足コメント

  • つらい・・・

    とりあえずグリッドで画像追加するか？と追加してみたら、フッターはフッターになったのですが、トップの画像が画面いっぱいにひろがってグリッドにもかぶってしまっています。
    min-height: 100vhが悪さしてるのか？と予測しているのですがどうでしょうか

    ...画像のスクショをとったのに上手くアップロードできないです
    イメージ画像貼れずすいません(-_-;)

      補足日時：2022/11/28 15:32
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： bx2
  • 回答日時：

<div id="menu" class="big-bg"> と対になる </div> がありません。

    • good
    • 0
    • 件
通報する
この回答へのお礼

見返したら、たしかに、抜けていました！！！
そして、無事解決致しました！！

最初のタグを打ったら勝手に閉じタグも出るものなので、まさかそこが消えていると思わず確認不足でした...
ご確認いただき、ありがとうございました！！
もう少し注意深く確認作業をしたいと思います(´；ω；｀)

通報する
お礼日時：2022/11/28 18:42

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞お手本でダウンロードファイルにあるCSSとも
＞見比べておかしな点はないようなのですが～
DLしたお手本のファイルが存在するのなら、まず、そちらを表示させてみて、同じようにずれているかどうかを確認してみてください。
そちらがずれていないのなら、質問者様が作成したものがどこかおかしいということになります。

違いがあるのなら・・
　・CSSをお手本と入れ替えてみる
　・HTMLをお手本と入れ替えてみる
を行って、どちらかで直る様なら入れ替えたものがおかしいことがわかります。
どちらでも直らない様なら、両方ともにおかしいことがわかります。

あとは、関連しそうなところを見比べるだけ。
わからなければ、関連要素にborderなどを表示して位置関係を確認しながら行うのが良いでしょう。
（border表示を行うとその分だけ表示位置がずれますが、多分、ご質問には関係なさそうなので）
CSSを部分的にコメントアウトして、非適用にしてみたりなどすることで、どの部分が原因かも見つけやすいと思います。
「そんな面倒なことやってられない」というのであれば、正しいものを適当な1群ごと順にコピペで上書きしていって、表示が修正される直前に直したところが原因ってわかると思います。


※「そっくりに書き写したはずなのに同じにならない」ということはわかりますが、一方だけを提示して「どこが違うでしょう？」と言われても、もう一方がわからなければ判別しようもありません。
（見た目のレイアウトを同じようにするだけなら、方法はいろいろありますので）

※ 文法チェックを行いたいなら、以下のようなところをご利用になるのが宜しいでしょう。
◇HTML
https://validator.w3.org/#validate_by_input
◇CSS
https://jigsaw.w3.org/css-validator/#validate_by …
そうすれば、div id="menu"の閉じタグがないこともすぐにわかると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

たしかに、入れ替えて確認するのが早いですね！見比べるばかりで、その手法は頭になかったですΣ（´Д｀；）
様々な確認方法のご提示と、チェックサイトまで教えていただきありがとうございました！！

通報する
お礼日時：2022/11/28 18:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報