レスポンシブなヘッダーを作成したい

画面幅に綺麗に収まるレスポンシブなヘッダーを作成したいのですが、どうやってCSSを記述すれば良いか分からず困っており、どなたかご教示いただけないでしょうか？

現状、画面幅を狭めると以下のような状態になってしまい、メニューの一部が切れてしまう状況です。

ちなみにコードは以下のような記述をしています。 .header-item ul { gap: 64px;} ; をピクセルで指定していますが、パーセントで指定すると、ナビゲーションのメニューが右にズレて見えなくなってしまいます。.header-item ul li + li { margin-left: 24%;}という方法も試してみたのですが、同じように右側にズレて見えなくなってしまいました。

ヘッダーの左右に27px（右）、40px（左）という幅を保ちつつ、ロゴとナビゲーションが画面幅に綺麗に収まるようにしたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11
12<header class="header-item">
13  <div class="logo">
14    <a href="#"><h1>LogoLOGO</h1></a>
15  </div>
16  <nav>
17    <ul>
18      <li><a href="#">About</a></li>
19      <li><a href="#">Staff</a></li>
20      <li><a href="#">Menu</a></li>
21      <li><a href="#">Blog</a></li>
22      <li><a href="#">Access</a></li>
23    </ul>
24  </nav>
25</header>
26
27</body>
28</html>

CSS
1.header-item {
2  display: flex;
3  justify-content: space-between;
4  max-width: 1280px;
5  margin: 0 auto;
6  padding: 0 27px 0 40px;
7  color: #FFFFFF;
8 }
9 
10 .header-item .logo {
11   font-size: 10px;
12 }
13
14 .header-item ul {
15  display: flex;
16  gap: 64px;
17}

恐れ入りますが、どなたか実現する方法を教えていただけないでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

メニュー自体の幅があるから、画面幅が狭くなるとはみ出るけど、どうのようにしたいのでしょうか。
要素間の間隔(gap)を小さくして対応したいということでしょうか。
だとしたら、gapで間隔を取るのはやめて、justify-content: space-between;で間隔を空けるようにすればどうでしょう。
navに max-width を適切に設定しておけば、画面幅が広いときは無駄に間隔が広がらずに、狭くした時は間隔が狭くなるようになります。

css
1.header-item nav {
2  width: 100%;
3  max-width: 510px;
4}
5.header-item ul {
6  display: flex;
7  justify-content: space-between;
8  flex-wrap: wrap;
9  list-style: none;
10}

投稿2021/12/19 08:29

総合スコア34075

2021/12/19 11:53

反応遅くなってしまい大変申し訳ございません!! 情報提供いただき、本当にありがとうございます!! 教えていただいた方法で無事解決することが出来ました! 本当にありがとうございますm m

行動規範の内容に同意します

こんな風にしてみてはいかがでしょうか。

背景色は見やすいよう黒にしてありますので、変えてください。

私から言えることとしては、あまりpx表示を使用することはおすすめされません。
px表示はどの端末に対しても同じように適用されてしまうので、スマートフォンのような幅の小さいデバイスでみると、27pxといっても結構な幅になりますので、できるだけ%表示等を使うことをお勧めします。

下記のコードは要望通り27px、40pxとしていますのでご安心ください。

html
1<header>
2      <ul>
3    <a href="#"><h1 style="display: inline">LogoLOGO</h1></a>
4      <li><a href="#">About</a></li>
5      <li><a href="#">Staff</a></li>
6      <li><a href="#">Menu</a></li>
7      <li><a href="#">Blog</a></li>
8      <li><a href="#">Access</a></li>
9    </ul>
10</header>

css
1
2
3header {
4    background-color: black; /*背景色*/
5    padding: 0px 40px 0px 27px; /* ヘッダーに上下左右それぞれ余白を指定 */
6    width: 100%;
7    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
8    position: fixed; /* ウィンドウを基準に画面に固定 */
9    top: 0; /* 上下の固定位置を上から0pxにする */
10    left: 0px; /* 左の固定位置を左から27pxにする */
11    align-items: center; /* 中の要素を上下中央に並べる */
12}
13
14header li {
15   display: inline-block; /* 中の要素を横並びにする */
16}
17
18header h1 {
19  font-size: 16px; /* 右のaタグと合わせておきました */
20}
21

投稿2021/12/19 07:53

child_raccoons

総合スコア9

juke-footwork

2021/12/19 08:18

ご回答、ありがとうございます! 感謝ですm m 私のお伝えの仕方が悪くて大変恐縮なのですが、・デフォルト時、ロゴとナビゲーションメニューのリストに間隔がある状態にしたい（ナビゲーションメニューが右側に移動して、一番右のナビゲーションメニューの「Access」の右側に40pxの余白がある状態にしたい）・ナビゲーションメニューのリストそれぞれに余白を設定したい（Staff〜Accessまでの4つのリストの左側に、画面幅に応じて変わるよう、%で余白を設定したい）こちらも追加で実現したいのですが、可能なものでしょうか..？度々大変恐れ入りますが、もしお時間ご都合よろしければで構いませんので、教えていただけますと幸いです。