JP

HTML・文章にひと工夫

特殊文字（実体参照）

<, &, © のような「そのままでは書けない・打ちにくい」文字。&lt; &amp; という書き方（実体参照）で、きちんと画面に出す方法を覚えよう。

「文章の中に < という記号を書きたいのに、なぜか画面に出ない……」——じつはHTMLでは、< や & はタグの合図として特別あつかいされています。そのまま書くと、ブラウザが「お、タグの始まりかな？」と勘違いしてしまうのです。そんな記号を、ちゃんと文字として見せる書き方が 実体参照（じったいさんしょう）。

なぜそのまま書けないの？

理由はシンプルで、< はタグの始まり、& は実体参照の始まりの記号だから。ブラウザはこの2つを見ると「命令かな？」と身構えます。だから、ただの文字として見せたいときは、あいことばに置きかえて「これは記号だよ」と教えてあげる必要があります。

よく使う実体参照

覚えておきたいのは、この数個だけで十分です。

出したい文字書き方名前の由来
<&lt;less than（より小さい）
>&gt;greater than（より大きい）
&&amp;ampersand（アンド記号）
"&quot;quotation（引用符）
©&copy;copyright（著作権）
（改行しない空白）&nbsp;non-breaking space（改行禁止の空白）

たとえば、記事の中で「pタグ」の書き方そのものを見せたいとき。

<p>段落は &lt;p&gt; と書きます。</p>
&lt;と&gt;が、タグではなく<と>の記号として画面に出ています。

こう書くと、画面には 段落は <p> と書きます。 と、記号がそのまま出ます。&lt; と &gt; に置きかえたおかげで、ブラウザがタグと勘違いせずにすんだわけです。

記号やマークも出せる

文字だけでなく、キーボードにない記号も出せます。フッターでよく見るコピーライトなら、こう。

<p>&copy; 2026 しまちゃん</p>
コードでは&copy;と書いたのに、画面ではちゃんと©のマークに変わっています。

&copy; が © に変わります。ほかにも矢印や特殊なマークがたくさん用意されています。

番号でも書ける

実体参照には、&名前;のほかに &#番号; という書き方もあります。©なら、こちらでも同じ結果になります。

<p>&#169; 2026 しまちゃん</p>
名前の&copy;ではなく番号の&#169;で書いても、同じ©のマークが出ます。
書き方出る文字
&copy;（名前）©
&#169;（番号）©

番号はUnicodeという世界共通の文字番号を指しています。名前のほうが覚えやすく読みやすいので、ふだんは&copy;のような名前つきの書き方で十分です。「番号でも書けるやり方がある」と知っておけば、他の人のコードで見かけても戸惑いません。

このレッスンのまとめ

  1. < > & は特別あつかい。文字として出すには実体参照を使う
  2. &lt; &gt; &amp;——& で始めて ; で閉じる
  3. UTF-8なら日本語・絵文字はそのまま。実体参照が要るのは主に3つ

やってみよう：フッターの著作権表示

しまちゃんページの <footer> に、コピーライトを置きましょう。© の記号は &copy; で出します。

<footer>
  <p>&copy; 2026 しまちゃん</p>
</footer>

&copy; が © に変わって、画面には「© 2026 しまちゃん」と出ます。キーボードに無い記号も、あいことばでだせるようになりました。

よくある質問

実体参照は名前ではなく番号でも書けますか？
書けます。&#169;のように「&#番号;」の形で書く方法もあり、©などの記号を番号側で出すこともできます。名前で覚えられるものは名前で書くほうが読みやすいので、まずは名前の方を覚えれば十分です。
コピーした文章に&amp;のような見慣れない文字列が混ざっているのはなぜですか？
他のサイトの文章をコピーすると、もともと実体参照で書かれていた部分がそのまま貼りつくことがあります。&で始まり;で終わる文字列を見つけたら、実体参照だと気づけます。
実体参照を書き間違えるとどうなりますか？
変換されずに&lgt;のような文字がそのまま画面に出てしまうことが多いです。&で始めて;で閉じる形になっているか、名前のつづりが合っているかを確認しましょう。