【HTML】謎の空白ができる【CSS】

画像写真のようにおすすめメニューとそのしたと画像のところの間に謎の空白ができます。
コーディングは以下のようにしています。
解決方法、理由を教えていただけますでしょうか？
お願いいたします！

<html　lang="ja">
<head>
<meta charset="utf-8">
<meta name="author" content="Cafe　hamuchi">
<meta name="description" content="自然派カフェ">
<meta name="viewport" content="width=device-width,  initial-scale=1.0">
<title>Cafe Hamuchi</title>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
</head>
<body>
<div class="wrapper">
  <header class="headerWrap">
    <h1>Cafe Hamuchi</h1>
  </header>
    <nav role="navigation" class="naviWrap">
      <ul>
        <li><a href="index.html">TOP</a></li>
        <li><a href="concept.html">CONCEPT</a></li>
        <li><a href="menu.html">MENU</a></li>
        <li><a href="map.html">MAP</a></li>
      </ul>
    </nav>
    <div class="content">
        <h1>おすすめメニュー</h1>
      <osusume role="gohan" class="gohan1">
        <dl class="coffee">
          <dt>はむちブレンド</dt>
          <dd class="pict"><img src="images/商品２.jpg" width="150" height="150" alt="コーヒー"></dd>
          <dd class="text">当店の看板メニュー<br>
            こだわり豆を使用した爽やかな<br>
            酸味と深い味わいを持った<br>
            当店の人気商品です
          </dd>
        </dl>
        <dl class="cappuccino">
          <dt>カプチーノ</dt>
          <dd class="pict"><img src="images/商品１.jpg" width="150" height="150" alt="カプチーノ"></dd>
          <dd class="text">
            <p>こだわりのコーヒー豆と<br>
              口当たりのいいふわふわミルクが<br>
              味わえる一品です</p>
          </dd>
        </dl>
        <dl class="Frenchtoast">
          <dt>フレンチトースト</dt>
          <dd><img src="images/商品3.jpg" width="150" height="150" alt="フレンチトースト"></dd>
          <dd class="text">
            <p>外はカリッと、中はふわっとした<br>
              程よい甘さでランチにも<br>
              カフェタイムにもぴったりです</p>
          </dd>
        </dl>
      </osusume>
      <osusume2 role="gohan" class="gohan2">
        <dl class="pancake">
          <dt>パンケーキ</dt>
          <dd><img src="images/商品4.jpg" width="150" height="150" alt="パンケーキ"></dd>
          <dd class="text">
            <p>ゆっくりと焼き上げたふっくら<br>
              ふわふわパンケーキ。シロップと<br>
              相性バッチリです</p>
          </dd>
        </dl>
        <dl class="pasta">
          <dt>生ハムパスタ</dt>
          <dd><img src="images/商品5.jpg" width="150" height="150" alt="生ハムパスタ"></dd>
          <dd class="text">
            <p>塩味のきいたおいしい生ハム<br>
              トマトの酸味とぴったり合った<br>
              一品です</p>
          </dd>
        </dl>
        <dl class="desert">
          <dt>デザートプレート</dt>
          <dd><img src="images/商品6.jpg" width="150" height="150" alt="デザートプレート"></dd>
          <dd class="text">
            <p>当店で焼き上げたずっしりとした<br>
              濃厚なガトーショコラとフレッシュな<br>
              牛乳を使用したバニラアイスが楽しめる品です</p>
          </dd>
        </dl>
      </osusume2>
    </div>
    <footer class="footer1">
      <p>Copyright 2020 Cafe Hamuchi.</p>
   		</footer>
	</div>
</body>
</html>


.wrapper {
  font-family: 'M PLUS 1p', sans-serif;
  width: 100%;
  margin:0 auto;
  position: relative;
}
.headerWrap {
  width: 1050px;
  height: 400px;
  background-image: url(images/カフェヘッダー.png);
  background-repeat: no-repeat;
  background-size: 100%;
  left: 250px;
  position: absolute;	
}

.headerWrap h1 {
  display: none;
}

.naviWrap {
  width: 300px;
  height: 867px;
  background-size: 100%;
  background-image: url(images/カフェ左.png);
  background-repeat: no-repeat;
  position:relative;
  top: 0;
  left: 0;
}

.naviWrap ul {
  padding: 300px 40px 0;
}

.naviWrap li a {
  color: #673518;
  font-size: 40px;
}

.naviWrap li a {
  line-height: 100px;
}

.naviWrap li a:hover {
  color: #960000;
}


.mainWrap {
  width: 950px;
  height: 850px;
  background-image: url(images/カフェ.png);
  background-repeat: no-repeat;
  background-size: 100%;
  top: 60px;
  left:25px;
  position: relative;
}
.color {
  background-color:	#f5deb3;
  width: 1000px;
  height: 670px;
  background-repeat: no-repeat;
  background-size: 100%;
  top: 197px;
  left: 300px;
   position: absolute;
}

.conceptpng {
  width: 500px;
  height: 400px;
  background-image: url(images/コンセプト２.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: 550px;
  top: 320px;
}

.word1 {
  color: #673518;
  font-size: 25px;
  margin-left: 700px;
  position: absolute;
  top: 210px;
}

.word2 {
  color: #673518;
  font-size: 15px;
  margin-left: 600px;
  position: absolute;
  top: 700px;
  text-align: center;
}

.content h1{
  position: absolute;	
  top: 205px;
  margin-left: 700px;
}

.gohan1{
 position:inherit;
　display: flex;	
 left: 300px;
 margin-left: 330px;

}

.gohan2{
  display: flex;
  left: 300px;
  margin-left: 330px;
}

.gohan1 dt, .gohan2 dt{		
  text-align: center;
  width: 170px;	
　padding: 5px;
}

.gohan1, .gohan2 {
  display: flex;
}


.chizu h2 {
  position: absolute; 	
  margin-left: 800px;
  top: 230px;
}

.hoge {
  position:relative; 
  margin-left: 600px;
　top: 250px;
}

.bun {
  position:relative;
  display: flex;
  margin-top: 30px;
  margin-left: 600px;
}

.bun h4 {
  margin-left: 50px;
}

.footer1 {
  text-align: center;
}

Lhankor_Mhy

2020/11/28 13:48

osusume というタグを使っているようですが、これは何ですか？　HTMLではないですよね？

Lhankor_Mhy

2020/11/28 13:50

また、role="gohan" という属性があるようですが、これは何ですか？　WAI-ARIAのロールにはないと思いますが。

Rchan

2020/11/28 13:55

ご指摘ありがとうございます。osusume、gohanについては自分fがわかりやすいように独自で名前を付けました。独自で名前をつけるのはよくないでしょうか？

Courange

2020/11/28 14:00

htmlに独自のタグを作成する機能はないです

Rchan

2020/11/28 14:04

他のHTMLでは独自タグでも反映されているのでですが気のせいでしょうか？

Lhankor_Mhy

2020/11/28 14:51

それはHTMLではないと思います。 HTMLではないので、ブラウザでどのように表示されても文句は言えないかと。

Lhankor_Mhy

2020/11/28 15:04

もちろん、JavaScript の Web Components を利用するなどすればカスタム要素を作ることはできますが、ここではそのような話ではないと思います。

Rchan

2020/11/29 11:22

ありがとうございます。わかりやすいタグ付けはどのようにしたらよろしいでしょうか？ div だとわかりにくいと思ってしまいます。

Courange

2020/11/29 13:42

headerやfooterなどはありますがそれ以外はないので、クラスで名づけをしたらいいと思います

Rchan

2020/11/30 12:50

div class＝”好きな言葉” ですね。まずdivになれることですね。ありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

絶対配置をしているのが原因です。

css
1.content h1{
2  position: absolute; /* これ */    
3  top: 205px;
4  margin-left: 700px;
5}

絶対配置された要素は、通常の配置から外れて、包含ブロックを基準に配置されます。

position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。

レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN

ご提示のコードで言うと、以下の要素です。

css
1.wrapper {
2  font-family: 'M PLUS 1p', sans-serif;
3  width: 100%;
4  margin:0 auto;
5  position: relative; /* これ */
6}

老婆心ながら、絶対配置はなかなかややこしい仕様なので、安易な使用は避けた方がいいと思います。

投稿2020/11/28 15:01

Lhankor_Mhy

総合スコア36158

Rchan

2020/11/29 11:25

ありがとうございます。どのようにしたら素材が枠から外れないコーディングになるのでしょうか？

Lhankor_Mhy

2020/11/30 01:15

「枠」とはなんですか？ CSS のデザインは、「整形コンテキスト」と呼ばれるレイアウトモデルになるべく逆らわずにレイアウトをしていくのが基本です。「浮動」や「絶対配置」などの「整形コンテキスト」のフローから外れるやり方は、限定的にとどめるべきです。覚えておいた方がいい「整形コンテキスト」は、以下のものです。・インライン……文字などに用いられます。水平方向にレイアウトされていきます。・ブロック……基本的なブロック要素のレイアウトに用いられます。垂直方法にレイアウトされていきます。・テーブル……表組のレイアウトです。・フレックス……1次元方向へのレイアウトをするモデルです。垂直・水平どちらの方向にでも配置でき、自動折り返しもできるので、拘束の少ないカラムレイアウトを組むのに向いています。・グリッド……いわゆるグリッドレイアウトをするモデルです。2次元的レイアウトをすることができます。これらの「整形コンテキスト」を組み合わせて、実現したいレイアウトを実装していきます。

Lhankor_Mhy

2020/11/30 01:25

（なお、用語の使い方は大雑把なのでご容赦願います）

Rchan

2020/11/30 12:45

枠＝おすすめメニューと写真の間の空白のところを差したかったです。言葉足らずでした。ご回答ありがとうございます。用語を教えていただきありがとうございます。 position:absolute;と設定したら思い通りの位置に入りました。

Lhankor_Mhy

2020/11/30 13:06

ご解決されて何よりです。自己解決の処理をお願いいたします。 https://teratail.com/help#resolve-myself

Rchan

2020/11/30 13:10

はい！ありがとうございます！助かりました！

行動規範の内容に同意します

Lhankor_Mhy様の手助けにより解決しました。

  position: absolute;
  top: 200px;
  margin-left: 620px;
}

.gohan1{
 position:absolute;
　display: flex;
 top:265px;
 left: 365px;
}

.gohan2{
  position:absolute;
  display: flex;
  top: 550px;
  left: 365px;
}

.gohan1 dt, .gohan2 dt{
  text-align: center;
  width: 170px;
　padding: 5px;
}

.gohan1, .gohan2 {
  display: flex;
}


  position: absolute;とすることにより解決しました！

投稿2020/11/30 13:17

Rchan

総合スコア7

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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

【HTML】謎の空白ができる【CSS】

関連した質問