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

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

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

受付中

なぜ、指定してないclass名がslideされるの??

free_teku
free_teku

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0回答

-1評価

0クリップ

31閲覧

投稿2021/08/25 16:36

編集2022/01/12 10:55

前提・実現したいこと

本当に理解ができない現象で解決したいです。
class名 fvで囲んだfv3つにconseptが含めてsliderされてる件について理解ができません
何が起こっているのでしょうか?

完成図

現状コード

該当のソースコード

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cresta Design</title> <link rel="stylesheet" href="css/destyle.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> </head> <body> <!--ヘッダー--> <header class="header"> <div class="header-inner header-fixed"> <h1 id="logo">Cresta Design</h1> <nav class="header-nav"> <ul class="header-list"> <li class="list-item"><a href="#">Concept</a></li> <li class="list-item"><a href="#">Service</a></li> <li class="list-item"><a href="#"> Works</a></li> <li class="list-item"><a href="./Contact.html">Contact</a></li> </ul> </nav> <button class="burger-btn"> <span class="bar-bar_top"></span> <span class="bar-bar_mid"></span> <span class="bar-bar_bottom"></span> </button> </div> <div class="image-inner"> <div class="fv"> <ul class="slider"> <li><img src="./image/fv-bgi_01@2x.jpg" alt="1枚目"></li> <li><img src="./image/fv-bgi_02@2x.jpg" alt="2枚目"></li> <li><img src="./image/fv-bgi_03@2x.jpg" alt="3枚目"></li> </ul> </div> <div class="image-message"> <p>Design for Smile. <br class="sp-br">快適なオフィスを デザインする</p> </div> </div> </div> </header> <!----> <!--メイン--> <main class="main"> <!--コンセプト--> <section class="concept"> <h2 class="sub-title ">CONCEPT</h2> <div class="section-inner"> <p class="message"> “働きたくなる空間”をデザインすることで <br class="pc-br"> 人々を幸せにする。" </p> <div class="explain"> <p class="text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を 幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させて いただきます。 </p> <div class="concept-image"> <img src="image/concept-image@2x.jpg" alt="コンセプトイメージ"> </div> </div> <div class="section-bottom concept-bottom text-right">Our concept </div> </div> </section>

header.CSS

header { padding: 19px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 1440px; height: 752px; position: absolute; top: 0; left: 0; z-index: 2; } @media print, screen and (max-width: 768px) { .header .header { padding: 30px 4vw; } } .header .header-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-width: 1200px; margin: 0 auto; z-index: 99; } .header .header-inner #logo { padding-left: 120px; margin-top: 19px; font-family: 'Noto Serif'; font-size: 2.6rem; color: #fff; } @media print, screen and (max-width: 768px) { .header .header-nav { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #282f35; } } .header .header-nav .header-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-right: 0px; } .header .header-nav .header-list .list-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header .header-nav .header-list .list-item > a { text-transform: inherit; font-size: 16px; color: #fff; -webkit-transition: .3s; transition: .3s; font-weight: bold; font-style: italic; } .header .header-nav .header-list .list-item + .list-item { padding-left: 30px; }

main

.image-inner .fv { height: 100vh; min-height: 550px; position: relative; } .image-inner .fv .img { height: 100vh; min-height: 550px; -o-object-fit: cover; object-fit: cover; } @media print, screen and (max-width: 768px) { .image-inner .fv { width: 100%; } } .image-inner .image-message { position: absolute; top: 400px; left: 177px; padding-bottom: 170px; } .image-inner .image-message > p { font-size: 5rem; line-height: 1.4; color: #fff; } .image-inner .image-message .sp-br { display: block; } @media print, screen and (max-width: 768px) { .image-inner .image-message .sp-br .sp-br { display: none; } } .slick-arrow { display: none !important; } .concept { max-height: 811px; margin: 10rem 12rem 7rem 22rem; } .section-inner { text-align: center; } .section-inner .message { text-align: center; font-size: 3rem; margin-bottom: 60px; font-weight: bold; line-height: 1.6; font-size: 3rem; } @media print, screen and (max-width: 768px) { .section-inner .message { font-size: 2rem; padding: 70px 45px 30px; } } .section-inner .explain { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; margin: 0 auto; } @media print, screen and (max-width: 768px) { .section-inner .explain { display: block; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 40px; } } .section-inner .explain .text { display: block; max-width: 440px; line-height: 1.9; font-weight: bold; margin-top: 10px; margin-left: 15px; } @media print, screen and (max-width: 768px) { .section-inner .explain .text { padding: 20px 15px; } } .section-inner .explain .concept-image { max-width: 440px; height: 240px; margin-left: 30px; } @media print, screen and (max-width: 768px) { .section-inner .explain .concept-image { max-width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding: 20px 15px; margin: 0; } } @media print, screen and (max-width: 768px) { .section-inner .pc-br { display: none; } }

考えたこと

class名が sliderで囲んだliをsliderにしているにもかかわらず、
sliderの名がついていないコンセプトがsliderになっている
→conseptがfvと一が重なってしまってるとしか考えられていません

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2021/08/25 21:30

HTMLが半端なのでコピペで動作確認ができないと思います。 全部提示できないのでしたら必要箇所のみ文法に間違いのない形でコピペで提示してください。
free_teku
free_teku

2021/08/26 00:22

修正しました。 m.tsさんは動作確認のツールはどんなのを使っているのでしょうか? ご回答いただけると幸いです また、こちらの件に関してのご回答もいただけると幸いです!

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。