PCの1440px幅でもスマホの390px幅でも崩れていないのに、ノートPC幅でだけナビが2行に割れる。こうした「中間幅だけの崩れ」は、min-widthとmax-widthで幅の帯を区切り、その帯の中だけナビを詰めるメディアクエリで直せます。この記事では、当社サイトのナビが861〜1180pxでだけ折り返していた問題を、帯を2段に分けて実測しながら解消した手順を紹介します。
背景: 確認した幅では崩れていなかった
当社サイトのヘッダーナビは、860px以下でハンバーガーメニューに切り替わり、861px以上で項目を横一列に並べる作りです。
PC(1440px)とスマホ(390px)の表示は問題ありませんでしたが、ナビ項目にHOMEを足して8項目にしたあと、その間の幅で問題が起きていました。
- 幅861〜1180px程度で8項目が1行に収まらない
- TECH-BLOGの文字が2行に折り返す
- 右端のCONTACTが画面からはみ出して欠ける
この帯はちょうど一般的なノートPCやタブレット横向きの幅にあたります。1440pxと390pxだけを見ていると、まず気づけません。
対応1: 861〜1180pxの帯だけを詰める
PC幅の見た目は変えたくないので、全体の指定は触らず、崩れる帯だけに効くメディアクエリを追加しました。
@media (min-width:861px) and (max-width:1180px){
/* ノートPC幅: 8項目が1行に収まるように詰める(折り返し・右端欠け防止) */
.nav{padding-left:24px; padding-right:24px}
.menu{gap:14px; font-size:11px; letter-spacing:.1em}
.menu li{white-space:nowrap}
.logo img{height:17px}
}やったことは4つです。
- ナビの左右余白を40pxから24pxへ
- 項目の間隔(gap)を26pxから14pxへ、文字サイズを11.5pxから11pxへ、字間を.18emから.1emへ
white-space:nowrapで、項目名自体が途中で折り返さないように固定- ロゴの高さを20pxから17pxへ
下限を861pxにしているのは、860px以下がハンバーガーメニューの担当だからです。帯の境界をハンバーガー側のmax-width:860pxとぴったり接するように取ると、どちらの指定も効かない幅が生まれません。
なお当社サイトはトップページ用のインラインCSSと、下層ページ共通のCSSファイルの2か所にナビの指定があるため、同じ指定を両方に入れています。
ハマりポイント: 帯の下端ではまだ18pxはみ出す
対応1を反映して1024pxで確認すると1行に収まっていましたが、帯の下端に近い870px(ハンバーガーに切り替わる直前)で測ると、ナビの右端がまだ18pxはみ出していました。
帯を1つにして「一番狭い幅に合わせて詰める」と、1180px付近では詰めすぎた見た目になります。そこで、もっと狭い861〜960pxの帯を2段目として追加し、そこだけさらに詰めることにしました。
@media (min-width:861px) and (max-width:960px){
.menu{gap:10px; font-size:10.5px; letter-spacing:.06em}
}2段目は1段目と同じmin-width:861pxから始まるので、861〜960pxでは両方のメディアクエリが当たり、後に書いた2段目の値が上書きします。余白・nowrap・ロゴの高さは1段目のものがそのまま効いています。
検証: 帯の中と境界の両方を測る
反映後は、帯の中の代表的な幅に加えて、帯の切れ目の幅でも確認しました。
- 870px: 1行に収まり、ナビの右端は836px(画面幅870px内)
- 1024px: 1行に収まり、右端は990px(画面幅1024px内)、ロゴは17px
- 961px(2段目が外れる最初の幅)と1181px(1段目が外れる最初の幅): どちらも1行
帯を区切る設計では、切れ目の直後の幅が一番危険です。たとえば961pxは「2段目の詰めが外れたのに、まだ十分に広くない」幅なので、ここで1行に収まることを確認して初めて安心できます。
同じ型の崩れ: ボタンが縦に落ちる
同じ日に、製品紹介ページでも中間幅だけの崩れが見つかりました。カードが2列表示のまま幅が狭くなる861〜970px前後で、カードの文章列がApp Store/Google Playのボタン2つ分(266px)より狭くなり、ボタンが縦に落ちていました。1440px・1024px・390pxでは横並びのままです。
こちらも、崩れる帯だけでボタン行をアイコンの下まで広げる指定を足して直しました。
@media (min-width:861px) and (max-width:1000px){
.pr-card--apps .pr-links{margin-left:-110px}
}900pxと965pxで横並びになることを実測しています。原因も直し方も、ナビと同じ「中間の帯だけで起きて、帯だけで直す」型でした。
まとめ
- PCとスマホの2幅だけの確認では、その間の帯(当社では861〜1180px)の崩れを見落とします。
min-widthとmax-widthで帯を区切れば、PC幅の見た目を変えずに崩れる幅だけを直せます。下限はハンバーガー側の上限とぴったり接するように取ります。- 1つの帯で直しきれないときは、狭い側に2段目の帯を重ねて段階的に詰めます。
- 検証は帯の中だけでなく、帯が外れる直後の幅(当社では961px・1181px)でも行います。
固定ヘッダーまわりの小さな改善としては、アンカーリンクが固定ヘッダーに潜る問題をscroll-margin-topで解決する方法も紹介しています。
Webサイトの構築や、こうした細部の設計のご相談は、SERVICESからお気軽にどうぞ。
← TECH-BLOG一覧へ