初心者です。
サイトのコーティングをしています。

画面が768px以上の大きさになると、ヘッダーのレイアウトが崩れてしまいます。
768px以上でも、パンくずリストにかぶらないようにしたいです。
コードを何度も見直しても、分かりませんでした。

文字数制限により、一部分を切り取っていますので必要とあれば、教えて下さい。
よろしくおねがいします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5</head>
6
7<body class="nohero">
8
9    <header class="head-fixed">
10        <div class="container">
11
12            <div class="container-small">
13
14                <a href="index.html" class="headA">LOGGER</a>
15
16                <button type="button" class="headC">MENU</button>
17
18            </div>
19        </div>
20
21
22
23        <nav class="headB">
24            <ul>
25                <li><a href="index.html">トップ</a></li>
26                <li><a href="contents.html">CONTENTS</a></li>
27                <li><a href="about.html">ABOUT</a></li>
28                <li><a href="contact.html">お問い合わせ</a></li>
29            </ul>
30
31        </nav>
32    </header>
33
34    <article class="post">
35        <div class="container">
36
37            <div class="bread">
38                <ol>
39                    <li><a href="index.html">TOP</a></li>
40                    <span class="arrow"></span>
41                    <li><a href="#">記事一覧</a></li>
42                </ol>
43
44            </div>
45
46            <h1>テスト</h1>
47
48            <img src="img/p01.jpg" alt="">
49
50            <p>テストテストテスト</p>
51
52        </div>
53
54    </article>
55
56
57
58    <footer>
59    </footer>
60
61
62
63</body>
64
65</html>

css
1@charset "UTF-8";
2/* 基本色 */
3
4:root {
5    --main-color: #72796C;
6    --accent-color: #72796C;
7    --dark-main-color: #4D3534;
8    --text-bright-color: #fff;
9    --icon-color: #fff;
10    --icon-bk-color: #ddd;
11    --gray-color: #ddd;
12    --large-width: 1000px;
13    --middle-width: 800px;
14}
15
16/* 基本設定：　フォントサイズ */
17@media(max-width: 599px){
18    :root{
19        font-size: 14px;
20    }
21}
22
23@media(min-width: 600px) and (max-width: 799px){
24    :root{
25        font-size: 16px;
26    }
27}
28
29@media(min-width: 800px){
30    :root{
31        font-size: 18px;
32    }
33}
34
35body{font-size: 16px;}
36
37/* 基本設定：ページ全体 */
38
39body {
40    margin: 0;
41    font-family: 'メイリオ';
42}
43
44.arrow {
45    position: relative;
46    display: inline-block;
47    padding-left: 20px;
48}
49
50.arrow::before {
51    content: '';
52    width: 9px;
53    height: 9px;
54    border: 0px;
55    border-top: solid 2px #5bc0de;
56    border-right: solid 2px #5bc0de;
57    -ms-transform: rotate(45deg);
58    -webkit-transform: rotate(45deg);
59    transform: rotate(45deg);
60    position: absolute;
61    top: 50%;
62    left: 0;
63    margin-top: -4px;
64}
65
66.conB a:hover {
67    text-decoration: underline;
68}
69
70.conB img {
71    display: inline-block;
72    margin-top: 15px;
73    margin-bottom: 20px;
74    font-size: 40px;
75    width: 2em;
76    border-radius: 0%;
77    text-align: center;
78    background-color: #ddd;
79    background-color: var(--icon-bk-color);
80    color: #fff;
81    color: var(--icon-color);
82}
83
84@media(min-width: 768px) {
85    .conB .container {
86        display: flex;
87        max-width: 1000px;
88        max-width: var(--large-width);
89        margin-left: auto;
90        margin-right: auto;
91    }
92    .conB .text {
93        flex: 1;
94    }
95}
96
97/* コンテンツC：　概要（画像＋テキスト） */
98
99.conC {
100    background-color: #5D9AB2;
101    background-color: var(--main-color);
102
103    color: #fff;
104    color: var(--text-bright-color);
105}
106
107.conC .text {
108    padding: 20px;
109}
110
111.conC h2 {
112    margin-top: 0;
113    margin-bottom: 10px;
114    font-size: 20px;
115}
116
117.conC p {
118    margin-top: 0;
119    margin-bottom: 20px;
120    font-size: 14px;
121    line-height: 1.8;
122    opacity: 0.8;
123}
124
125.conC a {
126    display: inline-block;
127    margin-top: 20px;
128    padding: 10px 30px;
129    border: solid 3px currentColor;
130    border-radius: 6px;
131    background-color: #BF6A7A;
132    background-color: var(--accent-color);
133    color: #fff;
134    color: var(--text-bright-color);
135    font-size: 14px;
136    text-decoration: none;
137}
138
139.conC a:hover {
140    background-image: linear-gradient( rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
141}
142
143.conC .photo {
144    min-height: 200px;
145    background-image: url(img/note_img.jpg);
146    background-position: center;
147    background-size: cover;
148}
149
150@media(min-width: 768px) {
151    .conC .container {
152        display: flex;
153        max-width: 1000px;
154        max-width: var(--large-width);
155        margin-left: auto;
156        margin-right: auto;
157    }
158    .conC .photo {
159        flex: 3;
160    }
161    .conC .text {
162        flex: 2;
163        padding: 50px;
164    }
165}
166
167/* コンテンツD：　概要（画像＋テキスト＋逆配置） */
168
169.conD .container {
170    padding-top: 3px;
171}
172
173.conD .text {
174    padding: 20px;
175}
176
177.conD h2 {
178    margin-top: 0;
179    margin-bottom: 10px;
180    font-size: 20px;
181}
182
183.conD p {
184    margin-top: 0;
185    margin-bottom: 20px;
186    font-size: 14px;
187    line-height: 1.8;
188    opacity: 0.8;
189}
190
191.conD a {
192    display: inline-block;
193    margin-top: 20px;
194    padding: 10px 30px;
195    box-shadow: 0 0 0 1px #888;
196    border: solid 3px currentColor;
197    border-radius: 6px;
198    background-color: #BF6A7A;
199    background-color: var(--accent-color);
200    color: #fff;
201    color: var(--text-bright-color);
202    font-size: 14px;
203    text-decoration: none;
204}
205
206.conD a:hover {
207    background-image: linear-gradient( rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
208}
209
210.conD .photo {
211    min-height: 200px;
212    background-image: url(img/news_img.jpg);
213    background-position: center;
214    background-size: cover;
215}
216
217@media(min-width: 768px) {
218    .conD .container {
219        display: flex;
220        flex-direction: row-reverse;
221        max-width: 1000px;
222        max-width: var(--large-width);
223        margin-left: auto;
224        margin-right: auto;
225        padding-top: 40px;
226        padding-bottom: 40px;
227    }
228    .conD .photo {
229        flex: 0 0 400px;
230    }
231    .conD .text {
232        flex: 1;
233        padding: 50px;
234    }
235}
236
237
238
239
240/* ヘッダーA：　サイト名 */
241.headA {
242    display: inline-block;
243    line-height: 70px;
244    padding-left: 20px;
245    padding-right: 20px;
246    background-color: #5D9AB2;
247    background-color: var(--main-color);
248    color: #fff;
249    color: var(--text-bright-color);
250    font-family: 'Montserrat', sans-serif;
251    font-size: 24px;
252    text-decoration: none;
253
254}
255
256/* ヘッダーB：ナビゲーションメニュー */
257.headB ul {
258    margin: 0;
259    padding: 0;
260    list-style: none;
261}
262
263.headB a {
264    display: block;
265    padding: 15px;
266    color: inherit;
267    font-size: 12px;
268    text-decoration: none;
269}
270
271.headB a:hover {
272    background-color: rgba(0, 0, 0, 0.3);
273}
274
275@media(min-width: 768px){
276    header .container{
277        display: flex;
278        align-items: center;
279        justify-content: space-between;
280        max-width: 1000px;
281        max-width: var(--large-width);
282        margin-left: auto;
283        margin-right: auto;
284    }
285    .headB ul {
286        display: flex;
287    }
288}
289
290
291/* ヘッダーC：　トグルボタン */
292
293.headC{
294    font-family: 'Montserrat', sans-serif;
295    padding: 10px;
296}
297
298@media(max-width: 767px){
299    /* 小さい画面の設定 */
300    header .container-small{
301        display: flex;
302        align-items: center;
303        justify-content: space-between;
304
305    }
306    
307    .headerC:hover{
308        
309        opacity: 0.3;
310    }
311
312}
313
314@media(min-width: 768px){
315    /* 大きい画面の設定 */
316    .headC{
317        display: none;
318    }
319    .headB{
320        display: block !important;
321    }
322}
323
324/* コンテンツページ：　記事 */
325
326.post .container{
327    max-width: 800px;
328    max-width: var(--middle-width);
329    margin-left: auto;
330    margin-right: auto;
331    padding: 30px 10px;
332}
333
334.post h1{
335    padding-left: 0.5rem;
336    border-left: solid 0.75rem #BF6A7A;
337    border-left: solid 0.75rem var(--accent-color);
338    font-size: 2rem;
339}
340
341.post p{
342    font-size: 1rem;
343    line-height: 2;
344}
345
346.post img{
347    max-width: 100%;
348}
349
350/* コンテンツページ：　パンくずリスト */
351.bread ol {
352    display: flex;
353    margin: 0;
354    padding: 0;
355    list-style: none;
356}
357
358.bread a {
359    display: block;
360    padding: 5px;
361    color: inherit;
362    font-size: 0.875rem;
363    text-decoration: none;
364}
365
366.bread a::after{
367    margin-left: 10px;
368    opacity: 0.3;
369}
370
371.bread a:hover {
372    background-color: rgba(0, 0, 0, 0.1);
373}
374
375
376/* ヘッダーを上部に固定 */
377.head-fixed,
378.nohero .head-fixed{
379    position: fixed;
380}
381
382.nohero .head-fixed + * {
383    margin-top: 70px;
384}
385
386/* ABOUTページ：　画像と沿革 */
387
388.history {
389    background-color: #5D9AB2;
390    background-color: var(--main-color);
391    color: #fff;
392    color: var(--text-bright-color);
393}
394
395.history .text {
396    padding: 20px;
397}
398
399.history h2 {
400    margin-top: 0;
401    margin-bottom: 10px;
402    font-size: 1.5rem;
403}
404
405.history .photo {
406    min-height: 300px;
407    background-image: url(img/note_img.jpg);
408    background-position: center;
409    background-size: cover;
410}
411
412.history table{
413    border-collapse: collapse;
414    border-top: solid 3px #ddd;
415    border-top:  solid 3px var(--gray-color);
416    font-size: 0.875rem;
417}
418
419.history th,
420.history td{
421    padding-top: 1.8rem;
422    padding-bottom: 1.8rem;
423    border-bottom:  solid 1px #ddd;
424    border-bottom:  solid 1px var(--gray-color);
425}
426
427.history th{
428    padding-right: 1rem;
429    text-align: left;
430    word-break: keep-all;
431}
432
433@media(min-width: 768px) {
434    .history .container {
435        display: flex;
436        max-width: 1000px;
437        max-width: var(--large-width);
438        margin-left: auto;
439        margin-right: auto;
440    }
441    .history .photo {
442        flex: 3;
443    }
444    .history .text {
445        flex: 2;
446        padding: 50px;
447    }
448}

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

回答1件

ベストアンサー

こんにちは。

css
1.head-fixed, .nohero .head-fixed {
2	top: 0;
3}

または、

css
1body {
2	display: flow-root;
3}

とするのがいいかと思います。

解説

css
1.nohero .head-fixed + * {
2	margin-top: 70px;
3}

としてマージンで固定配置ヘッダ分の余白を取っているかと思うのですが、その分だけbodyが下がってしまっています。

これは、親子間マージン相殺が原因です。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

親子間マージン相殺を消すには色々方法がありますが、モダンブラウザであればdisplay: flow-rootを使うのが一番無難です。

ブロック整形コンテキスト - 開発者ガイド | MDN

また、bodyが下がった時に固定配置ヘッダが付いてきてしまうのは、top: autoの時に静的位置に配置されることが原因です。

bottom も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。

top - CSS: カスケーディングスタイルシート | MDN

ですので、top: 0;としてautoではない値を指定することによって解消できます。

投稿2021/04/19 04:50

編集2021/04/19 04:58

Lhankor_Mhy

総合スコア36074

hommaA

2021/04/19 06:14

ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

画面サイズ768px以上のヘッダーのレイアウト崩れを直したい

解説

関連した質問