Q&A
ミックスインのコードをご提示ください。
前提・実現したいこと
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;]を書きました、結局、消えませんでした。
この原因に何時間も費やしているため、原因を教えていただけると幸いです。
なぜなのでしょうか？
SCSS 質問タグとして追加してください。
手元で確認するにはコンパイルが必要となります。
SCSS特有の問題を確認するのでなければ、質問タグなしにしてもコンパイル後のCSSを提示してください。
かしこまりました。Lhankor_Mhyさん、連絡いただけて本当に助かります。
回答2件
0
ベストアンサー
コンパイルするとこうなります。
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
総合スコア36960
0
.header-link{display:none;}で消えると思いますが、.の付け忘れとか？
投稿2021/09/18 08:47
総合スコア8402
あなたの回答
tips
プレビュー
