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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

受付中

headerの固定がレスポンシブのみにしたいが、したらPC版でも消えた

free_teku
free_teku

総合スコア1

CSS3

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0回答

-1評価

0クリップ

243閲覧

投稿2021/08/08 13:58

編集2022/01/12 10:55

前提・実現したいこと

1レスポンシブ対応でpositoion: fixedをheader-fixed親要素に適用したい
2conseptもslider対応になっている。

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

1headerがpc盤でも適用されない. 2.sliderの子要素はliタグで囲んだimg要素だけなのになぜかconseptセクションもsliderに反応している。

該当のソースコード

HTML

<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>

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: 1; } @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; } /*ボタン*/ .burger-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .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; } }

試したこと

header-fixedを消して、fixedをリセットしようとしたら、全て消えた。
@include OverTab{}を確認しfixedがレスポンシブ対応飲みに対応しているかを確認済み

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。