linkボタンが消えない

前提・実現したいこと

linkボタンが消えません。
原因と解決策を教えてください。

発生している問題・エラーメッセージ

cmn-link（general.scss)で書いているコードが優先なのか消えないです。cmn-linkでdisplay: none;で消えますが
これをやると、共通のボタンでも消えてしまいます。

mixin.scss
1@charset "UTF-8";
2
3// ブレイクポイント
4$breakpoints: (
5 'sm': 'screen and (max-width: 576px)',
6 'md': 'screen and (max-width: 769px)',
7 'lg': 'screen and (max-width: 992px)',
8 'xl': 'screen and (max-width: 1200px)'
9) !default;
10@mixin mq($breakpoint: md) {
11  @media #{map-get($breakpoints, $breakpoint)} {
12    @content;
13  }
14}
15
16@mixin mr($breakpoint: sm) {
17  @media #{map-get($breakpoints, $breakpoint)} {
18    @content;
19  }
20}
21
22@mixin ms($breakpoint: lg) {
23  @media #{map-get($breakpoints, $breakpoint)} {
24    @content;
25  }
26}
27
28@mixin mt($breakpoint: xl) {
29  @media #{map-get($breakpoints, $breakpoint)} {
30    @content;
31  }
32}
33

該当のソースコード

header(HTML)
1<!DOCTYPE html>
2<html lang="en">
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    <meta name="robots" content="noindex">
8    <title>中級編</title>
9
10     <!-- Google Fonts -->
11    <link rel="preconnect" href="https://fonts.googleapis.com">
12    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet">
14    <!---->
15    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
16    <link rel="stylesheet" href="./CSS/destyle.css">
17    <link rel="stylesheet" href="CSS/slick.css">
18    <link rel="stylesheet" href="css/slick-theme.css">
19    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
20    <link rel="stylesheet" href="./CSS/style.css">
21    
22</head>
23<body>
24<header class="header">
25        <div class="inner header-inner">
26            <h1 class="header-ttl">
27                <img class="img-logo" src="./image/Logo.png" alt="">
28                <p class="logo-text">ユアコーディング</p>
29            </h1><!-- /.header-ttl -->
30            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
31                <span class="humburger__line"></span>
32
33              </button>
34            <nav class="nav">
35                <ul class="header-list">
36                    <li class="header-item"><a href="#">特徴</a></li><!-- /.header-item -->
37                    <li class="header-item"><a href="#">価格</a></li><!-- /.header-item -->
38                    <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item -->
39                </ul><!-- /.header-list -->
40            </nav><!-- /.nav -->
41            <div class="cmn-link header-link">
42               <a href="#contact-link">お問い合わせ</a>
43            </div><!-- /.cmn-link -->
44        </div><!-- /.inner -->
45    </header><!-- /.header -->
46    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
47    
48    <script type="text/javascript" src="js/slick.min.js"></script>
49    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
50    <script type="text/javascript" src="js/script.js"></script>
51</body>
52</html>
53

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

試したこと

Google DevelopToolを使い、header-linkに[display: none;]を書きました、結局、消えませんでした。

この原因に何時間も費やしているため、原因を教えていただけると幸いです。
なぜなのでしょうか？

Lhankor_Mhy

2021/09/18 08:45

ミックスインのコードをご提示ください。

m.ts10806

2021/09/18 09:01 編集

SCSS　質問タグとして追加してください。手元で確認するにはコンパイルが必要となります。 SCSS特有の問題を確認するのでなければ、質問タグなしにしてもコンパイル後のCSSを提示してください。

free_teku

2021/09/18 09:00

かしこまりました。Lhankor_Mhyさん、連絡いただけて本当に助かります。

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

回答2件

ベストアンサー

コンパイルするとこうなります。

css
1@media screen and (max-width: 769px) {
2  .header .header-inner .nav .header-link {
3    display: none;
4  }
5}

そのような要素はない（.header-link は .nav の外にある）ので効いていない、というのが原因です。

解決方法ですが、SCSSを書く時には適切にインデントをつけましょう。
めんどくさいのであれば、コードエディタを使うといいです。

投稿2021/09/18 09:18

Lhankor_Mhy

総合スコア36163

free_teku

2021/09/18 09:24

直りました。ありがとうございます。本当、情けないです！！助かりましたm(__)m

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

.header-link{display:none;}で消えると思いますが、.の付け忘れとか？

投稿2021/09/18 08:47

itagagaki

総合スコア8402

free_teku

2021/09/18 09:04

ご回答ありがとうございます。いえ、消えないんです。（苦笑）

itagagaki

2021/09/18 09:39

単純に.header-link{display:none;}というCSSコードを追加すれば消えるはずということです。 SCCSコードの問題なら他者が同じ現象を再現できるSCCSコードを提示するようにしてください。

free_teku

2021/09/18 14:40

ご回答いただきありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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