header-btn,logoｍのいちがおかしいor表示させたい

前提・実現したいこと

header-btn,logoｍのいちがおかしいor表示されない
btn・・位置がおかしい
logoが表示されない

ご回答いただけると幸いです。

###試したこと
1logoはパスの確認。まちがえているのか確認済み。
2.btnにmrgin-leftを設定していましたが、解除しても反応しない。なぜなのか、まったく理解できないです.

該当のソースコード

HTML
1!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>】</title>
8
9    <link rel="stylesheet" href="./css/destyle.css">
10    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11    <!--flatpicker-->
12    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
15    <link rel="stylesheet" href="./css/style.css">
16</head>
17    <header class="header">
18        <div class="header-left">
19            <img src="./img/top-header-logo.png" alt="" id="logo">
20            <nav class="nav">
21                <ul class="header-list">
22                    <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
23                    <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
24                    <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
25                </ul><!-- /.header-list -->
26            </nav><!-- /.nav -->
27        </div>
28        <div class="header-right">
29            <div class="header-link" id="js-modal">
30                <a class="calender-link js-modal_open" href="#">
31                    <!-- <img src="./img/calender.png" alt="カレンダー"> -->
32                    宿泊予約
33                </a>
34            </div><!-- /.header-link -->
35
36            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
37                <span class="line"></span ><span class="line"></span><span class="line"></span>
38            </button>
39        </div><!-- /.header-right -->
40
41      
42
43    </header><!-- /.header -->
44
45  <script src="js/jquery-3.6.0.min.js"></script>
46    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
47      <!-- 日本語の言語ファイル -->
48      <script>flatpickr("#flatpickr",{locale:"ja"});</script>
49      <script src="js/script.js"></script>
50</body>
51</html>

CSS
1
2.header {
3  position: fixed;
4  top: 0;
5  z-index: 999;
6  width: 100%;
7  max-height: 80px;
8  color: transparent;
9  display: -webkit-box;
10  display: -webkit-flex;
11  display: -ms-flexbox;
12  display: flex;
13  -webkit-box-pack: justify;
14  -webkit-justify-content: space-between;
15      -ms-flex-pack: justify;
16          justify-content: space-between;
17}
18
19.header-inner {
20  max-width: 1880px;
21  width: 100%;
22  display: -webkit-box;
23  display: -webkit-flex;
24  display: -ms-flexbox;
25  display: flex;
26  -webkit-box-align: center;
27  -webkit-align-items: center;
28      -ms-flex-align: center;
29          align-items: center;
30  margin: 0 auto;
31}
32
33.header-left {
34  display: -webkit-box;
35  display: -webkit-flex;
36  display: -ms-flexbox;
37  display: flex;
38  -webkit-box-pack: left;
39  -webkit-justify-content: left;
40      -ms-flex-pack: left;
41          justify-content: left;
42  -webkit-box-align: center;
43  -webkit-align-items: center;
44      -ms-flex-align: center;
45          align-items: center;
46}
47
48.header-left #logo {
49  width: 130px;
50  height: 130px;
51  padding: 20px 120px 20px 20px;
52  z-index: 9999;
53}
54
55.header-left .nav {
56  display: -webkit-box;
57  display: -webkit-flex;
58  display: -ms-flexbox;
59  display: flex;
60  -webkit-box-pack: justify;
61  -webkit-justify-content: space-between;
62      -ms-flex-pack: justify;
63          justify-content: space-between;
64  -webkit-box-align: center;
65  -webkit-align-items: center;
66      -ms-flex-align: center;
67          align-items: center;
68  margin-left: 120px;
69}
70
71.header-left .nav .header-list {
72  display: -webkit-box;
73  display: -webkit-flex;
74  display: -ms-flexbox;
75  display: flex;
76  -webkit-box-align: center;
77  -webkit-align-items: center;
78      -ms-flex-align: center;
79          align-items: center;
80  padding-top: 32px;
81  padding-bottom: 32px;
82}
83
84.header-left .nav .header-list .header-item {
85  color: #fff;
86}
87
88.header-left .nav .header-list .header-item + .header-item {
89  padding-left: 30px;
90}
91
92.header-right {
93  margin-left: auto;
94}
95
96.header-right .header-link {
97  margin-right: 100px;
98  /*  height: calc(54/80*100%);
99                background-color: $link-color;
100                border-radius: 3px;
101                padding: 15px 35px;
102                display: flex;
103                justify-content: flex-end;
104                align-items: center; */
105}
106
107@media screen and (max-width: 992px) {
108  .header-right .header-link {
109    margin-left: auto;
110  }
111}
112
113.header-right .header-link .calender-link {
114  display: block;
115  background-color: #978F10;
116  text-decoration: none;
117  font-weight: bold;
118  -webkit-box-align: center;
119  -webkit-align-items: center;
120      -ms-flex-align: center;
121          align-items: center;
122  text-align: center;
123  color: #fff;
124  padding: 10px 37px;
125  font-size: 1.6rem;
126  -webkit-transition: .3s;
127  transition: .3s;
128}
129
130@media screen and (min-width: 600px) and (max-width: 1179px) {
131  .header-right .header-link .calender-link {
132    margin-right: 180px;
133  }
134}
135
136.header-right .header-link .calender-link::before {
137  content: "";
138  display: inline-block;
139  margin: -3px 5px 0 0;
140  background: url(../../img/calender.png) no-repeat;
141  background-size: contain;
142  vertical-align: middle;
143  width: 22px;
144  height: 22px;
145}
146
147.header-right .header-link .calender-link:hover {
148  background-color: #000;
149}
150
151.js-modal_open {
152  display: block;
153  width: calc(550px/1920px*100%);
154  height: calc(600px/1080px*100%);
155  background-color: #fff;
156  position: absolute;
157  top: 50%;
158  left: 50%;
159  margin-top: 50vh;
160  border: 1px solid #707070;
161  -webkit-transform: translate(-50%, -50%);
162          transform: translate(-50%, -50%);
163  z-index: 100;
164}
165
166.js-modal_open__bg {
167  background: rgba(0, 0, 0, 0.8);
168  height: 100%;
169  position: absolute;
170  width: 100%;
171}
172
173.form {
174  display: none;
175}
176
177.form-ttl {
178  margin: 20px 0 0 0;
179  border: 0;
180  border-top: 1px solid #E7E7E7;
181}
182
183@media screen and (max-width: 992px) {
184  .form_img {
185    width: 18px;
186    height: 18px;
187  }
188}
189
190@media screen and (min-width: 600px) and (max-width: 1179px) {
191  .button {
192    display: block;
193    height: 80px;
194    width: 80px;
195    position: fixed;
196    top: 0%;
197    right: 20px;
198    /* /*   position: fixed;
199        right: 20px;
200        z-index: 3; */
201    /*  width: 5%;
202        height: 5%; */
203    /* border: 1px solid #333;
204        box-shadow: 0 0 2rem transparent; */
205    z-index: 99;
206  }
207  .button_open {
208    right: 20px;
209  }
210}
211
212@media screen and (min-width: 600px) and (max-width: 1179px) and (min-width: 600px) and (max-width: 1179px) {
213  .button .line {
214    display: block;
215    height: 1px;
216    width: 60%;
217    background-color: #fff;
218    position: absolute;
219    top: 50%;
220    left: 50%;
221    -webkit-transform: translate(-50%, -50%);
222            transform: translate(-50%, -50%);
223    -webkit-transition: .3s;
224    transition: .3s;
225  }
226  .button .line:first-child {
227    display: block;
228    -webkit-transform: translate(-50%, -15px);
229            transform: translate(-50%, -15px);
230  }
231  .button .line:nth-child(2) {
232    /*  top: 0;
233                    bottom: 0;
234                    margin: auto; */
235  }
236  .button .line:last-child {
237    -webkit-transform: translate(-50%, 15px);
238            transform: translate(-50%, 15px);
239  }
240  .button .line._open:first-child {
241    display: block;
242    -webkit-transform: rotate(45deg) translate(-50%, -15px);
243            transform: rotate(45deg) translate(-50%, -15px);
244    -webkit-transform-origin: left;
245            transform-origin: left;
246    color: #000;
247  }
248  .button .line._open:nth-child(2)._open {
249    opacity: 0;
250  }
251  .button .line._open:last-child {
252    -webkit-transform: rotate(-45deg) translate(-50%, 15px);
253            transform: rotate(-45deg) translate(-50%, 15px);
254    -webkit-transform-origin: left;
255            transform-origin: left;
256    color: #000;
257  }
258}

Lhankor_Mhy

2021/10/06 08:31

ご提示のコードに header-btn はありませんでした。#js-humburger のことですか？

Lhankor_Mhy

2021/10/06 08:32

logoｍと btn についても HTMLに存在しないです。

Lhankor_Mhy

2021/10/06 08:33

3. 正しく伝わる質問の仕方 https://teratail.com/help/question-tips#questionTips3

itagagaki

2021/10/06 08:36

貼っている画像は期待している出来上がりのイメージなのだと思いますが、それに対してコードの完成度がほど遠いようで、拝見しても、果たしてどこから手を付けたものか…。一番困っている問題から具体的に１つずつ質問してみてください。

free_teku

2021/10/06 09:50

header-btn,logoはそれぞれheader-link,#logoを指します。言葉足らずで、申し訳ありません。

free_teku

2021/10/06 09:52

logo,header-linkを定位置に置きたいですそれだけです。画像は異なっていますが、こちらは関係ないため気にしないでいただけると幸いです。お手数をおかけしますがよろしくお願いいたします。

Lhankor_Mhy

2021/10/06 12:19

btn と logom もそれぞれ header-link #logo のことでいいですか？お疲れですか？　少し休んだ方がいいのでは？

free_teku

2021/10/06 14:17

黄色のボタンの位置を変更したいです。黄色のボタン（宿泊予約）は、aタグのcalender-linkです logoは私のコードではid=logoで記しているコードです。お手数をおかけしますが、何卒宜しくお願い致します。

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

回答1件

ベストアンサー

btn・・位置がおかしい

.js-modal_open を削除してはいかがですか？

logoが表示されない

問題が再現しませんでした。
当方で試したところ、問題なくロゴ画像が表示されます。

おそらく、画像のパスの問題です。

投稿2021/10/07 03:46

Lhankor_Mhy

総合スコア36163

free_teku

2021/10/07 04:52

いつもご回答ありがとうございます。結論、行いましたが、実装できませんでしたまず, logoのパスですが、（自動的に案内するプラグイン）で相対パスを使い、行ったものの、logoは表示されませんその状態で、.js-modal_openを削除したら、上記の3枚目の画像のようになりました。改めて、ご回答いただけると幸いです。何卒宜しくお願い致します。