Q&A
コード全部丸投げするより最小構成のコードを改めて組みなおして提示されたほうが良いと思います。
https://teratail.com/help/question-tips#questionTips3-5-1
なんというか外部サイトでファイル提示 非常に怪しい感じがするし。
Q表題の通り、「レスポンシブ対応」でwidth:769; 未満になるとデザインが崩れてしまうため、質問しました。
追記で3点質問です。
Q.SCss(serviceのhover）が文字のみがhover対象になっており、画像全体をhoverしたときに色が薄くなるようにしたいです。どのようにしたらよろしいですか？
Q.header部分に余白があります。
こちらはなぜ起こるのでしょうか？
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Q.JQueryにエラーが表示されます。
「if($win.width()>768px){」width()>768pxの768pxがどうやら原因のようです。（消すとエラーが6つ消えます。）
この原因がなぜなのかわからないため、質問しました。
・やったこと
base.scss
1@mixin overTab { 2 @media print,screen and (max-width: 768px) and (max-width: 960px) { 3 @content; 4 } 5 6 }
をmax-width: 768px→min-width: 768pxにいじりましたが
、変わりませんでした。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
◆やったこと
・原因がimgタグのwidth: 100%;なのか気になり「general.scss」のimg,bodyに@include OverTab{}を付けましたが
反応しない
・調べて900px以上に設定することがベストと書いていたため気になり調べ、行ったが反応しませんでした
何が原因なのか分からず質問しました。恐れ入りますがよろしくお願いいたします。
900pxリンク
※Sassで記入しています。
コンパイル済みです。
headerはレスポンシブ対応のコードはまだ書いていません。
↓コードがあります。恐れ入りますm(__)m
HTML
1（html 前半省）文字制限により 2 <link rel="stylesheet" href="css/destyle.css"> 3 <link rel="stylesheet" href="css/style.css"> 4 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 5</head> 6<body> 7 <!--ヘッダー--> 8 <header class="header"> 9 <div class="header-inner"> 10 11 <div id="logo"> 12 <p> Cresta Design</p> 13 </div> 14 <div class="header-wrapper"> 15 <nav class="nav"> 16 <ul class="header-list"> 17 18 <li class="list-item"><a href="#">Concept</a></li>（修正済み） 19 <li class="list-item"><a href="#">Service</a></li>（修正済み） 20 <li class="list-item"><a href="#"> Works</a></li>（修正済み） 21 <li class="list-item"><a href="./concept">Contact</a></li>←（修正済み） 22 </ul> 23 </nav> 24 </div> 25 26 <button class="burger-btn"> 27 <span class="bar-bar_top"></span> 28 <span class="bar-bar_mid"></span> 29 <span class="bar-bar_bottom"></span> 30 </button> 31 32 33 <div class="image-inner"> 34 <div class="fv"> 35 <ul class="slider"> 36 <li><img src="./image/fv-bgi_01@2x.jpg" alt=""></li> 37 <li><img src="./image/fv-bgi_02@2x.jpg" alt=""></li> 38 <li><img src="./image/fv-bgi_03@2x.jpg" alt=""></li> 39 </ul> 40 </div> 41 <div class="image-message"> 42 <p>Design for Smile. <br class="sp-br">快適なオフィスを デザインする</p> 43 </div> 44 </div> 45 </div> 46 47 </header> 48 49 50 <!----> 51 52<!--メイン--> 53 <main class="main"> 54 <!--コンセプト--> 55 <section class="concept"> 56 <h2 class="sub-title ">CONCEPT</h2> 57 <div class="section-inner"> 58 <p class="message"> 59 “働きたくなる空間”をデザインすることで <br class="pc-br"> 60 人々を幸せにする。" 61 </p> 62 <div class="explain"> 63 <p class="text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を 64 幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させて 65 いただきます。 66 </p> 67 <div class="concept-image"> 68 <img src="image/concept-image@2x.jpg" alt="コンセプトイメージ"> 69 </div> 70 71 </div> 72 <div class="section-bottom concept-bottom text-right">Our concept </div> 73 </div> 74 75 76 </section> 77<!----> 78<!--Works--> 79 <section class="works"> 80 <h2 class="sub-title text-right text-white works-title">works</h2> 81 <ul class="works-list"> 82 <li class="works-item"> 83 <a href="#"> 84 <p class="works-text"> 85 新規サイトを公開しました。今回のサイトは <br> 86 白と黒を基調にしたミニマルなデザインに <br> 87 なっています。 88 </p> 89 </a> 90 <div class="works-image"><img src="image/card-img01@2x.jpg" alt="" ></div> 91 </li> 92 <li class="works-item"> 93 <a href="#"> 94 <p class="works-text"> 95 新規サイトを公開しました。今回のサイトは <br> 96 白と黒を基調にした 97 </p> 98 </a> 99 <div class="works-image"><img src="image/card-img02@2x.jpg" alt="" ></div> 100 </li> 101 <li class="works-item"> 102 <a href="#"> 103 <p class="works-text"> 104 新規サイトを公開しました。今回のサイトは <br> 105 白と黒を基調にしたミニマルなデザインに <br> 106 なっています。 107 </p> 108 </a> 109 <div class="works-image"><img src="image/card-img03@2x.jpg" alt="" ></div> 110 </li> 111 </ul> 112 <div class="works-link cmn-link"> 113 <a href="#"> 114 <p>View more</p> 115 </a> 116 </div> 117 118 <div class="section-bottom text-white">Our works </div> 119 </section> 120<!----> 121 122<!--Service--> 123 <section class="service"> 124 <h2 class="sub-title">Service</h2> 125 <ul class="service-list"> 126 <li class="service-item service1"><a href="#">Hearing</a></li> 127 <li class="service-item service2"><a href="#">Planning</a></li> 128 <li class="service-item service3"><a href="#">Direction</a></li> 129 </ul> 130 131 <div class="section-bottom text-right">Our service </div> 132 </section> 133<!----> 134<!--Contact--> 135<section class="contact bg-contact"> 136 <h2 class="sub-title text-right text-white contact-title">Contact</h2> 137 <div class="contact-inner"> 138 139 <p class="contact-text">お気軽にご相談ください。</p> 140 <a href="./contact" class="cmn-link contact-link">Contact</a> 141 <div class="section-bottom text-white">Contact us </div> 142 </div> 143 144</section> 145<!----> 146 147 </main> 148<!--メイン--> 149 150 151<footer class="footer"> 152 <p>© cresta.design all rights reserved</p> 153</footer> 154<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 155<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 156</body> 157</html>
work.scss
1.works{ 2 max-width: 1440px; 3 //max-height: 986px; 4 5 background-image: url(../../image/works-bgi@2x.jpg); 6 background-size: cover; 7 background-position: center; 8 background-repeat: no-repeat; 9 10} 11 12.works-title{ 13 //padding-top: 105px; 14} 15 16.works-list{ 17 display: flex ; 18 justify-content: space-between; 19 padding: 80px 220px 80px 220px; 20 text-align: center; 21 margin: 0 auto; 22 @include overTab{ 23 display: block; 24 padding: 0 4vw; 25 margin: 50px 27px 80px; 26 } 27 28 .works-item{ 29 background:#fff; 30 width: 32%; 31 32 display: flex; 33 flex-direction: column-reverse; 34 justify-content: space-between; 35 border: 1px solid; 36 //overflow: hidden; 37 + .work-item{ 38 margin-left: 20px; 39 border: 1px solid; 40 41 } 42 @include overTab{ 43 width: 320px; 44 width: 100%; 45 margin: 0 auto 30px; 46 47 48 } 49 50 .works-text{ 51 52 padding: 25px 20px; 53 text-align: center; 54 .works-text:nth-child(even){ 55 padding: 15px 20px 53px 20px; 56 } 57 58 59 } 60 61 .works-image{ 62 63 64 } 65 } 66 67 .works-link{ 68 padding: 80px 602px 247px 602px; 69 >a{ 70 71 } 72 } 73}
service.scss
1.service{ 2 margin: 0 auto; 3 4} 5 6.service-list{ 7 display: flex; 8 @include overTab { 9 display: block; 10 margin-bottom: 40px; 11 padding: 0 4vw; 12 13 } 14 .service-item{ 15 width: 33.3%; 16 text-align: center; 17 @include overTab{ 18 //display: block; 19 margin: 0 auto ; 20 width: 100%; 21 22 background-repeat: no-repeat; 23 + .service-item{ 24 padding-top: 30px; 25 } 26 } 27 28 29 >a { 30 width: 100%; 31 text-align: center; 32 color: #fff; 33 line-height: 320px; 34 font-size: 4rem; 35 font-weight: bold; 36 font-style: italic; 37 @include overTab{ 38 line-height: 250px; 39 text-align: center; 40 } 41 42 } 43 44 >a:hover{ 45 background-color: rgba(40,47,53,.7); 46 transition: .3s; 47 48 } 49 50 } 51 52 .service1{ 53 background-image: url(../../image/service-img01@2x.jpg); 54 55 } 56 .service2{ 57 background-image: url(../../image/service-img02@2x.jpg); 58 59 } 60 .service3{ 61 background-image: url(../../image/sevice-img03@2x.jpg); 62 63 } 64 65}
失礼いたしました。修正して改めて添付いたします。何卒宜しくお願い致します。
回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。
失礼いたしました。修正しなおしました。大変申し訳ございませんでした。m(__)m
```jQuery
$(function(){
var $win=$(window),
$fv=$('.fv'),
$header=$('.header'),
fvHeight=$fv.(outerHeight);
fixedClass='fixed';
$win.on('load scroll', function(){
var value=$(this).scrollTop();
if($win.width()>768px){
if(value > fvHeight){
$header.addClass(fixedClass);
}else{
$header.removeClass(fixedClass);
}
}
});
});
```
jQueryのコードが貼れなかったため、（字数制限）こちらに貼ります。何卒宜しくお願い致します。
ベストアンサー
