MENU

webと横スクロールの問題を徹底解説する完全ガイドブック

大規模情報サイト運営
web 横スクロール
2025/12/01
目次

はじめに

調査の目的

この調査は「web 横スクロール」に関する情報をわかりやすくまとめることを目的としています。実装方法だけでなく、スマホでの見切れやはみ出しの原因、WordPressでの対応、スクロールバーのカスタマイズ方法まで幅広く扱います。

対象読者

フロントエンドの基本知識がある方、サイト制作や保守を担当している方、横スクロールを導入したいデザイナーや開発者を想定しています。専門用語は最小限にし、具体例で補足します。

この記事で学べること

  • 横スクロールの一般的な原因と簡単な対処法
  • CSSだけで作る横スクロールの実装例
  • JavaScriptで縦スクロールに連動させる方法
  • WordPressで扱う表の横スクロール対応と注意点
  • スクロールバーの見た目調整と原因特定の手順

読み方の目安

各章を順に読むと理解が深まります。急ぐ場合は第2章（原因と対策）と第3章（実装例）だけでも実用的です。

スマホサイトの横スクロール・見切れ・はみ出しの原因と解決方法

はじめに

スマホで横スクロールしたり要素が見切れる原因は、HTMLやCSSの記述ミスやレスポンシブ対応の不足が主です。ここではよくある原因と具体的な対処法を丁寧に説明します。

よくある原因

  • 固定幅の指定（例: width: 600px）がある
  • 画像やiframe、テーブルが親要素より大きい
  • preやcodeで改行が無く長い文字列がある
  • マージンやpositionで枠外にはみ出している
  • ビューポート指定がない（meta viewport）

具体的な解決方法（例付き）

  • 画像対策
  • CSS: img { max-width: 100%; height: auto; }
  • 親幅に合わせて小さくなります。
  • 固定幅を避ける
  • px指定をやめて max-width:100% や width:100% を使う
  • preやコードブロック
  • CSS: pre { overflow: auto; -webkit-overflow-scrolling: touch; }
  • スクロールバーが見えない場合は「横にスクロールできます」と注記を付ける
  • テーブル／iframe
  • 包む要素に overflow-x: auto; を指定して枠内スクロールにする
  • 全体設定
  • meta: を必ず入れる
  • box-sizing: border-box; を適用するとレイアウトが安定します

デバッグの簡単な方法

  • 一時的に * { outline: 1px solid rgba(255,0,0,0.3); } を入れてはみ出す要素を探す
  • ブラウザの検証ツールで幅が100vwを超える要素を確認する

上記を順に確認すると原因を特定しやすくなります。スクロールバーが目立たない場合はユーザーへ操作を伝える工夫も忘れないでください。

横スクロールするコンテンツの作り方と実装例

概要

横並びの要素に幅を与え、相対単位（vwなど）を使うと画面サイズに応じて調整できます。JavaScriptではxPercentで移動量を制御し、trigger要素でいつ横スクロールさせるか決めます。CodePenで動作確認すると分かりやすいです。

基本（CSSのみ）

  • 親：overflow-x:auto、white-space:nowrap、またはdisplay:flex
  • 子：widthをvwや%で指定（例：width:80vw）

簡単な例：

.container{display:flex;overflow-x:auto}
.item{flex:0 0 80vw}

実装例（JavaScriptを使う）

ライブラリ（例：GSAP）を使う場合は、xPercentで横移動を指定し、scrollTriggerで発火ポイントを設定します。概念は「スクロール量に応じてコンテナを横に移動する」だけです。

例（イメージ）：

// GSAPの例（イメージ）
gsap.to('.panelWrap',{ xPercent: -100*(panels-1), ease:'none',
  scrollTrigger:{ trigger:'.wrap', pin:true, scrub:true, end: ()=>'+='+ document.querySelector('.wrap').scrollWidth }
});

ポイント
– 子要素の幅は相対単位で指定するとレスポンシブに有利です
– スクロール距離はコンテナ全体の幅から計算します
– CodePenなどで実際に動かして調整してください

次章では縦スクロールを横スクロールに変換する具体的な実装を解説します。

縦スクロールでコンテンツを横スクロールする方法（JavaScript + CSS）

概要

縦にスクロールすると横方向にコンテンツが動くUIの作り方を説明します。縦スペースを固定(sticky)にして、その間のスクロール量を横スクロールに変換します。スマホでも使える実装例を示します。

HTML（例）

<section class="section">
  <div class="sticky">
    <div class="h-scroll"> <!-- 横並びアイテム -->
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </div>
</section>

CSS（要点）

  • .sticky { position: sticky; top:0; height:100vh; }
  • .h-scroll { display:flex; overflow:hidden; }
  • .item { flex: 0 0 100vw; }
    これでアイテムが横並びになります。

JavaScript（簡易）

const sticky = document.querySelector('.sticky');
const h = document.querySelector('.h-scroll');
const total = h.scrollWidth - h.clientWidth;
window.addEventListener('scroll', ()=>{
  const rect = sticky.getBoundingClientRect();
  const progress = Math.min(Math.max(1 - rect.top/window.innerHeight,0),1);
  h.scrollLeft = total * progress;
});

実運用ではResizeObserverでtotalを更新し、IntersectionObserverで有効範囲を判定すると安定します。

ポイント

  • overflowはautoではなく横移動をJSで制御すると操作感を整えやすいです。
  • スマホではtouchの慣性や縦スクロール優先を考慮してテストしてください。
  • accessibilityのためキーボード操作やスクリーンリーダー対応も忘れずに。

WordPressで横スクロールできる表の作り方とスマホ対応

概要

WordPressで横幅の広い表を見切れずに表示するには、親要素に横スクロールを許可するCSSを当てます。ここではテーブルブロックを使った手順と、スマホでわかりやすくする注釈の出し方を解説します。

手順（簡潔）

  1. 投稿・固定ページで「テーブル」ブロックを追加し、必要な行列を作ります。ヘッダーやフッターの使用をやめたい場合は、ブロックの設定で項目をオフにします。
  2. ブロックの「追加CSSクラス」に wrapper用のクラス名（例: scroll-table-wrapper）を付けます。テーブル本体にもクラス（例: scroll-table）を付けます。
  3. 外観→カスタマイズ→追加CSS に以下を追加します。
.scroll-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-table{min-width:700px;white-space:nowrap;border-collapse:collapse}

スマホ対応（注釈を表示）

小さい画面ではスクロール可能であることを案内すると親切です。投稿内でテーブルの上に以下のような文を入れます。

<div class="scroll-hint">表は横にスクロールできます →</div>
<div class="scroll-table-wrapper">
  <table class="scroll-table">…</table>
</div>

@media (max-width:600px){
  .scroll-hint{display:block;font-size:13px;color:#666;margin-bottom:6px}
}

Gutenbergでのポイント

  • テーブルブロックの「追加CSSクラス」は右サイドバーの「高度な設定」から追加できます。グループブロックでラップしてクラスを付けると管理しやすいです。
  • 固定幅の列が必要な場合は、セルにstyle=”min-width:120px”を付けると見やすくなります。

アクセシビリティと注意点

  • スクロール可能な領域にはaria-labelを付けるとわかりやすいです（例: aria-label=”横にスクロールできる表”）。
  • 過度に横幅を広げない、重要な情報は縦方向にも分かる形にするなど配慮してください。

この方法でスマホでも見切れず、ユーザーに伝わる表を作れます。

CSSで横スクロールできるテーブルの作り方とスクロールバーのカスタマイズ

概要

テーブルを親要素で囲み、親要素にoverflow-x: auto;を設定すると、幅を超えた場合に横スクロールできます。長いセルはwhite-space: nowrap;で改行を防ぎます。

実装手順（例）

HTML:

<div class="table-wrap">
  <table class="my-table">...</table>
</div>

CSS:

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.my-table { border-collapse: collapse; width: 100%; min-width: 800px; white-space: nowrap; }
.my-table th, .my-table td { padding: 8px; border: 1px solid #ddd; }

min-widthでテーブルの最小幅を指定すると、親幅を超えたときに横スクロールが出ます。

スクロールバーのカスタマイズ

WebKit系（Chrome/Safari）:

.table-wrap::-webkit-scrollbar { height:8px; }
.table-wrap::-webkit-scrollbar-track { background:#f1f1f1; border-radius:4px; }
.table-wrap::-webkit-scrollbar-thumb { background:#c1c1c1; border-radius:4px; }

Firefox:

.table-wrap { scrollbar-width: thin; scrollbar-color: #c1c1c1 #f1f1f1; }

ただしmacOSではスクロールバーがオーバーレイ表示されるため見た目が異なります。

注意点

アクセシビリティのためキーボード操作やタッチ操作でスクロールできることを確認してください。表示崩れがあればmax-width:100%や可変のmin-widthにして調整します。実機での確認を忘れずに行ってください。

横スクロールの原因となる要素を簡単に見つける方法

概要

スマホで横スクロールが発生する要素は視覚的に見つけると早く直せます。全要素に赤い枠を付けると、はみ出している箇所が一目で分かります。

手順（簡単）

  1. ブラウザの検証ツールを開く
  2. コンソールやスタイルに以下を追加します。
* { outline: 2px solid rgba(255,0,0,0.6) !important; }
  1. スマホサイズにリサイズして横スクロールを確認します。画面外にはみ出す要素が赤枠で目立ちます。

見つけた後のチェック項目

  • 幅指定：width:100vw や固定ピクセル幅が原因か確認
  • 画像・iframe：max-width:100% を指定
  • マージン・負のマージンやtransformの影響を確認
  • 絶対配置やfixed要素が画面外に出ていないか

修正例

  • コンテナに overflow-x:auto を付ける
  • 問題要素に max-width:100% を付ける

注意点

outlineはレイアウトを崩しませんので安全に使えます。確認後は必ずこのルールを削除してください。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
web 横スクロール
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次