メニューを縦に表示させたい

Question

リンク内容

上記のホームページみたいにパソコンで表示する際はメニューバーが縦、スマホで表示させたいときは横になるようにしたいのですが、どうしたらいいですか？

Comments

[Orlofsky]

URLは https://teratail.com/help/question-tips#questionTips3-7 の [リンク] で
[リンク先の説明](http...) に修正してください。

Answer 1

いろいろな方法がありますが、リンク先のページではメディアクエリを使ってPCとスマホでheaderのサイズを変更していますね。

header {
    width: 15%;
    position: fixed;
    background: #fff;
    height: 100vh;
    display: block;
}

@media screen and (max-width: 750px)
header {
    width: 100%;
    height: auto;
}

header内の要素の並びは、フレックスボックスを使ってPCは幅を100%でたて1列に、スマホでは幅20%にして横並びになるようにしてます。

chromeなどのデベロッパーツールの使い方を覚えると簡単に確認できます。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

Comments

[gemfighter]

有難うございます！
これで上手くいきそうです！