書籍を確認したり、お手本でダウンロードファイルにある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>© 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;
}
No.1ベストアンサー
- 回答日時:
<div id="menu" class="big-bg"> と対になる </div> がありません。
見返したら、たしかに、抜けていました!!!
そして、無事解決致しました!!
最初のタグを打ったら勝手に閉じタグも出るものなので、まさかそこが消えていると思わず確認不足でした...
ご確認いただき、ありがとうございました!!
もう少し注意深く確認作業をしたいと思います(´;ω;`)
No.2
- 回答日時:
こんにちは
>お手本でダウンロードファイルにある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"の閉じタグがないこともすぐにわかると思います。
たしかに、入れ替えて確認するのが早いですね!見比べるばかりで、その手法は頭になかったですΣ(´Д`;)
様々な確認方法のご提示と、チェックサイトまで教えていただきありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS、width100%でもできる余白
-
widthやheightの数値に単位(px...
-
書籍を見つつサイト造りの練習...
-
CSSで指定した背景画像にリンク...
-
<li>の先頭に出るスペースの埋...
-
safariだけ、cssが効きません!
-
FFにおけるDIVタグ間の隙間につ...
-
ウインドウを小さくするとbody...
-
CSSがなぜかfont-sizeだけ効か...
-
CSSでborderの指定を解除する記...
-
インラインフレーム内の表示位...
-
CSSでボックスのheightが0になる
-
画像イメージの上下左右、欲し...
-
Firefoxで一番下のstickyが上に...
-
ライトボックスでスクロールバー
-
CSSで背景画像を一番下にもって...
-
HTMLで文字が重なって表示されます
-
定義リストに下線をつけたいと...
-
表示倍率を変えるとレイアウト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報
とりあえずグリッドで画像追加するか?と追加してみたら、フッターはフッターになったのですが、トップの画像が画面いっぱいにひろがってグリッドにもかぶってしまっています。
min-height: 100vhが悪さしてるのか?と予測しているのですがどうでしょうか
...画像のスクショをとったのに上手くアップロードできないです
イメージ画像貼れずすいません(-_-;)