コンテンツ及びサイドメニューのスタートが画面上部ではなく真ん中あたりに来てしまう

初めまして。
現在、HTML及びCSSを用いて自作サイトの作成を行っているものです。

下記のようなソースコードを記述して、自作サイトの作成を行っているのですが、どういうわけか「コンテンツ」及び「サイドメニュー（サイドバー）」のスタート地点が画面の真ん中あたりになってしまいます。

私としては、ヘッダーから少し下がった場所からスタートさせたいのですがどうしてこのようになってしまうのでしょうか。可能であれば、修正をしたいです。

完成イメージは、下記の画像になります。

何かもし、気になる箇所などございましたらご教授いただければ幸いです。
どうぞよろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="utf-8">
5   <meta name="robots" content="noindex,nofollow">
6   <title>ああああああ</title>
7
8   <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10   <link rel="stylesheet" href="stylesheet.css">
11
12   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
13   <script>
14   $(function() {
15      const hum = $('#hamburger, .close')
16      const nav = $('.sp-nav')
17      hum.on('click', function(){
18         nav.toggleClass('toggle');
19      });
20   });
21   </script>
22</head>
23<body>
24   <header>
25      <h1>
26         <a href="/">ああああああ</a>
27      </h1>
28      <nav class="pc-nav">
29         <ul>
30            <li><a href="#">ABOUT</a></li>
31            <li><a href="#">SERVICE</a></li>
32            <li><a href="#">COMPANY</a></li>
33            <li><a href="#">CONTACT</a></li>
34         </ul>
35      </nav>
36      <nav class="sp-nav">
37         <ul>
38            <li><a href="#">ABOUT</a></li>
39            <li><a href="#">SERVICE</a></li>
40            <li><a href="#">COMPANY</a></li>
41            <li><a href="#">CONTACT</a></li>
42            <li class="close"><span>閉じる</span></li>
43         </ul>
44      </nav>
45      <div id="hamburger">
46         <span></span>
47      </div>
48
49	<style type="text/css">
50	.pcolle-parts {
51 	width:100%!important;
52	}
53	</style>
54
55   </header>
56   <div class="main-visual">
57     <div id="wrapper">
58       <div class="left-column">
59         コンテンツ
60
61       </div>
62
63       <div class="right-column">
64         サイドメニュー（サイドバー）
65       </div>
66    </div>
67
68   </div>
69
70   <!-- footer -->
71  <footer>
72    <p>© All rights reserved by ああああああ</p>
73  </footer>
74
75</body>
76</html>
77

CSS
1@charset "utf-8";
2* {
3   box-sizing: border-box;
4}
5body {
6   margin: 0;
7   padding: 0;
8   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
9   background-color: #e6e6e6;
10   letter-spacing : 0.2em;
11}
12header {
13   padding: 30px 4% 10px;
14   position: fixed;
15   top: 0;
16   width: 100%;
17   background-color: #fff;
18   display: flex;
19   align-items: center;
20}
21h1 {
22   margin: 0; padding: 0;
23   font-size: 20px;
24}
25a {
26   text-decoration: none;
27   color: #4b4b4b;
28}
29nav {
30   margin: 0 0 0 auto;
31}
32ul {
33   list-style: none;
34   margin: 0;
35   display: flex;
36}
37li {
38   margin: 0 0 0 15px;
39   font-size: 14px;
40}
41.main-visual {
42   display: flex;
43   justify-content: center;
44   align-items: center;
45   height: calc(100vh - 80px);
46   background: url('main_visual.jpg') top center / cover no-repeat;
47}
48h2 {
49   margin: 0;
50   font-size: 30px;
51   font-weight: normal;
52   color: #fff;
53}
54
55.sp-nav {
56   display: none;
57}
58
59@media screen and (max-width: 640px) {
60   .pc-nav {
61      display: none;
62   }
63   .sp-nav {
64      z-index: 1;
65      position: fixed;
66      top: 0;
67      left: 0;
68      width: 100%;
69      height: 100vh;
70      display: block;
71      width: 100%;
72      background: rgba(0, 0, 0, .8);
73      opacity: 0;
74      transform: translateY(-100%);
75      transition: all .2s ease-in-out;
76   }
77   #hamburger {
78      position: relative;
79      display: block;
80      width: 30px;
81      height: 25px;
82      margin: 0 0 0 auto;
83   }
84   #hamburger span {
85      position: absolute;
86      top: 50%;
87      left: 0;
88      display: block;
89      width: 100%;
90      height: 2px;
91      background-color: #4b4b4b;
92      transform: translateY(-50%);
93   }
94   #hamburger::before {
95      content: '';
96      display: block;
97      position: absolute;
98      top: 0;
99      left: 0;
100      width: 100%;
101      height: 2px;
102      background-color: #4b4b4b;
103   }
104   #hamburger::after {
105      content: '';
106      display: block;
107      position: absolute;
108      bottom: 0;
109      left: 0;
110      width: 70%;
111      height: 2px;
112      background-color: #4b4b4b;
113   }
114   /*スマホメニュー*/
115   .sp-nav ul {
116      padding: 0;
117      display: flex;
118      flex-direction: column;
119      justify-content: center;
120      align-items: center;
121      height: 100%;
122   }
123   .sp-nav li {
124      margin: 0;
125      padding: 0;
126   }
127   .sp-nav li span {
128      font-size: 15px;
129      color: #fff;
130   }
131   .sp-nav li a, .sp-nav li span {
132      display: block;
133      padding: 20px 0;
134   }
135   /*-閉じるアイコンー*/
136   .sp-nav .close {
137      position: relative;
138      padding-left: 20px;
139   }
140   .sp-nav .close::before {
141      content: '';
142      position: absolute;
143      top: 50%;
144      left: 0;
145      display: block;
146      width: 16px;
147      height: 1px;
148      background: #fff;
149      transform: rotate( 45deg );
150   }
151   .sp-nav .close::after {
152      content: '';
153      position: absolute;
154      top: 50%;
155      left: 0;
156      display: block;
157      width: 16px;
158      height: 1px;
159      background: #fff;
160      transform: rotate( -45deg );
161   }
162   .toggle {
163      transform: translateY( 0 );
164      opacity: 1;
165   }
166   .main-visual {
167      padding: 0 4%;
168   }
169   h2 {
170      line-height: 1.6;
171      text-align: center;
172   }
173}
174
175footer {
176  width: 100%;
177  height: 80px;
178  text-align: center;
179  padding: 30px 0;
180  background-color: #cab64a;
181}
182.footer-text {
183  color: #fff;
184}
185
186#wrapper {
187    width: 100%; /* 1000px */
188    margin: 0 auto;
189    display: flex;
190    flex-wrap: wrap;
191}
192
193.left-column {
194  padding: 30px 4% 10px;
195  width: 75%;
196  border: 1px solid #4b4b4b;
197  margin-left: 2%;
198}
199
200.right-column {
201  width: 20%;
202  border: 1px solid #4b4b4b;
203  margin-left: 2%;
204}
205

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

回答3件

.main-visual (スマホ用のも含めて2箇所)のalign-itemsを削除する。
すると、ヘッダーがfixedで作られているため、.main-visual上部の内容が隠れてしまう。これを防ぐには、.main-visual (スマホ用のも含めて2箇所)にmargin-topかpadding-topを追加し、値は70pxあたりを指定する。

投稿2020/07/25 06:31

Daregada

総合スコア11990

ベストアンサー

align-items: center; としているので .main-visual の子要素 #wrapper が上下中央になってます。
上寄せにしたいなら、align-items: flex-start; にてます。
ただし、これだと #wrapper が header の背後に隠れてしまうので、margin-top で調整します。

css
1
2.main-visual {
3   display: flex;
4   justify-content: center;
5   align-items: flex-start; /* 修正 */
6   height: calc(100vh - 80px);
7   background: url('main_visual.jpg') top center / cover no-repeat;
8}
9/*中略*/
10
11#wrapper {
12    width: 100%; /* 1000px */
13    margin: 80px auto 0; /* お好みで80pxを増減してください。 */
14    display: flex;
15    flex-wrap: wrap;
16}

投稿2020/07/25 06:06

hatena19

総合スコア34075

ypk

2020/07/25 06:47

ありがとうございます。無事に解決しました。そして勉強になりました。ありがとうございました。

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

サイドメニュが親要素である.main-visualのalign-items: center;の影響を受けているからです。
それを外せば縦方向に中央寄せにはならなくなります。

投稿2020/07/25 05:49

yuki84web

総合スコア1857

ypk

2020/07/25 05:56

ありがとうございます。さっそく　.main-visualのalign-items: center;　を外してみたところ、今度は「コンテンツ」及び「サイドメニュー」の高さがすごいことになってしまいヘッダーを突き抜けてしまっているような状態になってしまいました。 CSSはこのように記述しました。スクロールなどできません。 .main-visual { display: flex; justify-content: center; height: calc(100vh - 70px); background: url('main_visual.jpg') top center / cover no-repeat; } どのようにすれば、コンテンツ及びサイドメニューがヘッダーに突き抜けないようになるのでしょうか。お手数をおかけしますが、どうぞよろしくお願いいたします。