Q&A
発生している現象は、文章では伝わりにくいと思いますので、画面キャプチャー等の問題の箇所に赤丸等の印をつけて場所と内容がわかるような画像を質問に添付していただくことは可能でしょうか？
<html lang="ja"> <head> <meta charset="utf-8"> <title>WCB Cafe</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 href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="home" 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="home-content wrapper"> <h2 class="page-title">We'll Make Your Day</h2> <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</P> <a class="button" href="menu.html">メニューを見る</a> </div><!-- /.home-content --> </div><!-- /#home --> </body> </html> コード ``` ### 前提・実現したいこと 「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」の4章をやっています。4－5までやったところ、上に余白が少しありフルスクリーンにならない事と、背景画像にあるコーヒーカップの表示面積が少なくなってしまう問題がでてきています。何度も見直したのですが、どこを改善すればよいのでしょうか。よろしくお願いします。 ```@charset "UTF-8"; /*共通部分 -------------------------*/ html { font-size: 100%; } body{ font-family: "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%; } /*HOME --------------------------------------*/ .home-content { text-align: center; margin-top: 10%; } .home-content p { font-size: 1.125rem; margin: 10px 0 42px; } /*見出し*/ .page-title { font-size: 5rem; font-family: 'Philosopher',serif; text-transform: uppercase; font-weight: normal; } /*ボタン*/ .button { font-size: 1.375rem; background: #0bd; color: #fff; border-radius: 5px; padding: 18px 32px; } .button:hover { background: #0090aa; } /*大きな背景画像*/ .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; } コード
上記が作成したhtmlとcssです。
テキストと打ち込んだコードを何度も見直しましたが、間違いはありませんでした。
よろしくお願いします。
ご提示のコードを試してみましたが、「上に余白が少しありフルスクリーンにならない事と、背景画像にあるコーヒーカップの表示面積が少なくなってしまう問題」は発生しませんでした。
あ、いや、発生してますね。
問題を確認しました。
お世話になっております。ご返信ありがとうございます。
こちらが、画面のスクリーンショットになります。
先に試しに他の方のご指摘箇所を、訂正・追加してみました。
けれども、やはり上に余白ができてしまいフルスクリーンにならない件が、解決できないでいます。
よろしくお願いいたします。
HTMLもCSSと同じように```で囲ってください。
```css
ここにCSS
```
1行以上開ける
```html
ここにHTML
```
アドバイスありがとうございます。参考にさせていただきます。
回答2件
0
ベストアンサー
こんにちは。
typoだと思います。
<link rel="stylishsheet" href="https://unpkg.com/ress/dist/ress.min.css">
↓
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
投稿2020/10/13 03:53
総合スコア36113
あっ、そこか！！
link要素、シビアな仕様ですね・・・。
スタイリッシュなミス…。
think49さん >
吹きました。
まさしくスタイリッシュミスですね。
ありがとうございます！見落としてたんですね(-_-;)訂正しました????
ただ、問題はまだ解決に至らないです(´；ω；`)ｳｯ…
ミスしないように気をつけます！
うーん、当方では問題が再現しませんでした。
推測ですが、<div id="home" class="big-bg">の前に全角スペースとか入っていませんか？
当方では、そのような余分な全角スペースを入れたところ、同様の余白を作り出すことができました。
（teratailの質問文は行頭のスペースは自動的に削除してしまうので、markdownで入力していただければ、このような確認の手間が省けます）
ご指摘ありがとうございます。初質問でまだ勝手がわからなかったので、Markdownを使用して投稿し直してみました。全角ではないと思うのですが…、どうでしょうか？
全角スペースがありますね。
<meta name="description" の前です。
ありがとうございます！解決しました！！感謝です！
ご解決されて何よりです。
ママレード・ボーイ、懐かしいですね。
あっ、そこか！！
てんどん笑
(#^.^#)
そうです！ご存じなんですね（*^_^*）
吉住渉先生の作品って、結構好きだったのでアイコンにしてしまいました。
0
上に余白が少しありフルスクリーンにならない事
ブラウザのデフォルトの余白だと思います。
css
1body { 2 margin: 0; 3}
背景画像にあるコーヒーカップの表示面積が少なくなってしまう問題
下記のコードを追加したらどうでしょう。
css
1#home { 2 background-image: url(../images/main-bg.jpg); 3 background-position: center; /* 追加 */ 4 background-size: cover; /* 追加 */ 5 min-height: 100vh; 6}
上の余白の部分がまだ解決されないのですが、
提示のコードでサンプルを作成してみましたが再現できないですね。
とりあえず、ヘッダー内の要素にmargin-topを設定しているのが怪しいので、それを削除して、
Flexboxで上下中央寄せ、上下余白はpaddingで調整するように変更してみてはどうでしょうか。
上記の方針でサンプルを作成してみましたので参考にしてください。
修正した部分は追加した部分はコメントしてあります。
投稿2020/10/13 03:58
編集2020/10/13 06:07総合スコア33715
ありがとうございます。CSSの追加をしてみると、コーヒーカップの件が解決しました！
上の余白の部分がまだ解決されないのですが、まず１つ解決してよかったです！
ありがとうございます。ただ、作成していただいたサンプルを見て、コードを入力してみたのですが、まだ余白のままでいます????
現象のページを自身のサイトにアップしてこちらから見れるようにURLを公開するということは可能でしょうか。
そうでないと、現状の情報だけでは現象を再現できないのでこれ以上のアドバイスは難しいです。
ところでブラウザの検証ツールの使い方はご存じですか。それを使えば、CSSがレイアウトにどのように影響を与えているか簡単に確認できます。ローカル環境でも確認できますのでまずはご自身で確認されることをお勧めましす。
検証ツール（デベロッパーモード）の使い方
https://prog-8.com/docs/html-dev
検証ツールは使っているので知っているのですが、解決が自分でも難しいなと感じたので、今日色々なアドバイスをいただいたので、それを参考に１からウェブサイトを作り直してみようかなと思います。ありがとうございました。
あなたの回答
tips
プレビュー
