Q&A
HTMLが半端なのでコピペで動作確認ができないと思います。
全部提示できないのでしたら必要箇所のみ文法に間違いのない形でコピペで提示してください。
前提・実現したいこと
本当に理解ができない現象で解決したいです。
class名 fvで囲んだfv3つにconseptが含めてsliderされてる件について理解ができません
何が起こっているのでしょうか？
該当のソースコード
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 <title>Cresta Design</title> 8 <link rel="stylesheet" href="css/destyle.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 11</head> 12<body> 13 <!--ヘッダー--> 14 <header class="header"> 15 <div class="header-inner header-fixed"> 16 <h1 id="logo">Cresta Design</h1> 17 <nav class="header-nav"> 18 <ul class="header-list"> 19 <li class="list-item"><a href="#">Concept</a></li> 20 <li class="list-item"><a href="#">Service</a></li> 21 <li class="list-item"><a href="#"> Works</a></li> 22 <li class="list-item"><a href="./Contact.html">Contact</a></li> 23 </ul> 24 </nav> 25 <button class="burger-btn"> 26 <span class="bar-bar_top"></span> 27 <span class="bar-bar_mid"></span> 28 <span class="bar-bar_bottom"></span> 29 </button> 30 </div> 31 <div class="image-inner"> 32 <div class="fv"> 33 <ul class="slider"> 34 <li><img src="./image/fv-bgi_01@2x.jpg" alt="1枚目"></li> 35 <li><img src="./image/fv-bgi_02@2x.jpg" alt="2枚目"></li> 36 <li><img src="./image/fv-bgi_03@2x.jpg" alt="3枚目"></li> 37 </ul> 38 </div> 39 <div class="image-message"> 40 <p>Design for Smile. <br class="sp-br">快適なオフィスを デザインする</p> 41 </div> 42 </div> 43 </div> 44 </header> 45 46 47 <!----> 48 49<!--メイン--> 50 <main class="main"> 51 <!--コンセプト--> 52 <section class="concept"> 53 <h2 class="sub-title ">CONCEPT</h2> 54 <div class="section-inner"> 55 <p class="message"> 56 “働きたくなる空間”をデザインすることで <br class="pc-br"> 57 人々を幸せにする。" 58 </p> 59 <div class="explain"> 60 <p class="text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を 61 幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させて 62 いただきます。 63 </p> 64 <div class="concept-image"> 65 <img src="image/concept-image@2x.jpg" alt="コンセプトイメージ"> 66 </div> 67 68 </div> 69 <div class="section-bottom concept-bottom text-right">Our concept </div> 70 </div> 71 </section> 72 73<script src="js/jquery-3.6.0.min.js"></script> 74<script src="js/script.js"></script> 75<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> 76</body> 77</html>
header.CSS
1header { 2 padding: 19px 30px; 3 -webkit-box-sizing: border-box; 4 box-sizing: border-box; 5 width: 1440px; 6 height: 752px; 7 position: absolute; 8 top: 0; 9 left: 0; 10 z-index: 2; 11} 12 13@media print, screen and (max-width: 768px) { 14 .header .header { 15 padding: 30px 4vw; 16 } 17} 18 19.header .header-inner { 20 display: -webkit-box; 21 display: -webkit-flex; 22 display: -ms-flexbox; 23 display: flex; 24 -webkit-box-pack: justify; 25 -webkit-justify-content: space-between; 26 -ms-flex-pack: justify; 27 justify-content: space-between; 28 -webkit-box-align: center; 29 -webkit-align-items: center; 30 -ms-flex-align: center; 31 align-items: center; 32 max-width: 1200px; 33 margin: 0 auto; 34 z-index: 99; 35} 36 37.header .header-inner #logo { 38 padding-left: 120px; 39 margin-top: 19px; 40 font-family: 'Noto Serif'; 41 font-size: 2.6rem; 42 color: #fff; 43} 44 45@media print, screen and (max-width: 768px) { 46 .header .header-nav { 47 display: none; 48 position: fixed; 49 top: 0; 50 left: 0; 51 width: 100%; 52 height: 100vh; 53 background-color: #282f35; 54 } 55} 56 57.header .header-nav .header-list { 58 display: -webkit-box; 59 display: -webkit-flex; 60 display: -ms-flexbox; 61 display: flex; 62 -webkit-box-pack: end; 63 -webkit-justify-content: flex-end; 64 -ms-flex-pack: end; 65 justify-content: flex-end; 66 -webkit-box-align: center; 67 -webkit-align-items: center; 68 -ms-flex-align: center; 69 align-items: center; 70 margin-right: 0px; 71} 72 73.header .header-nav .header-list .list-item { 74 display: -webkit-box; 75 display: -webkit-flex; 76 display: -ms-flexbox; 77 display: flex; 78 -webkit-box-pack: justify; 79 -webkit-justify-content: space-between; 80 -ms-flex-pack: justify; 81 justify-content: space-between; 82 -webkit-box-align: center; 83 -webkit-align-items: center; 84 -ms-flex-align: center; 85 align-items: center; 86} 87 88.header .header-nav .header-list .list-item > a { 89 text-transform: inherit; 90 font-size: 16px; 91 color: #fff; 92 -webkit-transition: .3s; 93 transition: .3s; 94 font-weight: bold; 95 font-style: italic; 96} 97 98.header .header-nav .header-list .list-item + .list-item { 99 padding-left: 30px; 100}
main
1.image-inner .fv { 2 height: 100vh; 3 min-height: 550px; 4 position: relative; 5} 6 7.image-inner .fv .img { 8 height: 100vh; 9 min-height: 550px; 10 -o-object-fit: cover; 11 object-fit: cover; 12} 13 14@media print, screen and (max-width: 768px) { 15 .image-inner .fv { 16 width: 100%; 17 } 18} 19 20.image-inner .image-message { 21 position: absolute; 22 top: 400px; 23 left: 177px; 24 padding-bottom: 170px; 25} 26 27.image-inner .image-message > p { 28 font-size: 5rem; 29 line-height: 1.4; 30 color: #fff; 31} 32 33.image-inner .image-message .sp-br { 34 display: block; 35} 36 37@media print, screen and (max-width: 768px) { 38 .image-inner .image-message .sp-br .sp-br { 39 display: none; 40 } 41} 42 43.slick-arrow { 44 display: none !important; 45} 46 47.concept { 48 max-height: 811px; 49 margin: 10rem 12rem 7rem 22rem; 50} 51 52.section-inner { 53 text-align: center; 54} 55 56.section-inner .message { 57 text-align: center; 58 font-size: 3rem; 59 margin-bottom: 60px; 60 font-weight: bold; 61 line-height: 1.6; 62 font-size: 3rem; 63} 64 65@media print, screen and (max-width: 768px) { 66 .section-inner .message { 67 font-size: 2rem; 68 padding: 70px 45px 30px; 69 } 70} 71 72.section-inner .explain { 73 display: -webkit-box; 74 display: -webkit-flex; 75 display: -ms-flexbox; 76 display: flex; 77 -webkit-justify-content: space-around; 78 -ms-flex-pack: distribute; 79 justify-content: space-around; 80 margin: 0 auto; 81} 82 83@media print, screen and (max-width: 768px) { 84 .section-inner .explain { 85 display: block; 86 -webkit-box-align: center; 87 -webkit-align-items: center; 88 -ms-flex-align: center; 89 align-items: center; 90 margin-bottom: 40px; 91 } 92} 93 94.section-inner .explain .text { 95 display: block; 96 max-width: 440px; 97 line-height: 1.9; 98 font-weight: bold; 99 margin-top: 10px; 100 margin-left: 15px; 101} 102 103@media print, screen and (max-width: 768px) { 104 .section-inner .explain .text { 105 padding: 20px 15px; 106 } 107} 108 109.section-inner .explain .concept-image { 110 max-width: 440px; 111 height: 240px; 112 margin-left: 30px; 113} 114 115@media print, screen and (max-width: 768px) { 116 .section-inner .explain .concept-image { 117 max-width: 100%; 118 display: -webkit-box; 119 display: -webkit-flex; 120 display: -ms-flexbox; 121 display: flex; 122 -webkit-flex-shrink: 0; 123 -ms-flex-negative: 0; 124 flex-shrink: 0; 125 padding: 20px 15px; 126 margin: 0; 127 } 128} 129 130@media print, screen and (max-width: 768px) { 131 .section-inner .pc-br { 132 display: none; 133 } 134}
slick.js
1//スッティキーヘッダー 2$(function(){ 3 var $win=$(window), 4 $fv=$('.fv'), 5 $header=$('.header'), 6 fvHeight='$fv.(outerHeight)'; 7 fixedClass='fixed'; 8 9 $win.on('load scroll', function(){ 10 var value=$(this).scrollTop(); 11 if($win.width()>768){ 12 if(value > fvHeight){ 13 $header.addClass(fixedClass); 14 15 }else{ 16 $header.removeClass(fixedClass); 17 } 18 } 19 20 }); 21}); 22 23 24//スライダー 25 26$(function(){ 27 $('.slider').slick({ 28 autoplay: true, 29 autoplaySpeed: 2000, 30 fade: true, 31 speed: 1000, 32 cssEase: 'linear' 33 }); 34 });
考えたこと
class名が sliderで囲んだliをsliderにしているにもかかわらず、
sliderの名がついていないコンセプトがsliderになっている
→conseptがfvと一が重なってしまってるとしか考えられていません
修正しました。
m.tsさんは動作確認のツールはどんなのを使っているのでしょうか？
ご回答いただけると幸いです
また、こちらの件に関してのご回答もいただけると幸いです！
あなたの回答
tips
プレビュー
