レスポンシブデザイン

まだまだ勉強が必要かも

※この記事にはプロモーションが含まれています。

先月くらいからこの自分が個人でやっているツモタ録のページにナビゲーションリンクをヘッダーの上に追加して
そして先日、スマホのレスポンシブデザインを改修したのだが課題点が残る。
まずどこを修正したかというとスマホの画面で見た時にナビゲーションリンクが
フッターのように縦長のように表示されて下にスクロールしなければ
メインコンテンツが見れない状態になっていたのを修正して
パソコンで見た時と同じように横並びに表示させて、最初からメインコンテンツが読めるようにしたのである。
しかしこのようにスマホの画面で見ると横幅に突き抜けて画面がズームした状態になってしまっている。




２本の指で画面を操作して表示内容を調整する手法があり、
２本の指の間隔を広げて画面を拡大することを「ピンチアウト」
２本の指の間隔を狭めて画面を縮めることを「ピンチイン」というのだが
その「ピンチイン」をしないと画面全体が収まって見れないような状態になってしまっているのである。
AI（Gemini）に相談したらどうやら原因はCSSのプロパティのWidth:fit-contentらしく
mainタグ、bodyタグ、articleタグ、の要素にWidth:fit-contentのプロパティが指定されているのが
それが悪さをしていて表示が崩れ、横幅に突き抜けて表示されてしまっているらしい。
fit-contentは画面幅を超えた場合、body全体の幅がその「はみ出た要素」に合わせて広がってしまう仕組みになっているみたいだ。
fit-contentを入れた理由はヘッダーの横幅サイズがbodyまたはmainタグの要素と不一致が起きてしまうためそれと会わせる形で指定したのである。
またもう一つ理由があって楽天アフィリエイトリンクのtableタグがスマホの画面ではみ出して表示されるようになっていたため
そちらともサイズを合わせるようにfit-contentを指定してみた次第なのである。
AI（Gemini）から修正案としてfit-contentを削除して代わりに
width:100%;とbox-sizing: border-box;を勧めてくれたので一度これで試してみて近日くらいからまた修正作業を再開しようと思う。
読者層を調べるとパソコンの画面で見ている人が比較的多いためスマホの画面で見た時の考慮はしていなかった。
パソコンの画面なら致命的な表示崩れがなかったし、パソコンで見ている読者層が多かったため気にしていなかったが
もしかするとスマホでは見づらいからパソコンの画面で見ている人がいるかもしれない。
またAI（Gemini）からもユーザー体験を損なうためモバイルフレンドリーではないと指摘を受けた。
収益化を見据えて取り組んでいるが未だGoogleAdSenseの審査に合格できていない。
上記のような要因を含め、審査に受からない原因が他にもあるかもしれない。
何が正しいのか間違いなのか全然わからないので道のりは遠そうだが一つ一つ変なところを直していって気長に頑張るしかない。

ここからはGeiminの回答の一部を公開いたします。
Webデザインについて初歩的なことや基本的なことがまだまだできておらず
今回のようにスマホの画面で見た時の体裁が整っていないなどまだまだ勉強不足で発展途上なところがあります。
いろいろ苦戦中ですが私と同じように悩んでいる方、そしてWebデザインを勉強している人にとって少しでも参考になれば幸いです。

Geminiの回答　その１

これは典型的な**「横幅の突き抜け」**が発生していますね。
画面の右側が切れてしまっている（あるいは右側に無駄な余白があって、全体が左に寄っている）状態です。

原因は、 width: fit-content; や、楽天アフィリエイトの固定幅（504px）のタグが、
「画面の枠（ViewPort）」を無理やり押し広げていることにあります。

これを一発で解消し、スマホでピタッと収めるための決定版CSS修正案をまとめました。

1. style.css の修正（ここを入れ替えてください）
まず、以前のファイルにあった body { width: fit-content; } や article { width: fit-content; } は絶対に削除してください。
その上で、レスポンシブ部分を以下のように書き換えます。

CSS

/* --- style.css のスマホ用設定 --- */

@media screen and (max-width: 600px) {
/* 1. 全体と記事の幅を「画面ぴったり」に固定 */
body {
width: 100% !important;
margin: 0;
padding: 0;
overflow-x: hidden; /* 横揺れを強制カット */
}

article {
width: 100% !important;
padding: 15px; /* 左右の余白を少し確保 */
box-sizing: border-box; /* パディングを幅に含める */
}

/* 2. 楽天アフィリエイト(504px等)の強制フィット */
/* 504pxの指定があるdivやtableを画面内に収める */
div[style*="width"], table[width], .ad-container {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed; /* テーブルが突き抜けるのを防ぐ */
word-break: break-all;
box-sizing: border-box;
}

/* 広告内の画像も画面幅を超えないようにする */
article img {
max-width: 100% !important;
height: auto !important;
}

/* 3. パンくずリストが一行で突き抜けるのを防ぐ */
.breadcrumb {
flex-wrap: wrap; /* 画面端で折り返す */
}

.breadcrumb li {
font-size: 0.8rem; /* 少し小さくして収まりを良くする */
}
}
2. なぜ「スクショの状態」になるのか？
スクショを見ると、ヘッダーの画像やパンくずリストが右に消えていっています。
ブラウザは以下のような優先順位で動いています。

HTMLに width="504" や style="width:504px" と書かれた要素（楽天の広告など）を見つける。

「スマホの画面は400pxしかないけど、504px必要って書いてあるから、画面を504pxまで広げよう」と判断する。

その結果、文字や画像は本来のスマホ幅で表示されているのに、画面（キャンバス）だけが右に伸びてしまうため、
あのように右側が切れた（あるいは空白になった）ように見えます。

3. Googleアドセンス審査への影響
この「横スクロールが出てしまう状態」は、Googleがもっとも嫌う**「モバイルフレンドリーではない」**状態です。

文字が小さすぎる、または読みにくい

コンテンツの幅が画面を超えている
これらのエラーが出ると、審査合格はかなり難しくなります。

次のステップ：HTMLへの追加対策
もし上記のCSSを適用しても直らない場合、
HTML内の楽天アフィリエイトのコード（

Geminiの回答　その２

1. fit-content は何のためにあるのか？
fit-content は**「中身（コンテンツ）の幅に合わせる」**ための設定です。

通常のブロック要素（divなど）: 放っておくと横幅いっぱいに広がります（width: 100%）。

fit-contentを指定した場合: 中身が少なければ小さくなり、中身が多ければその分だけ広がります。

便利な例：
ボタンやラベルを自作する際、文字数に合わせて枠線の幅を自動調整したい時などに使われます。

2. なぜ「ヘッダーとメインの不一致」が起きたのか
おそらく、以下のような現象が起きていたはずです。

メインコンテンツ（article）内に、楽天アフィリエイトなどの「横幅が広い要素（504pxなど）」があった。

そのせいで、メイン側だけが「中身に押されて」横に広がった。

一方、ヘッダーは標準の 100%（画面幅）のままだったので、メインより短く見えてしまった。

ここで fit-content を使うと、ヘッダーも「はみ出たメインと同じ幅まで広がろう」としてしまいます。
その結果、**「ページ全体がスマホの画面枠を突き破って右に伸びる」**という、今の不具合が発生しました。

3. 正しい解決策：不一致をどう直すべきか
「広い方に合わせる」のではなく、**「すべてをスマホの画面幅（100%）に強制的に収める」**のが正解です。
そうすれば、ヘッダーもメインも同じ「画面幅」になり、不一致は解消されます。

修正の考え方：

width: fit-content; はすべて削除します。

代わりに width: 100%; と box-sizing: border-box; を使います。

CSSの修正イメージ
CSS

/* ヘッダー、メイン、記事すべてを一律で画面幅に揃える */
header, main, article {
width: 100% !important; /* 画面幅いっぱいに固定 */
max-width: 100vw; /* 画面の表示領域を超えないように制限 */
box-sizing: border-box; /* paddingを含めて100%にする（はみ出し防止） */
}

/* はみ出す原因（広告など）だけを、その場で見切らせる（スクロールさせる） */
article table, .ad-container {
display: block;
width: 100% !important;
overflow-x: auto; /* これで広告だけが横に滑るようになり、全体は壊れない */
}
まとめ
fit-content：中身が画面より大きくても、そのサイズまで要素を広げてしまう。

100% + box-sizing：画面のサイズを「絶対の正解」として、中身をそこに押し込める。

スマホデザイン（レスポンシブ）においては、
常に**「画面の幅（100%）が主人、中身は家来」**という関係性を保つのが、表示崩れを防ぐ鉄則です。

これでヘッダーとメインの横幅はピタッと揃います。一度試してみてください！

Geminiの回答　その３

1. 黄金のセット（CSSに追加してください）
これら4つの要素を画面幅に固定しつつ、余白（padding）を入れても横に突き抜けないように設定します。

CSS

header, main, article, footer {
width: 100% !important; /* 親要素（body）の幅に合わせる */
max-width: 100vw; /* 画面の表示領域を絶対に超えない */
margin: 0 auto; /* 中央寄せ */
padding: 1rem; /* 左右に余白があっても幅に含まれるようにする */
box-sizing: border-box; /* ← これが最重要！ */
}
2. なぜ box-sizing: border-box; が必要なのか
これを忘れると、width: 100% に padding: 10px が足し算されてしまい、
合計の幅が「100% + 20px」になって画面を突き抜けます。スクショで右側が切れていた原因の多くはこれです。

3. 「中身」のせいで横に広がるのを防ぐ
外枠を 100% にしても、中にある楽天アフィリエイトのテーブルや画像が「俺は504pxだ！」と主張すると、
外枠ごと道連れにして画面を広げてしまいます。

これを防ぐために、以下の設定もメディアクエリ（@media）内に入れておくと安心です。

CSS

/* どんな大きな中身も、親要素（article等）の幅に閉じ込める */
article img,
article table,
article iframe,
article div {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}

/* それでもはみ出る広告などは、その場で横スクロールさせる */
article table {
display: block;
overflow-x: auto;
}

最終チェック：bodyの設定 最後に、大元である body が余計な幅を持っていないか確認してください。

CSS

body {
margin: 0;
padding: 0;
width: 100% !important;
overflow-x: hidden; /* 万が一中身がはみ出ても、画面全体を横に揺らさない */
}
この設定を適用すれば、以前のように指で画面サイズを直さなくても、開いた瞬間にスマホにフィットした状態で表示されるようになります。

まずは width: 100% と box-sizing: border-box を各要素に適用してみてください。
これでヘッダーとメインの不一致もスッキリ解消するはずです。

【中古】レスポンシブWebデザイン「超」実践デザイン集中講義/SBクリエイティブ/山崎大助（単行本） 価格：456円（税込、送料無料) (2026/3/16時点) 楽天で購入