「HTMLをビジュアル画面でそのままの文字として出力させたい」
「HTMLが不思議な記号で表示されたけど大丈夫？」
HTMLをビジュアルモードでそのままの文字として出力するには、指定の記号である「文字実体参照」を用います。
この記事では、HTMLをビジュアル画面でそのままの文字で反映させる方法を、わかりやすくご紹介ます。
HTMLに慣れない方でも、ビジュアル画面に文字を表示する方法が分かりますので、ぜひ参考にしてください。
HTMLをビジュアル画面で表示するには？
テキストエディタ（WordPressなら「テキスト」モードからの編集）で書いたHTMLは、一般的にビジュアル画面で表示されません。
例えば、テキストコンテンツに用いられる<p>や<div>などのタグをテキストエディタに書いた場合、ビジュアル画面で表示されませんよね。
そのため、ビジュアル画面でHTMLを表示させたい時などに、「どうやってHTMLを表示させるの？」と悩む方も多いです。
そこで、HTMLをそのままの文字として表示させるならば、「文字実体参照」という記号を用いる必要があります。
HTMLをそのままの文字として出力するなら「文字実体参照」を使用する
「文字実体参照」とは、特殊な文字をアウトプットするために使用される単語です。
HTMLでは>、<、”、’、＆の５つの文字は特殊文字と呼ばれています。
これらの特殊文字をそのまま表示させるには、「文字実体参照」を使用する必要があります。
【文字実体参照】
| 文字 | 文字実体参照 | 詳細 |
|---|---|---|
| < | < | 小なり記号 |
| > | > | 大なり記号 |
| & | & | アンパサンド |
| “ | " | 二重引用符・ダブルコーテーション |
| ‘ | ' | |
| 空白 |   | 空白 |
文字実体参照は、＆（アンパサンド）で始まり、セミコロン（；）で終わるので、覚えておくと良いでしょう。
文字実体参照の読み方
文字実体参照は、ずらりと記号が並べられて、読みづらさを感じる方も多いはずです。
そこで、読み方や文字の意味も確認しておきましょう。
| 文字実体参照 | 詳細 |
|---|---|
| < | アンパサンド less than セミコロン |
| > | アンパサンド greater than セミコロン |
| & | アンパサンド ampersand セミコロン |
| " | アンパサンド quote セミコロン |
| ' | アンパサンド apostrophe セミコロン |
|   | アンパサンド no-break space セミコロン |
意味を確認すると、英語で省略された記号の意味が文字列に含まれていることが分かります。
文字や意味の仕組みが分かると、文字実体参照をよりスムーズに使えるでしょう。
文字実体参照の使い方の例
例えば、<p>をビジュアル画面で文字で表示させるならば、テキストエディタ（WordPressなら「テキスト」モード）に<p>と書きます。
また、<br>であれば、<br>と書くことが可能です。
ビジュアル画面またはプレビュー画面で確認すると、HTMLの文字が反映されていることが分かるはずです。
文字列を実体参照に変換するにあたり、変換ツールもありますので、あわせて活用すると良いでしょう。
