レスポンシブサイトをつくる際、下図のようなヘッダーのデザインの場合、いつもタブレットサイズの時きれいに表示できず、@mediaqueryを多発してしまい、スタイルシートが長くなってしまいます。
そこでみなさんなら下図のようなデザインの場合どういったコードを書かれるのでしょうか?
参考にしたいので教えてもらえると助かります。
###自分が作成したさいのコード
html
<header class="scrollheader"> <div class="headarea"> <h1><span class="left_block head-logo"><img src="#" alt="ロゴ"></span></h1> <p class="contact-linkarea"> <a class="contact" href="">ツイッター</a></p> <p class="contact-linkarea"> <a class="webbooking" href="">フェイスブック</a> </p> <div class="head-rightarea right_block"> <nav class="nav"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </nav> </div> </div> </header>
css
.scrollheader{ position: fixed; top:0; width:100%; display: none; background:#fff; height:110px; z-index:1000; } .headarea{ width:100%; max-width:1080px; margin:0 auto; overflow: hidden; position: relative; } .head-logo{ max-width:230px; width:100%; margin-top:20px; } p.contact-linkarea{ display: inline-block; position: absolute; top:19px; right:158px; } p.contact-linkarea:nth-child(2){ right:0px; color:#270000; } .contact-linkarea a{ color:#fff; padding: 15px 60px; background: url('img/common/btn_reserve.jpg') 0 0 no-repeat; } .contact-linkarea:nth-child(2) a{ color: #270000; padding: 15px 38px; background: url('img/common/btn_contact.jpg') 0 0 no-repeat; } nav ul li a{ color: #270000; } .pageheader .nav ul li a{ color:#fff; text-shadow: 2px 1px 1px #999999; } .head-rightarea{ margin-top:80px; } .nav ul{ overflow: hidden; } .nav ul li{ float: left; margin:0 8px; overflow: visible; font-size: 1.6rem; } .nav ul li:last-child{ margin:0 0 0 8px; } .nav ul li a{ position: relative; padding:0 3px; } @media screen and (max-width:1048px){ .nav ul li{ margin:0 5px!important; } .nav ul li a{ font-size:15px; padding:0!important; } } @media screen and (max-width:931px){ .nav ul li a{ font-size:12px; } } @media screen and (max-width:809px){ .scrollheader{ display: none!important; } }
回答1件
あなたの回答
tips
プレビュー