【実務・中級編】pre要素におけるホワイトスペースと改行の保持 – HTML実践ガイド

「なぜ改行が無視されるのか？」から卒業する：pre要素とホワイトスペースの深淵

フロントエンドの現場で、ふと「あ、ここコードブロックにしたいな」と思ったとき、何の迷いもなく `

` を選ぶ。それは正しい。しかし、いざ実装してみると「インデントが深すぎて崩れる」「CSSをいじったはずなのに改行が変なところで切れる」といった、CSSの基本仕様に足元をすくわれる経験、皆さんも一度や二度あるはずだ。

今日は、そんな「当たり前すぎて誰も教えてくれない」`` 要素の挙動と、現場でスマートにコードブロックを扱うための知見を共有しようと思う。

1. `pre` 要素が背負っている宿命：`white-space: pre` の正体

まず前提として、`` は魔法のタグではない。単にブラウザのデフォルトスタイルシートが `white-space: pre` をあてているだけの要素だ。

この `white-space: pre` というプロパティが裏側で何をしているかというと、以下の2つをブラウザに強制している。


スペースやタブの連続をそのまま保持する（HTML上の空白を削除しない）
テキストの折り返しをしない（行末に達しても改行せず、親要素を突き抜ける）


多くのエンジニアが躓くのは、この「折り返さない」という仕様を忘れて、長い文字列を流し込んだ瞬間にレイアウトが崩壊するパターンだ。現場でこれを解決するには、`pre` だけでなく `code` タグとの組み合わせや、適切な CSS の適用が必要になる。

2. 現場で「使える」コードブロックのテンプレート

ただ `` で囲むだけでは、モダンな開発環境では不十分だ。シンタックスハイライトが効くように `code` タグを入れ子にし、かつ長い行が画面からはみ出ないように制御する。これが今のフロントエンドにおけるベストプラクティスだ。

そのままコピーして使える、実務レベルのコードがこちらだ。




  // 現場でよく使う、モダンな関数定義の例
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    // レスポンスが空の場合のガード節
    if (!response.ok) throw new Error('Network error');
    return await response.json();
  } catch (err) {
    console.error('取得失敗:', err);
  }
};


3. 注意すべき「インデント」の罠
`
` 要素を使っていてよくある苦情が、「ソースコード上のインデントがそのまま表示に反映されてしまい、UIがガタガタになる」というものだ。

例えば、HTMLソース上で以下のように書くと悲劇が起こる。


  
    インデントが深すぎて表示がずれる
  

これだと、開始タグ直後の改行や、インデント用のスペースまで全てブラウザが律儀に描画してしまう。「`

` の内側に余計な空白を入れない」のが鉄則だが、どうしてもコードを見やすくしたい場合は、文字列を左詰めにして記述するか、テンプレートリテラル等でインデントをプログラム的に削除する処理を挟むのが賢いやり方だ。
最後に：フロントエンドエンジニアとしての矜持
`
` 要素は、HTMLの中でも非常にクラシックな存在だ。だが、その挙動を深く理解し、CSSでいかに「今風」に制御できるかは、エンジニアの細部へのこだわりを如実に表す。
「とりあえず動けばいい」ではなく、`white-space` の挙動一つをとっても、「なぜそうなるのか」を言語化して実装する。そうした地味な積み重ねが、あなたのコードを、そしてあなたが作るプロダクトを、確実に「プロの品質」へと押し上げていくはずだ。
明日からの実装で、ぜひこの制御を思い出してほしい。コードの美しさは、細部の制御に宿るのだから。