記事詳細

投稿日
2026年01月04日06時47分
タイトル

HTMLコードをブラウザ上で「そのまま」表示するには、

内容

 HTMLタグをそのまま表示する基本

HTMLは < や > をタグとして解釈するため、
そのまま書くとブラウザがレンダリングしてしまいます。
文字参照を使ってエスケープします。

記号表示用文字参照
<&lt;
>&gt;
&&amp;
"&quot;
'&#39;

2. HTML + CSS 例

Html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLコード表示</title>
<style>
/* コード表示用スタイル */
pre code {
    display: block;
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    font-family: Consolas, Monaco, monospace;
    white-space: pre; /* 改行・スペースを保持 */
    overflow-x: auto; /* 横スクロール対応 */
}
</style>
</head>
<body>

<h2>HTMLコード例</h2>
<pre><code>
&lt;div class="container"&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

</body>
</html>

3. ポイント

  • <pre>タグ … 改行やスペースをそのまま保持
  • <code>タグ … コードであることを意味づけ
  • CSSのwhite-space: pre; … 空白や改行を保持
  • タグは必ずエスケープ（< → &lt; など）

4. 応用（シンタックスハイライト）

もし見た目をもっときれいにしたい場合は、
Prism.js や highlight.js
などのライブラリを使うと、色付きで表示できます。

✅ まとめ

  • CSSだけではタグの解釈を止められない
  • HTML側でエスケープしてからCSSで装飾する
  • <pre><code> の組み合わせが基本

もし「エスケープを自動化」して、入力したHTMLをそのまま表示する仕組みも作れますが、
それはJavaScriptを使う方法になります。
希望があれば、そのサンプルも作れますが、作りますか？

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Htmls
編集 | 記事一覧