Q&A
header_text,header_text2の文字サイズは画面幅で変更されているように見えます。
メディアクエリの指定も反映されているようですし、画面をキャプチャして質問に貼り付けてもらうなど課題を明確にしてもらったほうが良いかと思います
それとグローバルナビとハンバーガーメニューが機能的に二重に設置されているのはやや違和感があります
実現したいこと
ステッキーヘッダーにpcメニューを追加したが、cssが原因と思われるレイアウト崩れが直らない。
650px以下でもこちらの意図とする制御をしたい
発生している問題・分からないこと
650px以下で 親要素<"header_logo">の中にある.header_logo.imgの右側に余計な余白ができる。親要素<"header_right">内の <"header_text"><"header_text2">の文字が、ブラウザが縮小時にcssに書いたとおりに文字が小さくならない。グーグルの検証画面だと、cssに線が引かれ反映していない。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>シティーサーチ株式会社｜シティーサーチバス・トップページ</title> 6<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<meta name="google-site-verification" content="NPiLvcc6pvLlk_gAsJjOhlvkCc1P8E1sHJY3hCJLnlg" /> 8<meta name="description" content="札幌、千歳、小樽等でバス事業(貸切、企業の送迎、スクールバス、福祉送迎)を中心に、商用車のリース・レンタル業やITサービス分野も展開をしている会社です。"> 9<link rel="canonical" href="https://city-search.jp"> 10<link rel="icon" href="favicon.ico"> 11<link rel="apple-touch-icon" href="icon.png"> 12 13<link rel="stylesheet" href="css/style.css"> 14<link rel="stylesheet" href="css/sticky_header.css"> 15<link rel="stylesheet" href="css/globalmenu.css"> 16<link rel="stylesheet" href="css/slide.css"> 17<link rel="stylesheet" href="css/top_page.css"> 18<script src="js/slide.js"></script> 19<script src="js/sticky_header.js"></script> 20<script src="js/city_search.js"></script> 21</head> <body> 22<header> 23 <div class="header_top"> 24 <div class="header_logo"> 25 <a href="https://city-search.jp"><img src="img/city-search_06.png" alt="logo"></a> 26 </div> 27 <div class="header_right"> 28 <div class="header_text">シティーサーチ株式会社</div> 29 <div class="header_text2">ITサービス・貸切バス・商用車のリースなどを行う会社です。</div> 30 </div> 31 <div class="navToggle"> 32 <span></span><span></span><span></span><span>menu</span> 33 </div> 34 </div> 35 <div class="header_bottom"> 36 <div class="pc_menu"> 37 <ul> 38 <li><a href="https://city-search.jp">ホーム</a></li> 39 <li><a href="company.html">会社概要</a></li> 40 <li><a href="privacy.html">プライバシーポリシー</a></li> 41 <li><a href="bus_toppage.html">貸切バス各種紹介ページ</a></li> 42 <li><a href="scene.html">札幌・北海道各地での貸切バスの使い方・用途別に解説</a></li> 43 <li><a href="https://city-search.jp/public_html/index.php">お問い合わせ</a></li> 44 </ul> 45 </div> 46 </div> 47</header> 48 49<nav class="globalMenuSp"> 50 <ul> 51 <li><a href="https://city-search.jp">ホーム</a></li> 52 <li><a href="company.html">会社概要</a></li> 53 <li><a href="privacy.html">プライバシーポリシー</a></li> 54 <li><a href="bus_toppage.html">シティーサーチ・貸切バス各種紹介ページへのご案内</a></li> 55 <li><a href="scene.html">札幌・北海道各地で貸切バスはどんなときに使う？用途別にわかりやすく解説</a></li> 56 <li><a href="#">商用車・建設車リース</a></li> 57 <li><a href="#">自動車整備工場</a></li> 58 <li><a href="https://city-search.jp/public_html/index.php">お問い合わせ</a></li> 59 </ul> 60</nav> 61 62<div class="dummy"></div> 63 64<section> 65<div class="top_slide"> 66 <div class="slide"> 67 <ul> 68 <li> 69 <a href="bus_toppage.html"><img src="img/2357486_kankouao_1000.jpg" alt="Slide 1" /><div class="text-overlay">あなたの『こんな旅をしたい』を形にします。</div></a> 70 </li> 71 <li> 72 <a href="bus_toppage.html"><img src="img/1679585_1000.jpg" alt="Slide 2" /><div class="text-overlay">旅行や学校、会社の送迎…</div></a> 73 </li> 74 <li> 75 <a href="bus_toppage.html"><img src="img/1339937_1000.jpg" alt="Slide 3" /><div class="text-overlay">様々な場面にお使いください。</div></a> 76 </li> 77 <li> 78 <a href="https://city-search.jp"><img src="img/625842_1000.jpg" alt="Slide 4" /></a> 79 </li> 80 <li> 81 <a href="https://city-search.jp"><img src="img/3025924_1000.jpg" alt="Slide 5" /></a> 82 </li> 83 </ul> 84 </div> 85</div> 86</section> 87<section> 88<div class="menu_overlay"></div> 89<div class="contents"> 90 <div class="kijibox"> 91 <div class="kiji_link"> 92 <span><a href="">挨拶</a><br/></span> 93 1992年創業、今年で34年になります。<br/> 94 当社は、札幌、千歳、小樽等でバス事業(貸切、企業の送迎、スクールバス、福祉送迎)を中心に、<br/> 95 商用車のリース・レンタル業やITサービス分野も展開をしている会社です。<br/> 96 私たちの企業理念において安全輸送を第一の使命としています。<br/> 97 社員一人一人が自らの責任と役割を果たし、地元地域やお客様からの信頼に応え、<br/> 98 今後も信頼される会社として活動してまいります。 99 <br><br> 100 </div> 101 <div class="kiji_link"> 102 <strong><a href="https://city-search.main.jp/shop_demo_site/" target="_blank">shop_demo_site<br> 103 サイトを更新できない・売れない原因を改善するWebサポート</a></strong><br> 104 <p>ECサイトの出品、店舗の相談も賜ります。</p><br> 105 </div> 106 107 <div class="kiji_link"> 108 <strong><a href="https://city-search.main.jp/shop_demo_site/for_work/" target="_blank">shop_demo_site<br> 109 Webサイト（ホームページ）を更新できない方へ｜古いサイトを修正・改善・運用代行</a></strong><br> 110 <p>20年以上前の古いデザインのwebサイト（ホームページ）をワードプレスのスマホ対応サイトに作り直した実績あり！</p> 111 </div> 112 </div> 113 114 <div class="kita_side_nav"> 115 <div class="link"> 116 <a href="scene.html">子供達の学校行事・部活動の遠征等の安全のために私たちができる取り組み</a><br/> 117 学校行事・部活動等の遠征用のバスの事故が全国的に相次いでいます。<br/> 118 学校が自家用車、またはレンタカーを使い、運転は、部活動顧問、保護者、<br> 119 ボランティアなどに任せているケースが多く見受けられます。<br> 120 中には本業で多忙を極め、過労状態で運転している部活動顧問の教員もいます。<br> 121 学校行事や部活動の送迎にあまりお金をかけられない中で行われているとはいえ、<br> 122 果たして安全と言い切れるのでしょうか？<br><br> 123 私達は、安全はお金には代えられないと思っています。<br><br> 124 かけがえのない子供達の命を守るためにも、整備が行き届き、きちんと研修を受けた<br> 125 職業運転手が乗務する、事業者のバスをお使いいただきたいと考えております。 126 </div> 127 </div> 128</div> 129</section> 130<footer> 131 <div class="footer_top"> 132 <div class="footerbox"> 133 <div class="footer_kita_menu"> 134 <ul> 135 <li class="kita_menu"><a href="https://city-search.jp">ホーム</a></li> 136 <li class="kita_menu"><a href="company.html">会社概要</a></li> 137 <li class="kita_menu"><a href="privacy.html">プライバシーポリシー</a></li> 138 <li class="kita_menu"><a href="bus_toppage.html">シティーサーチ・貸切バス各種紹介ページへのご案内</a><br> 139 <button class="accordion"> 140 <span class="arrow">▶</span> 141 </button> 142 <ul class="submenu"> 143 <li><a href="./busses/sp_highdecker.html">貸切バスの紹介・大型車スーパーハイデッカー12m</a></li> 144 <li><a href="./busses/highdecker.html">貸切バスの紹介・大型車ハイデッカー12m</a></li> 145 <li><a href="./busses/highdecker_9m.html">貸切バスの紹介・大型車ハイデッカー9m</a></li> 146 <li><a href="./busses/microbus.html">貸切バスの紹介・マイクロバス</a></li> 147 <li><a href="./busses/minibus&jumbo_taxi.html">貸切バスの紹介・ミニバス＆ジャンボタクシー</a></li> 148 </ul> 149 </li> 150 <li class="kita_menu"><a href="scene.html">札幌・北海道各地で貸切バスはどんなときに使う？用途別にわかりやすく解説</a></li> 151 <li class="kita_menu"><a href="https://city-search.jp/public_html/index.php">お問い合わせ</a></li> 152 </ul> 153 </div> 154 </div> 155 </div> 156 <div class="footer_text"> 157 <p><a href="#">Copyright City Search©2026 All rights Reserved.</a></p> 158 </div> 159</footer> 160</body> 161</html> 162ネット上にすでにアップしています。urlは、https://city-search.jp/ 163グーグルの検証画面のソースコードです。 164view-source:https://city-search.jp/ 165問題となっているcssは以下のページです。 166https://city-search.jp/css/sticky_header.css 167以下関連cssです。 168https://city-search.jp/css/style.css 169https://city-search.jp/css/globalmenu.css 170https://city-search.jp/css/slide.css 171https://city-search.jp/css/top_page.css 172以下は、ステッキーヘッダーを動作するjsです。 173https://city-search.jp/js/sticky_header.js 174以下はこのページの関連jsです。 175https://city-search.jp/js/slide.js 176https://city-search.jp/js/city_search.js 177### 試したこと・調べたこと 178- [ ] teratailやGoogle等で検索した 179- [x] ソースコードを自分なりに変更した 180- [ ] 知人に聞いた 181- [ ] その他 182##### 上記の詳細・結果 183header_top、pc_menuを廃止、htlmの構成をシンプルに。header直下で、header_logo header_right 184、navToggle、pc_menuを制御。 display: flex; flex-wrap: wrap; で子要素を管理するようにした。 185相変わらず650px以下で 親要素<"header_logo">の中にある.header_logo.imgの右側に余計な余白ができる。親要素<"header_right">内の <"header_text"><"header_text2">の文字が、ブラウザが縮小時にcssに書いたとおりに文字が小さくならない。この部分は変わらない。問題解決方法を知りたいです。 186**ボールドテキスト** 187 188検証画面header_textのcssが反映されていないときの画面。画面幅は480pxで撮影。 189 190検証画面header_text2のcssが反映されていないときの画面。画面幅は480pxで撮影。 191 192追加画像 193 .header_logoの右の余白が広すぎて、右側の.header_rightを圧迫。ロゴの画像を大きくできない理由です。 194こちらは旧ファイル、PCメニューはスマホ画面なので非表示です。 .header_logoの右の余白は狭く、ヘッダー画像をやや大きくできます。 195 196
『検証画面header_rightでは、width、max-widthも反映していません』とのことですが、ご提示のスクリーンショットでは、.header_right に max-width は指定されていないようでした。別の要素のことでしょうか？
また、「650px以下で 親要素<"header_logo">の中にある.header_logo.imgの右側に余計な余白ができる。」とのことですが、650pxと651pxで比較してみたのですが、.header_logo.imgの右側の余白に大きな差はない（むしろ650pxの時の方が余白は小さい）ようなのですが、650pxの時の右側の余白について、想定していた幅はどの程度だったのでしょうか？
pcメニューは後づけでして、追加後にヘッダーの縦の寸法が長くなりすぎるので高さを圧縮。構造が変わりました。改修まえは、.header_logoの余白は今ほど大きくなかったのです。同じように作ろうとしたのですが、余白が.header_rightに干渉して右に圧迫していくことは想定外でした。改修前の旧ファイルと比較可能ならよいのですが。画像を再度アップします。
質問の編集拝読。
追加されたスクリーンショットを拝見しましたが、回答は変わらないです。余白が増えたように見えるのは、widthの値が変わったからかと思います。
---
なお、おそらくMarkdownの書式を誤っているかと思います。そのため、スクリーンショットが表示されていません。
編集時の確認ビューで編集結果を確認しながら作業をされるといいかと思います。
コメントありがとうございます。今、色々調べていまして、ヘッダーを1段から2段にしたときに縦の寸法を圧縮したのが原因ではないか？というところまで来ています。増えすぎたcssが600行を超えていて、現在、cssのコードを最小限にできないか、編集を行っています。多分、いまのロゴが小さいのは変える方法がないような気がしています。
回答2件
0
1. ロゴ右側の余白について
余白の正体は、img自体ではなく親の.header_logoの余りではないかと思います。650px以下では.header_logoがwidth: 44%で幅を確保している一方、中のimgはmax-width: 35%(=44%幅コンテナのさらに35%)しか使っていないため、コンテナの残りが空白として見えている状態です。
中央寄せにしても左右に余白が残ったと書かれているのも、箱自体が広いので画像をどこに寄せても余りが消えない、という同じ理由だと思います！
対処としては、コンテナ側の%指定をやめて中身にフィットさせるのが良いと思います！
css
1.header_logo { 2 flex: 0 0 auto; 3 width: auto; 4} 5.header_logo img { 6 height: 48px; /* 高さ基準にして幅は自動 */ 7 width: auto; 8 max-width: none; 9} 10.header_right { 11 flex: 1; 12 min-width: 0; 13}
2. 文字サイズが反映されないことについて
こちらは補足に書かれている通り、!importantが原因だと思います！。650pxのメディアクエリ内のfont-size: 11px !importantが、より狭い幅(560px / 520px / 470px)の!importantなしの指定に必ず勝ってしまうため、480pxで検証すると取り消し線が付いていたのだと思います。すでに!importantを消して解決されているようなので、方向性は合っています!
メディアクエリは詳細度が同じなら後に書いたほうが優先されるで、!importantに頼らず幅の広い順→狭い順に記述するのがおすすめです。あるいはfont-size: clamp(8px, 2.5vw, 14px)のようにclamp()を使うと、ブレークポイントごとの指定自体を大幅に減らせます。
他に気になったこととしてsticky_header.css冒頭のセレクタにカンマ抜けがあります
css
1header.sticky .header_top, 2header.sticky .header_right /* ← ここにカンマが必要 */ 3header.sticky .header_bottom { ... }
投稿2026/08/06 02:18
編集2026/08/06 02:19
総合スコア108
0
スクリーンサイズが650pxの時、以下のようなスタイルが適用されているようです。
css
1.header_logo { 2 width: 44% !important; 3 margin-top: 0 !important; 4} 5 6.header_logo img { 7 width: 45% !important; 8 max-width: 35% !important; 9 height: auto !important; 10 margin: 3% 0 0 2% !important; 11}
ですので、.header_logoの幅は650*.44=286で286px、imgの幅は286*.35=100.1で100.1pxになるかと思います。.header_logoのコンテンツはimgだけなので、286-100.1=185.9で185.9pxの余白が生まれることになります。
ただ、補足依頼欄にも書きましたが、このあたりのスタイルは値は変わるもののスクリーンサイズ651pxでも同様ですので、「650px以下」に限った話ではないです。もし、「余白というのはその部分の話ではないよ」ということであればお知らせください。
投稿2026/08/06 02:17
総合スコア37795
あなたの回答
tips
プレビュー
