【入門編】pre要素による整形済みテキスト – HTML実践ガイド

「そのまま表示したい！」を叶える魔法のタグ。`pre`要素の意外と知らない使いこなし術

こんにちは！Webの世界へようこそ。HTMLを書き始めたばかりの頃って、不思議な壁にぶつかりませんか？

たとえば、コードエディタで「改行」や「スペース」をたくさん入れて見やすく整えたはずなのに、ブラウザで表示すると全部無視されて、一行にまとめられてしまった……なんて経験、一度はあるはずです。

「僕が打った空白はどこへ消えたの！？」と悲しくなりますよね。でも、安心してください。それはHTMLが「効率よく情報を伝えるために、余計な空白を詰める」という、ある意味で親切なルールを持っているからなんです。

そんなとき、「僕の書いた通りの形を、そのまま見せて！」とブラウザに頼める魔法のタグがあります。それが、今回解説する`pre`要素です。

—

`pre`要素って何者？

`pre`は、「Preformatted Text（整形済みテキスト）」の略です。

想像してみてください。あなたは今、大切なお手紙を書いています。でも、普通の紙に書くと、勝手に文字が詰められて読みづらくなってしまう。そこで、「この紙（`pre`タグ）の上だけは、僕が書いた行間も空白も、一文字も変えないでそのまま表示してね！」と枠線を引くようなイメージです。

どんな時に使うの？

主にこんなシーンで大活躍します。

• ソースコードの表示： プログラミングのコードは、インデント（字下げ）が命ですよね。
• アスキーアート： 文字だけで描いたイラストを、崩さずに表示したいとき。
• 詩や歌詞： 行の終わりを自分の好きな位置で折り返したいとき。

—

実際に書いてみよう

さっそく、`pre`タグを使ってコードを書いてみましょう。下のコードをコピーして、ご自身のHTMLファイルに貼り付けてみてください。

    function greeting() {
        console.log("こんにちは！");
        console.log("preタグの世界へようこそ");
    }

どうでしょう？ ブラウザで見ると、あなたがエディタで打った通りに、きれいな空白と改行が保たれているはずです。

ちなみに、`pre`の中身は通常、「等幅フォント（プログラミングコードによく使われる、文字の幅が一定のフォント）」で表示されます。これもコードを見やすくするための、ブラウザからの粋な計らいですね。

—

ちょっぴり注意！「`pre`タグ」の落とし穴

`pre`タグはとっても便利ですが、使うときに一つだけ「気をつけてほしいこと」があります。

1. HTMLの「特殊文字」には要注意

もし、`pre`の中に「HTMLタグ」そのものを表示したい場合（例：`