pre / code を CSS で横スクロールさせる – overflow-x と white-space の使い分け

HTML でコマンド、設定ファイル、ソースコードを掲載すると、長い 1 行が画面幅を超えることがあります。特にスマートフォンでは、コードブロックが本文全体を横に押し広げたり、右端が切れたりしやすくなります。

基本的な対処は、pre 要素に overflow-x: auto を指定し、コードの空白と改行を維持することです。

.code-scroll {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

ただし、横スクロールが発生するかどうかは overflow-x だけでは決まりません。white-space による折り返し、親要素の幅、Flexbox / Grid の最小幅、既存テーマの CSS が関係します。

横スクロールの基本 CSS

特定のコードブロックだけを横スクロールさせるなら、pre 全体へ指定するのではなく、専用クラスへ適用します。

<pre class="code-scroll"><code>curl https://example.com/very/long/path?first=value&amp;second=value</code></pre>

.code-scroll {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
}

.code-scroll code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

overflow-x: scroll を使うと、内容が短くてもスクロール機構を表示します。通常は、必要な場合だけスクロール可能になる auto の方が自然です。OS やブラウザによってはスクロールバーが常時見えず、トラックパッドやスワイプ操作時だけ表示されます。

white-space が折り返しを決める

pre 要素は、ブラウザ標準のスタイルで white-space: pre として扱われるのが一般的です。空白と改行を維持し、ソースにない位置では折り返さないため、長い行は要素の横幅を超えます。

コードの 1 行がどこで終わるかを保持したい場合は、white-space: pre と横スクロールを組み合わせます。折り返しても意味が変わりにくいログや説明文なら、pre-wrap を選べます。

コードを折り返す場合

横スクロールを避け、長い URL、ハッシュ、エラーメッセージも画面内で折り返したい場合は、次のようにします。

.log-wrap {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

overflow-wrap: anywhere は、URL のように通常の改行候補がない長い文字列でも、必要であれば途中で折り返せるようにします。古い word-wrap は現在も alias として扱われますが、新しく書く CSS では標準名の overflow-wrap を使う方が意図を明確にできます。

ただし、ソースコードを自動折り返しすると、画面上の折り返しと実際の改行を区別しにくくなります。コピーした内容は正しくても、読者が行単位で確認しづらくなるため、コードは横スクロール、ログは折り返しという使い分けが現実的です。

overflow-x: auto だけで直らない理由

overflow-x: auto を指定しても横スクロールにならない場合は、次の点を確認します。

• テーマやプラグインが white-space: pre-wrap を上書きしていないか
• pre または親要素に width: max-content などが指定されていないか
• コードブロックが Flexbox / Grid の子要素内にあり、その子要素が縮小できなくなっていないか
• 横スクロールではなく、ページ全体がコードの幅まで広がっていないか
• スクロールバーが非表示なだけで、横スワイプや Shift + ホイールでは移動できないか

開発者ツールの Computed タブで、最終的に適用されている overflow-x、white-space、width、max-width を確認します。CSS ファイルに書いた値ではなく、cascade 後の値を見ることが重要です。

Flexbox / Grid では min-width: 0 を確認する

記事本文が Flexbox や Grid の子要素になっている場合、コードブロックではなく親側の最小幅が原因になることがあります。Flex item や Grid item は、既定の自動最小幅によって内容より狭く縮まない場合があるためです。

.article-column {
  min-width: 0;
}

.article-column .code-scroll {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

min-width: 0 はコードを折り返す指定ではありません。記事カラムがレイアウトの利用可能幅まで縮めるようにし、その内側で pre をスクロールコンテナにする指定です。ページ全体に横スクロールが発生している場合は、この境界を確認します。

pre 全体へ指定しない方がよい場合

次のように要素 selector だけで指定すると、サイト内にあるすべての pre へ影響します。

pre {
  overflow-x: auto;
  white-space: pre;
}

コード、ログ、ASCII 図、引用、プラグインが生成したブロックでは、必要な表示方針が異なります。WordPress のようにテーマとプラグインが複数の pre を生成する環境では、記事本文やコードブロックのクラスへ scope を限定します。

.entry-content .code-scroll {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

実装時の確認項目

参考情報

参考書籍

まとめ

pre / code の長い行を横スクロールさせる基本は、max-width: 100%、overflow-x: auto、white-space: pre の組み合わせです。コードの改行位置を維持したまま、ブロックの内側だけを横方向へ移動できます。

ログや長い URL を画面内で折り返すなら、white-space: pre-wrap と overflow-wrap: anywhere を使います。横スクロールと折り返しは、どちらが正しいかではなく、表示する内容の意味に合わせて選びます。

ページ全体が横に広がる場合は、コードブロックだけでなく、Flexbox / Grid の親要素にある自動最小幅も確認します。CSS の値を追加するだけでなく、どの要素をスクロールコンテナにするのかという境界を決めることが重要です。

関連記事

HTML の dl / dt / dd の使い方 – 説明リスト、用語集、メタデータを正しく書く