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

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

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

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

解決済

メニューの並びをレスポンシブで変えたい

macha_monaka
macha_monaka

総合スコア1

HTML5

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

2回答

0グッド

0クリップ

173閲覧

投稿2022/11/30 14:06

前提

HTMLとCSSのみでHPを作成しています。
初歩的なことですが何度やってもうまくいかず、ご教示いただけますと嬉しいです。

実現したいこと

HPのメニューを横一列から縦2列横4行になるようにレスポンシブ対応させたい。

PCだと以下並び
メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 メニュー6 メニュー7 メニュー8

スマホになったときに以下のように並べたい
メニュー1 メニュー2
メニュー3 メニュー4
メニュー5 メニュー6
メニュー7 メニュー8

<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> <li><a href="#">メニュー7</a></li> <li><a href="#">メニュー8</a></li> </ul> </nav>

PC時のCSS
header nav li {
padding-left: 30px;
padding-right: 30px;
display: inline;
}

試したこと

flex-wrap: wrap; で折り返すCSSを見かけたのですが
リストタグを使用しているからなのかうまく反映できませんでした

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

2

flexboxを利用するのはいかがでしょうか?

html

1<header class="header"> 2 <nav class="nav-container"> 3 <ul class="nav"> 4 <li class="nav__item"><a href="">メニュー1</a></li> 5 <li class="nav__item"><a href="">メニュー2</a></li> 6 <li class="nav__item"><a href="">メニュー3</a></li> 7 <li class="nav__item"><a href="">メニュー4</a></li> 8 <li class="nav__item"><a href="">メニュー5</a></li> 9 <li class="nav__item"><a href="">メニュー6</a></li> 10 <li class="nav__item"><a href="">メニュー7</a></li> 11 <li class="nav__item"><a href="">メニュー8</a></li> 12 </ul> 13 </nav> 14</header>

css

1/*================================================== 2 3** Reset CSS 4==================================================*/ 5*, 6*::before, 7*::after { 8 margin: 0; 9 padding: 0; 10 box-sizing: border-box; 11} 12 13li { 14 list-style: none; 15} 16 17/*================================================== 18 19** Header 20==================================================*/ 21/* スマホの時の見た目 */ 22.nav { 23 /* ulをflexにする */ 24 display: flex; 25 /* 子要素の折り返しをする */ 26 flex-wrap: wrap; 27} 28 29.nav__item { 30 /* 1つのliの横幅は、親要素の半分(横2つに並べるため) */ 31 width: 50%; 32 padding: 0.5em 1em; 33 text-align: center; 34} 35 36/* PCのときの見た目 */ 37/* 画面の横幅何px以上の時、PCの見た目にするのかは、お好みで。 */ 38@media screen and (min-width: 720px) { 39 .nav { 40 /* PCの時は折り返ししない */ 41 flex-wrap: nowrap; 42 } 43}

投稿2022/11/30 14:48

Cocode

総合スコア2113

spoofy_dragon, macha_monaka👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

macha_monaka

2022/12/01 13:00

丁寧にサンプルまで提案していただきありがとうございます! コメント入れていただいたのがとてもわかりやすかったです。 おかげさまで無事解決できました(o^^o)

1

ベストアンサー

Flexboxレイアウトを使うのが一般的です。

ブレークポイントとか不明なので適当にコード例を書いてみました。

css

1header nav ul { 2 display: flex; 3 list-style: none; 4 padding-left: 0; 5 justify-content: space-between; 6 flex-wrap: wrap; 7} 8header nav ul li { 9 text-align: center; 10 width: 50%; 11} 12@media screen and (min-width: 900px) { 13 header nav ul { 14 flex-wrap: nowrap; 15 } 16}

詳細は下記などで学習してください。

Flexbox の基本的な使い方

最近はGridレイアウトもよく使われますね。

css

1header nav ul { 2 list-style: none; 3 padding-left: 0; 4 display: grid; 5 grid-template-columns: repeat(2, 1fr); 6} 7header nav ul li { 8 text-align: center; 9} 10@media screen and (min-width: 900px) { 11 header nav ul { 12 grid-template-columns: repeat(8, 1fr); 13 } 14}

CSS Grid(display:grid)の使い方

投稿2022/11/30 14:32

編集2022/11/30 14:55
hatena19

総合スコア32005

spoofy_dragon😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

macha_monaka

2022/12/01 12:58

ありがとうございます!! 教えていただいたFlexboxレイアウトのやり方で無事解決しました。 すぐに回答いただけてとても助かりました。Gridレイアウトも勉強してみます。 本当にありがとうございましたm(_ _)m

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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