レスポンシブCSSのヘッダー

Question

レスポンシブのCSSについて、少しわからない事があるので、ご教授お願いします。

以下、ヘッダーでのやりたいデザインです

スマホのとき
logo               | menuicon
-------------------------
textbox
-------------------------

PCのとき

logo| textbox
-------------------------
menutext menutext menutext
-------------------------

このような形にしたいときのCSSはどうしたら良いのでしょうか

スマホのとき
① ロゴを左寄せ　右寄せにメニューアイコンを置く（ハンバーガー）
② ロゴとメニューの下に伸びるテキストボックス

PCのとき
① ロゴを左寄せ　その右にテキストボックス
② メニューをテキストで何個か置く

初歩的な質問で申し訳有りませんが、ご教授お願いいたします。

Comments

[m.ts10806]

まず、自身で組んでみるところからでは。

Answer 1

レスポンシブいいんですが画面のサイズで判断することになるので注意が必要です。
(PCブラウザでも画面小さくすると適応されてしまう。)
普通は下記の様にPC用とモバイル用2つ作っておいた方が修正等楽です。

/* PC用 */
@media screen and (min-width: 481px) { 
  #PC {
    diplay:block;
  }
  #mobile {
    diplay:none;
  }
}
/* モバイル用 */
@media screen and (max-width: 480px) { 
  #PC {
    diplay:none;
  }
  #mobile {
    diplay:block;
  }
}

<div id="PC">PCではこちらが表示される</div>
<div id="mobile">モバイルではこちらが表示される</div>

Comments

[sayum]

ご回答ありがとうございます。
結果その方法に落ち着きました