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

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

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

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

2887閲覧

display:block;にしているが表示されない

NDvP2OWLAoccEfQ

総合スコア24

CSS3

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2020/04/17 08:34

レスポンシブでwidthが768px以下のときに.navbar_toggleをdisplay: block;
にしているのですが、表示されません。

試しに、このdisplay: block;を削除すると、もちろんpc版の時は表示されるのですが、なぜなのか768px以下になると表示されず、消えます。

コードは以下の通りです。⇓

html

1 <!-- header --> 2 <header> 3 <div class="header-in"> 4 <img src="../img/logo/logo.png" height="39" alt=""> 5 <nav> 6 <div class="navbar_toggle"> 7 <span class="navbar_toggle_icon"></span> 8 <span class="navbar_toggle_icon"></span> 9 <span class="navbar_toggle_icon"></span> 10 </div> 11 <div class="menu"> 12 <ul> 13 <li><a href="#card" class="card-top red active">Card</a></li> 14 <li><a href="#news" class="news-top red">News</a></li> 15 <li><a href="#price" class="price-top red">Price</a></li> 16 <li><a href="#access" class="access-top red">Access</a></li> 17 <li><a href="#contact" class="contact-top red">Contact</a></li> 18 </ul> 19 </div> 20 </nav> 21 </div> 22 </header> 23

scss

1// header 2header { 3 @include tekiou2($haikei); 4 position: fixed; 5 top: 0; 6 left: 0; 7 width: 100%; 8 z-index: 10; 9 font-family: "Lato", sans-serif; 10} 11 12.header-in { 13 max-width: 1200px; 14 padding: 40px 0; 15 display: flex; 16 justify-content: space-between; 17 align-items: center; 18 margin: 0 10vw; 19 position: relative; 20} 21 22ul { 23 display: flex; 24 list-style: none; 25 padding: 0; 26} 27 28li { 29 padding-left: 30px; 30 &:first-of-type { 31 padding: 0; 32 } 33 a { 34 @include tekiou($white); 35 font-size: 1.6rem; 36 } 37} 38 39//drawer 40 41.navbar_toggle { 42 display: none; 43 position: absolute; 44 top: 50%; 45 right: 30px; 46 transform: translateY(-50%); 47 .navbar_toggle_icon { 48 display: block; 49 height: 2px; 50 width: 30px; 51 background-color: #fff; 52 &:nth-child(2) { 53 margin: 10px 0; 54 } 55 } 56} 57 58.navbar_toggle_icon.open { 59 &:nth-child(1) { 60 transform: rotate(45deg); 61 } 62 &:nth-child(2) { 63 display: none; 64 } 65 &:nth-child(3) { 66 transform: rotate(-45deg); 67 } 68} 69

レスポンシブ⇓

scss

1@media screen and (max-width: 768px) { 2 3 // drawer 4 .navbar_toggle { 5 display: block; 6 } 7 ・・・ 8

ご回答いただければ幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

初めまして。
NDvP2OWLAoccEfQさんが貼っているコードをコピペして検証してみたところ、
問題なく768pxで表示切り替えができますね。。

あまり関係なと思いますが、キャッシュをクリアしてリロードしてみてはどうでしょうか。

的確な、回答ができず申し訳ございません。
あと、これも関係ないのですが、headerの背景?を変数にしてincludeしているなら、
メディアクエリも変数にしてあげれば、コードがスッキリして見やすくなると思います!

▼参考
https://designsupply-web.com/knowledgeside/4539/

投稿2020/04/17 09:16

編集2020/04/17 09:17
hosodaaaaa

総合スコア47

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NDvP2OWLAoccEfQ

2020/04/17 09:55

貼っていたコードは問題ないということだったので、もっと別のところを見ていたら display: noneがあたっていました。 そして別の点も親切に教えていただき、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問