質問編集履歴

旧ファイルの画像と比較できます。

2026/08/06 09:53

投稿

naaS

スコア7

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -5,10 +5,7 @@
 ### 発生している問題・分からないこと
 650px以下で 親要素<"header_logo">の中にある.header_logo.imgの右側に余計な余白ができる。親要素<"header_right">内の  <"header_text"><"header_text2">の文字が、ブラウザが縮小時にcssに書いたとおりに文字が小さくならない。グーグルの検証画面だと、cssに線が引かれ反映していない。
 ### 該当のソースコード
 ```html
 <!DOCTYPE html>
 <html lang="ja">
@@ -16,10 +13,8 @@
 <meta charset="utf-8">
 <title>シティーサーチ株式会社｜シティーサーチバス・トップページ</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="google-site-verification" content="NPiLvcc6pvLlk_gAsJjOhlvkCc1P8E1sHJY3hCJLnlg" />
 <meta name="description" content="札幌、千歳、小樽等でバス事業(貸切、企業の送迎、スクールバス、福祉送迎)を中心に、商用車のリース・レンタル業やITサービス分野も展開をしている会社です。">
 <link rel="canonical" href="https://city-search.jp">
 <link rel="icon" href="favicon.ico">
 <link rel="apple-touch-icon" href="icon.png">
@@ -29,13 +24,10 @@
 <link rel="stylesheet" href="css/globalmenu.css">
 <link rel="stylesheet" href="css/slide.css">
 <link rel="stylesheet" href="css/top_page.css">
 <script src="js/slide.js"></script>
 <script src="js/sticky_header.js"></script>
 <script src="js/city_search.js"></script>
 </head> <body>
 <header>
     <div class="header_top">
         <div class="header_logo">
@@ -101,7 +93,6 @@
     </div>
 </div>
 </section>
 <section>
 <div class="menu_overlay"></div>
 <div class="contents">
@@ -145,7 +136,6 @@
     </div>
 </div>
 </section>
 <footer>
     <div class="footer_top">
         <div class="footerbox">
@@ -176,12 +166,8 @@
         <p><a href="#">Copyright City Search©2026 All rights Reserved.</a></p>
     </div>
 </footer>
 </body>
 </html>
-```
-```
 ネット上にすでにアップしています。urlは、https://city-search.jp/
 グーグルの検証画面のソースコードです。
 view-source:https://city-search.jp/
@@ -192,42 +178,28 @@
 https://city-search.jp/css/globalmenu.css
 https://city-search.jp/css/slide.css
 https://city-search.jp/css/top_page.css
 以下は、ステッキーヘッダーを動作するjsです。
 https://city-search.jp/js/sticky_header.js
 以下はこのページの関連jsです。
 https://city-search.jp/js/slide.js
 https://city-search.jp/js/city_search.js
-```
 ### 試したこと・調べたこと
 - [ ] teratailやGoogle等で検索した
 - [x] ソースコードを自分なりに変更した
 - [ ] 知人に聞いた
 - [ ] その他
 ##### 上記の詳細・結果
 header_top、pc_menuを廃止、htlmの構成をシンプルに。header直下で、header_logo　header_right
 、navToggle、pc_menuを制御。 display: flex;  flex-wrap: wrap;  で子要素を管理するようにした。
 相変わらず650px以下で 親要素<"header_logo">の中にある.header_logo.imgの右側に余計な余白ができる。親要素<"header_right">内の  <"header_text"><"header_text2">の文字が、ブラウザが縮小時にcssに書いたとおりに文字が小さくならない。この部分は変わらない。問題解決方法を知りたいです。
-header_logo.imgを中央寄せにしても、左右に余計な余白が残った。
-### 補足
 **ボールドテキスト**
-早い連絡ありがとうございます。キャプチャーした画像をアップさせていただきます。
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/7d3b70f6-c891-4b7b-879f-053419448fbf.png)
 検証画面header_textのcssが反映されていないときの画面。画面幅は480pxで撮影。
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/b6fe205d-9d2f-4e0a-b5c2-76a7e62f09bf.png)
 検証画面header_text2のcssが反映されていないときの画面。画面幅は480pxで撮影。
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/350b4f06-d33e-4db3-a9d8-5f26599114d0.png)
 追加画像
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-06/7c42e298-400e-4730-86b7-e94f061f11a4.png)    .header_logoの右の余白が広すぎて、右側の.header_rightを圧迫。ロゴの画像を大きくできない理由です。
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-06/b5159c90-332a-4806-872a-55ccf6649210.png)こちらは旧ファイル、PCメニューはスマホ画面なので非表示です。 .header_logoの右の余白は狭く、ヘッダー画像をやや大きくできます。

JavaScript HTML CSSフレームワーク

余白が出来ている画像を追加

2026/08/06 09:44

投稿

naaS

スコア7

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -226,5 +226,8 @@
 検証画面header_text2のcssが反映されていないときの画面。画面幅は480pxで撮影。
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/350b4f06-d33e-4db3-a9d8-5f26599114d0.png)
-検証画面header_rightでは、width、max-widthも反映していません。
+追加画像
-cssにある!importantは、念のために全部消しました。ブラウザのサイズが小さくなっても、文字の大きさはcssに反映されるようになりました。
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-06/7c42e298-400e-4730-86b7-e94f061f11a4.png)    .header_logoの右の余白が広すぎて、右側の.header_rightを圧迫。ロゴの画像を大きくできない理由です。

JavaScript HTML CSSフレームワーク

!importantを削除したら一部改善した報告を書きました

2026/08/05 16:17

投稿

naaS

スコア7

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -226,5 +226,5 @@
 検証画面header_text2のcssが反映されていないときの画面。画面幅は480pxで撮影。
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/350b4f06-d33e-4db3-a9d8-5f26599114d0.png)
-検証画面header_rightでは、width、max-widthも反映していません。width、max-widthは他にもうまくcssが効いていないところがあり、width、max-widthをそれぞれ、最大にしたり、最小にしたり、しましたがcssが効きません。
+検証画面header_rightでは、width、max-widthも反映していません。
+cssにある!importantは、念のために全部消しました。ブラウザのサイズが小さくなっても、文字の大きさはcssに反映されるようになりました。

JavaScript HTML CSSフレームワーク

キャプチャーした画像を追加

2026/08/05 07:24

投稿

naaS

スコア7

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -215,4 +215,16 @@
 相変わらず650px以下で 親要素<"header_logo">の中にある.header_logo.imgの右側に余計な余白ができる。親要素<"header_right">内の  <"header_text"><"header_text2">の文字が、ブラウザが縮小時にcssに書いたとおりに文字が小さくならない。この部分は変わらない。問題解決方法を知りたいです。
 header_logo.imgを中央寄せにしても、左右に余計な余白が残った。
 ### 補足
-**ボールドテキスト**
+**ボールドテキスト**
+早い連絡ありがとうございます。キャプチャーした画像をアップさせていただきます。
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/7d3b70f6-c891-4b7b-879f-053419448fbf.png)
+検証画面header_textのcssが反映されていないときの画面。画面幅は480pxで撮影。
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/b6fe205d-9d2f-4e0a-b5c2-76a7e62f09bf.png)
+検証画面header_text2のcssが反映されていないときの画面。画面幅は480pxで撮影。
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-08-05/350b4f06-d33e-4db3-a9d8-5f26599114d0.png)
+検証画面header_rightでは、width、max-widthも反映していません。width、max-widthは他にもうまくcssが効いていないところがあり、width、max-widthをそれぞれ、最大にしたり、最小にしたり、しましたがcssが効きません。

JavaScript HTML CSSフレームワーク

作業内容を追加

2026/08/05 05:33

投稿

naaS

スコア7

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -213,6 +213,6 @@
 、navToggle、pc_menuを制御。 display: flex;  flex-wrap: wrap;  で子要素を管理するようにした。
 相変わらず650px以下で 親要素<"header_logo">の中にある.header_logo.imgの右側に余計な余白ができる。親要素<"header_right">内の  <"header_text"><"header_text2">の文字が、ブラウザが縮小時にcssに書いたとおりに文字が小さくならない。この部分は変わらない。問題解決方法を知りたいです。
+header_logo.imgを中央寄せにしても、左右に余計な余白が残った。
 ### 補足
 **ボールドテキスト**

JavaScript HTML CSSフレームワーク