レスポンシブ時、ハンバーガーメニューを使いたい

前提・実現したいこと

2点質問です。
1レスポンシブ時、ハンバーガーメニューを使いたいです。しかし、before,afterの疑似要素が反映されません。原因と解決策を追求したいですがわかりませんでした
2header-linkが消えない。原因と解決策を知りたいです。

該当のソースコード

HTML
1<header class="header">
2        <div class="inner header-inner">
3            <h1 class="header-ttl">
4                <img class="img-logo" src="./image/Logo.png" alt="">
5                <p class="logo-text">ユアコーディング</p>
6            </h1><!-- /.header-ttl -->
7            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
8                <span class="humburger__line"></span>
9                
10              </button>
11            <nav class="nav">
12                <ul class="header-list">
13                    <li class="header-item"><a href="#">特徴</a></li><!-- /.header-item -->
14                    <li class="header-item"><a href="#">価格</a></li><!-- /.header-item -->
15                    <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item -->
16                </ul><!-- /.header-list -->
17            </nav><!-- /.nav -->
18            <div class="cmn-link header-link">
19               <a href="#contact-link">お問い合わせ</a>
20            </div><!-- /.cmn-link -->
21        </div><!-- /.inner -->
22    </header><!-- /.header -->

CSS
1【general.css】
2html {
3  font-size: 62.5%;
4}
5
6body {
7  max-width: 1365px;
8  height: 768px;
9  background-color: #fff;
10  font-size: 1.6rem;
11  font-family: 'Noto Sans JP' sans-serif;
12  color: #333333;
13}
14
15img {
16  width: 100%;
17  height: auto;
18  vertical-align: bottom;
19}
20
21a {
22  text-decoration: none;
23}
24
25li {
26  list-style: none;
27}
28
29/*共通タイトル*/
30.jp-ttl {
31  margin-bottom: 20px;
32  text-align: center;
33  font-size: 3.2rem;
34  font-weight: bold;
35  margin: 0 auto;
36  padding-top: 55px;
37  margin-bottom: 11px;
38}
39
40@media print, screen and (max-width: 1024px) {
41  .jp-ttl {
42    margin-bottom: 40px;
43    font-size: 2.8rem;
44  }
45}
46
47.en-ttl {
48  margin-bottom: 67px;
49  text-align: center;
50  font-size: 1.6rem;
51  color: #3BA6C9;
52  text-transform: uppercase;
53}
54
55@media print, screen and (max-width: 1024px) {
56  .en-ttl {
57    font-size: 0.5rem;
58  }
59}
60
61.inner {
62  width: 1024px;
63  margin-left: auto;
64  margin-right: auto;
65}
66
67@media print, screen and (max-width: 1024px) {
68  .inner {
69    width: 100%;
70    margin: 0 auto;
71  }
72}
73
74/*ボタン*/
75.cmn-link {
76  width: 155px;
77  height: 37px;
78  background: -webkit-gradient(linear, left top, right top, from(#FA41CC), to(#6020B0));
79  background: linear-gradient(to right, #FA41CC, #6020B0);
80  border-radius: 10px;
81  -webkit-box-shadow: 0px 3px 6px #00000029;
82          box-shadow: 0px 3px 6px #00000029;
83}
84
85.cmn-link > a {
86  display: block;
87  color: #fff;
88  font-size: 1.4rem;
89  font-weight: bold;
90  text-align: center;
91  padding-top: 7px;
92}
93【///】
94
95.header {
96  background-color: #FFFFFF;
97  height: 94px;
98  position: fixed;
99  top: 0;
100  z-index: 9999;
101  width: 100%;
102  -webkit-box-shadow: 0px 3px 6px #00000029;
103          box-shadow: 0px 3px 6px #00000029;
104}
105
106.header .header-inner {
107  width: 1022px;
108  margin: 0 auto;
109  padding: 0 20px;
110  display: -webkit-box;
111  display: -ms-flexbox;
112  display: flex;
113  -webkit-box-align: center;
114      -ms-flex-align: center;
115          align-items: center;
116  -webkit-box-pack: justify;
117      -ms-flex-pack: justify;
118          justify-content: space-between;
119  height: 100%;
120}
121
122.header .header-inner .header-ttl {
123  display: -webkit-box;
124  display: -ms-flexbox;
125  display: flex;
126  -webkit-box-align: center;
127      -ms-flex-align: center;
128          align-items: center;
129}
130
131.header .header-inner .header-ttl .img-logo {
132  width: 55px;
133  height: 55px;
134}
135
136.header .header-inner .header-ttl .logo-text {
137  display: block;
138  font-size: 2.4rem;
139  font-weight: bold;
140  margin-left: 16px;
141}
142
143.header .header-inner .humburger__line {
144  display: none;
145}
146
147@media print, screen and (max-width: 1024px) {
148  .header .header-inner .humburger__line {
149    position: absolute;
150    top: 0;
151    right: 0;
152    bottom: 0;
153    left: 0;
154    margin: auto;
155    width: 18px;
156    height: 2px;
157    background-color: #333;
158    -webkit-transition: inherit;
159    transition: inherit;
160  }
161  .header .header-inner .humburger__line ::before {
162    top: -5px;
163  }
164  .header .header-inner .humburger__line ::after {
165    top: 5px;
166  }
167}
168
169.header .header-inner .nav .header-list {
170  display: -webkit-box;
171  display: -ms-flexbox;
172  display: flex;
173  -webkit-box-pack: justify;
174      -ms-flex-pack: justify;
175          justify-content: space-between;
176  -webkit-box-align: center;
177      -ms-flex-align: center;
178          align-items: center;
179}
180
181.header .header-inner .nav .header-list .header-item > a {
182  font-weight: bold;
183}
184
185.header .header-inner .nav .header-list .header-item + .header-item {
186  padding-left: 46px;
187}
188
189.header .header-inner .nav .header-link {
190  width: 155px;
191  height: 37px;
192}
193
194.header .header-inner .nav .header-link > a {
195  color: #fff;
196  font-size: 1.4rem;
197  text-align: center;
198}
199

【追記】です。

header.scss
1
2.header{
3background-color: #FFFFFF;
4height: 94px;
5position: fixed;
6top: 0;
7z-index: 9999;
8width: 100%;
9box-shadow: 0px 3px 6px #00000029;
10
11.header-inner{
12max-width: 1022px;
13margin: 0 auto;
14padding: 0 20px;
15display: flex;
16align-items: center;
17justify-content: space-between;
18height: 100%;
19
20.header-ttl{
21display: flex;
22align-items: center;
23
24.img-logo{
25width: 55px;
26height: 55px;
27
28}
29
30
31.logo-text{
32display: block;
33font-size: 2.4rem;
34font-weight: bold;
35margin-left: 16px;
36
37}
38}
39
40.humburger{
41@include mt{
42position: fixed;
43right: 20px;
44z-index: 3;
45width: 5%;
46height: 5%;
47border-radius: 50%;
48border: 1px solid #333;
49box-shadow: 0 0 2rem transparent;
50}
51
52.humburger__line{
53display: none;
54@include mt{
55display: block;
56position: absolute;
57top: 0;
58right: 0;
59bottom: 0;
60left: 0;
61margin: auto;
62width: 18px;
63height: 2px;
64background-color: #333;
65-webkit-transition: inherit;
66transition: inherit;
67&::before{
68position: absolute;
69content: "";
70display: inline-block;
71width: 18px;
72height: 2px;
73background-color: #333;
74-webkit-transition: inherit;
75transition: inherit;
76top: -5px;
77}
78&::after{
79position: absolute;
80content: "";
81display: inline-block;
82width: 18px;
83height: 2px;
84background-color: #333;
85-webkit-transition: inherit;
86transition: inherit;
87top: 5px;
88}
89}
90
91
92
93
94}
95
96}
97
98.nav{
99@include mt {
100display: none;
101}
102.header-list{
103display: flex;
104justify-content: space-between;
105align-items: center;
106.header-item{
107>a{
108font-weight: bold;
109}
110+ .header-item{
111padding-left: 46px;
112}
113}
114}
115.header-link{
116width: 155px;
117height: 37px;
118>a{
119color: #fff;
120font-size: 1.4rem;
121text-align: center;
122}
123
124@include mq {
125display: none;
126}
127@include mt {
128display: none !important;
129}
130
131}
132
133}
134}
135
136
137}

試したこと

1headerのハンバーガメニューを疑似要素で書こうと思い
改めて疑似要素の内容理解に努めました
疑似要素
その上で考えたことこれが起こらないのはそれぞれの疑似要素にcontent,widthを書いていないからですか？
私の意見では、humbergerにwidthなどを書いたため反映されると解釈していますが、反映されません。

2.header-linkに「display: none;を書きましたが」解決できません。
general.scssのcmn-linkが先に起動し、消えていない。cmn-linkに書くと、他の共通リンクも消えるため困惑しました。解決策として考えたことは、名前をそれぞれ共通ネームにしない方法で解決するしかないのでしょうか？

上記の2つについて教えていただけると幸いです。

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

回答1件

ベストアンサー

その上で考えたことこれが起こらないのはそれぞれの疑似要素にcontent,widthを書いていないからですか？

ひとまず、contentがないと疑似要素は生成されないです。

初期値 normal
...
none
擬似要素は生成されません。
normal
:before および :after 擬似要素では none として計算されます。
content - CSS: カスケーディングスタイルシート | MDN

header-linkに「display: none;を書きましたが」解決できません

ご提示いただいたコードの範囲では、

css
1.header-link{
2  display: none;
3}

と書くことによって消えました。
ご提示いただいていない general.scss に原因があると思われますが、ひとまず !important を試してみてはどうですか？

投稿2021/09/14 05:29

Lhankor_Mhy

総合スコア36960

free_teku

2021/09/15 15:40

2点質問です 1疑似要素について反映されましたが、疑問が残ります解決できたのはhumberger{}野中のコードを全て::before{}の中にも書いたからです。しかし、私は入れ子構造で書きました。入れ子構造であれば、親要素のhumberger{}の内容は省略できたような気がします。擬似要素でも書かないといけない理由はなぜなのでしょうか？原因を教えていただけると幸いです。 2header-linkについては消えませんでした　「!important」を使ってもです。style.cssを見たところ scssではサクセスになっても, cssに反映されてませんでした。こちらの原因と解決策についても教えていただけると幸いです。何卒よろしくお願いいたします。m(__)m コードは下記です ```header.scss .header{ background-color: #FFFFFF; height: 94px; position: fixed; top: 0; z-index: 9999; width: 100%; box-shadow: 0px 3px 6px #00000029; .header-inner{ max-width: 1022px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 100%; .header-ttl{ display: flex; align-items: center; .img-logo{ width: 55px; height: 55px; } .logo-text{ display: block; font-size: 2.4rem; font-weight: bold; margin-left: 16px; } } .humburger{ @include mt{ position: fixed; right: 20px; z-index: 3; width: 5%; height: 5%; border-radius: 50%; border: 1px solid #333; box-shadow: 0 0 2rem transparent; } .humburger__line{ display: none; @include mt{ display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 18px; height: 2px; background-color: #333; -webkit-transition: inherit; transition: inherit; &::before{ position: absolute; content: ""; display: inline-block; width: 18px; height: 2px; background-color: #333; -webkit-transition: inherit; transition: inherit; top: -5px; } &::after{ position: absolute; content: ""; display: inline-block; width: 18px; height: 2px; background-color: #333; -webkit-transition: inherit; transition: inherit; top: 5px; } } } } .nav{ @include mt { display: none; } .header-list{ display: flex; justify-content: space-between; align-items: center; .header-item{ >a{ font-weight: bold; } + .header-item{ padding-left: 46px; } } } .header-link{ width: 155px; height: 37px; >a{ color: #fff; font-size: 1.4rem; text-align: center; } @include mq { display: none; } @include mt { display: none !important; } } } } } ```

Lhankor_Mhy

2021/09/16 01:45

1 > 入れ子構造であれば、親要素のhumberger{}の内容は省略できたような気がします。そんなことないと思います。 --- 2 >style.cssを見たところ scssではサクセスになっても, cssに反映されてませんでした。当方でコンパイルしてみたところ、問題なく反映されました。（ミックスインは適当に定義しました）ご提示いただけていない部分が原因だと思います。

free_teku

2021/09/18 08:38

考えられる要素はどこにありますか？データであればいくらでもお送りできるのですが、原因として考えられる点としては、general.scssでしょうか？

Lhankor_Mhy

2021/09/18 08:40

いえ、コンパイルしてもその部分がCSSファイルに生成されないということであれば、コンパイラなどの環境の問題か、あるいは何かの勘違いの可能性が高いと思います。

Lhankor_Mhy

2021/09/18 08:42

別のご質問を建てられたのであれば、この質問は閉じて、そっちでやった方がいいのではないですか？

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