メインコンテンツへスキップ

文字参照

1.文字参照

文字参照は、
HTMLなどで
直接記述できない
文字や記号を表記する
方法です。

HTMLでは、<!-- と記述してしまうと、コメントの開始を意味します。ここでは、&lt;!-- と記述して表示しています。この様な方法を文字参照と言います。文字参照は、テキストに正当に含める事が出来ない文字をエスケープする為に使用できます。

文字参照は、U+0026 ( & : アンパサンド文字) で始まる必要があります。

文字参照（もじさんしょう、英: character reference）とはHTMLなどのSGML文書においては、直接記述できない文字や記号（マークアップで使われる、半角の不等号「<」や「>」など）を表記する際に用いられる方法である。SGML構成素のひとつとして定義されており、文書文字集合中の文字を参照する為の手段を提供する。HTMLにおける文字参照には、表記方法により数値文字参照と文字実体参照の二種が存在する。XMLにおいては、HTMLにおける「数値文字参照」を「文字参照」と呼ぶ。なおHTMLにおける「文字実体参照」は、XMLでは実体参照と呼び区別する。
文字参照 - Wikipedia

2.文字実体参照

文字実体参照は、
特定の文字列によって
文書文字集合における
該当文字を
指定する方法です。

作成者がより直感的に文字の参照を行えるように、文字実体参照という意味のある文字列を用いた文字参照が用意されいいます。

HTML Living Standardでは、名前付き文字参照と言い、U+0026 ( & : アンパサンド文字) の後には、名前付き文字参照セクションで指定された名前のいずれかが、同じ大文字小文字を使用して続く必要があります。 名前は、U+003B ( ; : セミコロン文字) で終了する必要があります。

文字 Unicode 文字実体参照 概要 説明
& U+0026 &amp; アンパサンド
(半角) 		文字参照で使用されています。
&lt;body&gt; タグの文字参照での記述例
< U+003C &lt; 小なり記号
(半角) 		開始タグ開始区切り子, 終了タグ開始区切り子, マーク宣言開始区切り子の一部などで使用されています。
<body>タグのサンプル</body> <!--コメントのサンプル-->
> U+003E &gt; 大なり記号
(半角) 		開始タグ終了区切り子, 終了タグ終了区切り子, マーク宣言終了区切り子の一部などで使用されています。
<body>タグのサンプル</body> <!--コメントのサンプル-->
/ U+002F &sol; スラッシュ
(半角) 		自己終了としてマークされた開始タグ終了区切り子, 終了タグ開始区切り子の一部などで使用されています。
<mspace title=3em&sol;/>
" U+0022 &quot; 二重引用符
(半角) 		属性値を囲むなどで使用されています。
<body title="属性値のサンプル">
' U+0027 &apos; 一重引用符
(半角) 		属性値を囲むなどで使用されています。
<body title='属性値のサンプル'>
` U+0060 &grave; 重アクセント文字
(半角) 		引用符で囲まれていない属性値などで使用されています。
<body title=属性値の`サンプル`>
= U+003D &equals; 等号
(半角) 		引用符で囲まれていない属性値などで使用されています。
<body title=属性値の=サンプル>
≡ U+2261 &equiv; 同等記号
(半角) 		式などで使用されています。
x≡y(mod N)
  U+00A0 &nbsp; ノーブレーク
スペース 		折り返しを起こさない (ホワイトスペースではない) 空白
空白の     サンプル
&nbsp; は制御コードなので、空白そのままを文字参照で表したい場合は &#32; と数値文字参照を用います。
U+000A &NewLine; ラインフィード
改行 		改行を表します。
<pre>改行の
サンプル</pre>
&NewLine; は制御コードなので、改行を要素・タグで表したい場合は <br> とbr要素を用います。
↵ U+21B5 &crarr; 改行マーク 改行を表します。
改行の↵<br>
サンプル
&crarr; はマークなので、改行を要素・タグで表したい場合は <br> とbr要素を用います。
↩ U+21A9 &larrhk; 改行マーク 改行を表します。
改行の↩<br>
サンプル
&larrhk; はマークなので、改行を要素・タグで表したい場合は <br> とbr要素を用います。
! U+0021 &excl; 感嘆符
(半角) 		マーク宣言開始区切り子で使われるので、<!を&lt;!と記すだけで気を付ける事はそれほどないと思います。
<!-- コメント -->
# U+0023 &num; ハッシュ
(半角) 		数値文字参照などで使われるので、&#を&amp;#と記すだけで気を付ける事はそれほどないと思います。
&#035;
¥ U+00A5 &yen; 円記号
(半角) 		文字エスケープなどで使われるので、¥uなどをテキストデータとして表したい場合などに必要です。
¥u{4F1D}
; U+003B &semi; セミコロン
(半角) 		文字参照などで使われるので、とりあえず提示しました。
&#059;
, U+002C &comma; カンマ
(半角) 		配列の区切り子などで使われるので、文字列データで配列を表しつつカンマもテキストデータとして扱いたい時などに使うかと思います。
["テキスト１", "テキスト２(ａ,ｂ)"]
| U+007C &verbar; バーティカルバー 配列の区切り子などで使われるので、とりあえず。
✓ U+2713 &check; チェックマーク とりあえず提示しました。
⋯ U+22EF &ctdot; 省略記号 とりあえず提示しました。
( U+0028 &lpar; 左括弧
(半角) 		とりあえず提示しました。
) U+0029 &rpar; 右括弧
(半角) 		とりあえず提示しました。
{ U+007B &lbrace; 左中括弧
(半角) 		とりあえず提示しました。
} U+007D &rbrace; 右中括弧
(半角) 		とりあえず提示しました。
[ U+005B &lbrack; 左大括弧
(半角) 		とりあえず提示しました。
] U+005D &rbrack; 右大括弧
(半角) 		とりあえず提示しました。
  1. <div>&lt;div>TEXT&lt;/div></div>
  2. <div>&lt;!--TEXT</div>

< (左山括弧) は &lt; と文字実体参照を用います。

<div>TEXT</div>
<!--TEXT
  1. <input value="&gt;右山括弧">
  2. <div>TEXT--&gt;</div>

> (右山括弧) は &gt; と文字実体参照を用います。

TEXT -->
  1. <input value="&amp;gt;アンパサンド">

& (アンパサンド) は &amp; と文字実体参照を用います。

  1. <input value="&quot;引用符&quot;">

" (二重引用符) は &quot; と文字実体参照を用います。

  1. <input value="&apos;単一引用符&apos;">

' (一重引用符) は &apos; と文字実体参照を用います。

  1. <input value=Attribute&nbsp;Value>
  2. <br>AttributeValue&nbsp;Value
  3. <br>Attribute&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Value
  4. <pre>Attribute&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Value</pre>

  (空白) は &nbsp; と文字実体参照を用います。&nbsp; は制御コードなので、空白そのままを文字参照で表したい場合は &#32; と数値文字参照を用います。

HTMLでのホワイトスペースの扱いについて、「HTMLのホワイトスペース」のページで、改めて記述しています。


AttributeValue Value
Attribute     Value 
Attribute     Value
  1. <input value=Attribute&NewLine;Value>
  2. <br>AttributeValue&NewLine;Value
  3. <br>Attribute&NewLine;Value
  4. <pre>Attribute&NewLine;Value</pre>

(改行) は &NewLine; と文字実体参照を用います。&NewLine; は制御コードなので、改行を要素・タグで表したい場合は <br> とbr要素を用います。

HTMLでのホワイトスペースの扱いについて、「HTMLのホワイトスペース」のページで、改めて記述しています。


AttributeValue Value
Attribute Value 
Attribute
Value
  1. <input id="iinJs021">
  2. <br><button type="button" onclick="document.getElementById('ispJs021').textContent = 'U+' + document.getElementById('iinJs021').value.charCodeAt().toString(16).padStart(5, '0').toUpperCase();">変換</button>
  3. <br><span id="ispJs021"></span>

文字からUnicodeに変換する仕掛けを用意してみました。 処理は、文字列の先頭 1 文字を取得して編集するものです。 名前付き文字参照の名前を探す為にも、Unicodeが判った方が良いかと用意しました。

一応、仕掛け自体のコードも、上に提示しています。



3.数値文字参照

数値文字参照は、
文書文字集合における
該当文字を
ISO 10646の文字番号で
指定する方法です。

数値文字参照は、10進数もしくは16進数によって文書文字集合における該当文字をISO 10646の文字番号で指定する方法です。

16進数による指定は元々のSGMLの規格には存在しなかったが、HTML 4.0で規格化されました。16進数表記の際には大文字小文字の区別がありません。

HTML Living Standardでは、10 進整数で指定する方法を10進数値文字参照, 16 進整数で指定する方法を16進数値文字参照と言い、U+0026 ( & : アンパサンド文字) の後には、 U+0023 ( # : 数字記号文字 ) が続き、10進数値文字参照ではその後に 1 つ以上の ASCII 数字が続く必要があります。これは、コードポイントに対応する 10 進整数を表します。 数字の後には、U+003B ( ; : セミコロン文字) が続く必要があります。16進数値文字参照ではその後には、U+0078 ( x : LATIN SMALL LETTER X 文字) または U+0058 ( X : LATIN CAPITAL LETTER X 文字) が続き、 その後に 1 つ以上の ASCII 16 進数字が続く必要があります。これは、コードポイントに対応する 16 進整数を表します。 数字の後には、U+003B ( ; : セミコロン文字) が続く必要があります。

  1. &#20253;

数値文字参照での、10進数によって文書文字集合における該当文字(この例では「伝」)をISO 10646の文字番号で指定する方法です。番号の前に &# を、末尾に ; を付与します。

伝
  1. &#x4F1D;

数値文字参照での、16進数によって文書文字集合における該当文字(この例では「伝」)をISO 10646の文字番号で指定する方法です。番号の前に &#x を、末尾に ; を付与します。

伝
  1. <input value=Attribute&#32;Value>
  2. <br>AttributeValue&#32;Value
  3. <br>Attribute&#32;&#32;&#32;&#32;&#32;Value

(空白) を &#32; と数値文字参照を用いた例です。input要素の例では、文字実体参照の&nbsp;と違いがないですが、条件によっては無視されたり纏められたりの扱いが違います。

HTMLでのホワイトスペースの扱いについて、「HTMLのホワイトスペース」のページで、改めて記述しています。


AttributeValue Value
Attribute Value
  1. <input id="iinJs031">
  2. <br><button type="button" onclick="document.getElementById('ispJs031').textContent = '&#' + parseInt(document.getElementById('iinJs031').value, 16) { ; document.getElementById('ispJs032').textContent = String.fromCharCode(parseInt(document.getElementById('iinJs031').value, 16) {);">変換</button>
  3. <br><span id="ispJs031"></span>
  4. <br><span id="ispJs032"></span>

Unicode の16進から10進に変換する仕掛けを用意してみました。 処理は、16進の数字のみを指定して編集するものです。 意図する文字か確認する為にも、その10進数のコードを元に、文字も編集しています。 制御コードなどは目視で確認できませんが、何かに使えるかと用意しました。

一応、仕掛け自体のコードも、上に提示しています。




4.気を付ける点

文字参照の使い方に
注意が必要です。

& (アンパサンド) は &amp; と表せる訳ですが、この表現でも & という文字が現れる訳です。つまりその表記が文字参照を用いた後なのか前なのか判断が難しいという事です。 なので、安易に & を &amp; と置き換えると、誤って &amp; を &amp;amp; と置き換える事もありえます。

ツールによっては、文字参照に置き換えてくれる物もあります。元の文字データが既に文字参照を用いた物か否かも、配慮が必要です。