みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HTML5とCSS3のレスポンシブデザインについて

今、wordpressでHTML5とCSS3のレスポンシブデザインに独学で、挑戦しています。
タグを手書きで書いているのですが、分からない点があります。

▼MENU▼というメニューバーは、PCでは見えない状態にしたいのですが、なかなか上手く行かず、PCで見えてしまいます。
display:none;にしたりして。ブラウザで確認したりしましたが、ずっと見える状態になってしまいます。
どこか間違いのタグがあるのでしょうか??
教えていただけると嬉しいです(●^o^●)

↓ナビゲーションバーのタグ↓(PC)
#menu ul{
width:100%;
margin:0;
padding:0;
color:#000;
background:#000;
}
#menu li{
list-style:none;
border-top:2px solid #FFF;
}
#menu li a{
padding:16px 20px;
display:block;
text-decoration:none;
background:#000;
color:#FFF;
}
.togmenu{
padding:16px 20px;

}

↓PCでは非表示になるはずのMENU↓(PC)
.menubtn{
display:block;
background:#000;
color:#FFF;
}
↓スマホで表示されるタグ↓
@media only screen and(min-width:500px){
.menubtn{

}
.togmenu{
display:none;
background:#000;
}
#menu li{
display:inline-block;
border:none;
}
}

★上記のレスポンシブデザインで制作中のサイトURL★
http://fashioncode.jp/

投稿日時 - 2014-01-13 21:11:11

QNo.8428468

すぐに回答ほしいです

質問者が選んだベストアンサー

そもそも「500px以下の記述する場所」の記述自体も間違ってますね。
500px以内なんだから「最大幅が500px」です。
min-widthではなくmax-width
@media only screen and (max-width: 500px)

投稿日時 - 2014-01-16 10:58:16

補足

そうですね…。ご指摘ありがとうございます。
アコーディオンメニューは、出来そうにないので、自力で頑張ろうと思います。丁寧なご回答ありがとうございました。

投稿日時 - 2014-01-16 21:33:06

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

> ↓PCでは非表示になるはずのMENU↓(PC)
> .menubtn{
> display:block;
> background:#000;
> color:#FFF;
> }

単純に.menubtnを消してないですよね。
display:block;が入ってるし。

上記のdisplay:block;をdisplay:none;に変更して、
500px以下の記述の場所に.menubtn{display:block;}を入れるといいと思います。

投稿日時 - 2014-01-15 12:00:17

補足

回答ありがとうございます。

display:none;にして、500px以下の記述する場所に、menubtn{display:block;}と書いたら、パソコンでは表示されなくなりよかったものの、スマホでも表示されないようになりました。
スマホでは、アコーディオンメニューみたいにして表示したいのですが………(>_<)

投稿日時 - 2014-01-15 20:35:02

あなたにオススメの質問