[いまからHTML5]本文で使っちゃいけない文字のこと

HTML/CSSコーディング

今回はちょっとHTMLタグの説明をはなれて、文書の本文を書くときに気をつけなきゃいけないことについて。HTML5だけでなく以前のバージョンでも同じ話ではあるのですが。特殊な文字を表示する場合にはどうしなければならないか、という話です。

タグの中で使ってる特殊文字を本文内に使っちゃうと

前回前々回と読んだ方はHTML文書書くときはタグというもので文書にしるし付けをしていく、というのはわかっていただけたと思いますが、このタグをあらわす「<」とか「>」という記号そのものを本文中に使っちゃうとどうなるでしょう?

結論を言うと「<」と「>」でくくられてるものはたいていのブラウザではその間をタグとして解釈してしまいます。たとえばHTMLソースの本文中に

今日はとっても<いい天気>ですね

と書いちゃうと、<いい天気>の部分は意味不明のタグとして解釈されて無視されたりします(その辺の挙動はブラウザによって違ったりするかもしれないけど)。

同様にHTMLコードを書くにあたって特別な意味づけを持っている「"」や「&」という文字もそのまま本文中に書くことは出来ません。

ではどうすれば良いかというとそのような特殊文字は別な表示法に置き換えて書かなければなりません。実体参照とか数値参照といわれるものです。

具体的には

  • 【<】:&lt;(実体参照)/&#060;(ユニコード10進数表示による数値参照)
  • 【>】:&gt;(実体参照)/&#062;(ユニコード10進数表示による数値参照)
  • 【"】:&quot;(実体参照)/&#034;(ユニコード10進数表示による数値参照)
  • 【&】:&amp;(実体参照)/&#038;(ユニコード10進数表示による数値参照)

と書き換えます。ちょっとわかりにくいですかね?先ほどの例の

今日はとっても<いい天気>ですね

というのをブラウザに表示するためには、HTMLファイルのなかでは


<p>今日はとっても&lt;いい天気&gt;ですね</p>

のように表記する、ということです。なんとなくお分かりいただけたでしょうか(pタグについてはまだ説明していませんのでまた後日)。

通常のコーディングではさしあたって上の4つだけ覚えておけば問題ないかと思いますが、キリル文字やギリシャ文字、数学記号などについても入力が困難だったり機種依存文字だったりで製作者の意図の通り表示されない場合があります。

そういった文字化けなどの問題を起こさないように特殊文字はできるだけ実体参照や数値参照を使ったほうが無難ということです。

以下にHTMLでの実体/数値参照の一覧を載せておきますので参考に。

HTML文字実体参照・ユニコード10進数値参照一覧

表示 文字符号 10進数 呼称(英)
< &lt; &#060; Left angle bracket
> &gt; &#062; Right angle bracket
& &amp; &#038; Ampersand
" &quot; &#034; Duble quote mark
  &nbsp; &#160; Nonbreaking space
¡ &iexcl; &#161; Inverted exclamation mark
¢ &cent; &#162; Cent sign
£ &pound; &#163; Pound sterling symbol
¤ &curren; &#164; Currency symbol
¥ &yen; &#165; Yen symbol
¦ &brvbar; &#166; Broken vertical bar
§ &sect; &#167; Section symbol
¨ &uml; &#168; Umalaut/Dieresis
© &copy; &#169; Copyright sign
ª &ordf; &#170; Ordinal indicator,Feminine
« &laquo; &#171; Left angle quote mark
¬ &not; &#172; "not" symbol
­ &shy; &#173; Soft hyphen
® &reg; &#174; Registered trademark symbol
¯ &macr; &#175; macron
° &deg; &#176; Degree symbol
± &plusmn; &#177; Plus/minus symbol
² &sup2; &#178; Superscript two
³ &sup3; &#179; Superscript three
´ &acute; &#180; Acute accent
µ &micro; &#181; Micro symbol
&para; &#182; Paragraph symbol
· &middot; &#183; Middle dot
¸ &cedil; &#184; Cedilla
¹ &sup1; &#185; Superscript one
º &ordm; &#186; Ordinal indicator
» &raquo; &#187; Angle quote mark, right
¼ &frac14; &#188; Fraction one quarter
½ &frac12; &#189; Fraction one half
¾ &frac34; &#190; Fraction three quarters
¿ &iquest; &#191; Inverted question mark
À &Agrave; &#192; Latin capital A with accent
Á &Aacute; &#193; Latin capital A with acute accent
 &Acirc; &#194; Latin capital A with circumflex
à &Atilde; &#195; Latin capital A with tilde accent
Ä &Auml; &#196; Latin capital A with diaeresis accent
Å &Aring; &#197; Latin capital A with ring above
Æ &AElig; &#198; Latin capital AE diphthong
Ç &Ccedil; &#199; Latin capital C with cedilla
È &Egrave; &#200; Latin capital E with grave accent
É &Eacute; &#201; Latin capital E with acute accent
Ê &Ecirc; &#202; Latin capital E with circumflex
Ë &Euml; &#203; Latin capital E with umlaut
Ì &Igrave; &#204; Latin capital I with grave accent
Í &Iacute; &#205; Latin capital I with acute accent
Î &Icirc; &#206; Latin capital I with circumflex
Ï &Iuml; &#207; Latin capital I with diaeresis accent
Ð &ETH; &#208; Latin capital "Tth" (Icelandic)
Ñ &Ntilde; &#209; Latin capital N with tilde
Ò &Ograve; &#210; Latin capital O with grave accent
Ó &Oacute; &#211; Latin capital O with acute accent
Ô &Ocirc; &#212; Latin capital O with circumflex
Õ &Otilde; &#213; Latin capital O with tilde
Ö &Ouml; &#214; Latin capital O with umlaut
× &times; &#215; Multiplication symbol
Ø &Oslash; &#216; Latin capital O with slash
Ù &Ugrave; &#217; Latin capital U with grave accent
Ú &Uacute; &#218; Latin capital U with acute accent
Û &Ucirc; &#219; Latin capital U with circumflex
Ü &Uuml; &#220; Latin capital U with umlaut accent
Ý &Yacute; &#221; Latin capital Y with acute accent
Þ &THORN; &#222; Latin capital "Thorn" (Icelandic)
ß &szlig; &#223; Latin small sharp s (German)
à &agrave; &#224; Latin small a with grave accent
á &aacute; &#225; Latin small a with acute accent
â &acirc; &#226; Latin small a with circumflex
ã &atilde; &#227; Latin small a with tilde
ä &auml; &#228; Latin small a with umlaut mark
å &aring; &#229; Latin small a with ring
æ &aelig; &#230; Latin small ae dipththong (Ligature)
ç &ccedil; &#231; Latin small c with cedilla
è &egrave; &#232; Latin small e with grave accent
é &eacute; &#233; Latin small e with acute accent
ê &ecirc; &#234; Latin small e with circumflex
ë &euml; &#235; Latin small e with umlaut mark
ì &igrave; &#236; Latin small i with grave accent
í &iacute; &#237; Latin small i with acute accent
î &icirc; &#238; Latin small i with circumflex
ï &iuml; &#239; Latin small i with umlaut mark
ð &eth; &#240; Latin small "eth" (Icelandic)
ñ &ntilde; &#241; Latin small n with tilde
ò &ograve; &#242; Latin small o with grave accent
ó &oacute; &#243; Latin small o with acute accent
ô &ocirc; &#244; Latin small o with circumflex
õ &otilde; &#245; Latin small o with tilde
ö &ouml; &#246; Latin small o with umlaut mark
÷ &divide; &#247; Division symbol
ø &oslash; &#248; Latin small o with slash
ù &ugrave; &#249; Latin small u with grave accent
ú &uacute; &#250; Latin small u with acute accent
û &ucirc; &#251; Latin small u with circumflex
ü &uuml; &#252; Latin small u with umlaut mark
ý &yacute; &#253; Latin small y with acute accent
þ &thorn; &#254; Latin small "Thorn" (Icelandic)
ÿ &yuml; &#255; Latin small y with umlaut mark
Α &Alpha; &#913; Greek capital letter alpha
Β &Beta; &#914; Greek capital letter beta
Γ &Gamma; &#915; Greek capital letter gamma
Δ &Delta; &#916; Greek capital letter delta
Ε &Epsilon; &#917; Greek capital letter epsilon
Ζ &Zeta; &#918; Greek capital letter zeta
Η &Eta; &#919; Greek capital letter eta
Θ &Theta; &#920; Greek capital letter theta
Ι &Iota; &#921; Greek capital letter iota
Κ &Kappa; &#922; Greek capital letter kappa
Λ &Lambda; &#923; Greek capital letter lambda
Μ &Mu; &#924; Greek capital letter mu
Ν &Nu; &#925; Greek capital letter nu
Ξ &Xi; &#926; Greek capital letter xi
Ο &Omicron; &#927; Greek capital letter omicron
Π &Pi; &#928; Greek capital letter pi
Ρ &Pho; &#929; Greek capital letter rho
Σ &Sigma; &#931; Greek capital letter sigma
Τ &Tau; &#932; Greek capital letter Tau
Υ &Upsilon; &#933; Greek capital letter upsilon
Φ &Phi; &#934; Greek capital letter phi
Χ &Chi; &#935; Greek capital letter chi
Ψ &Psi; &#936; Greek capital letter psi
Ω &Omega; &#937; Greek capital letter omega
α &alpha; &#945; Greek small letter alpha
β &beta; &#946; Greek small letter beta
γ &gamma; &#947; Greek small letter gamma
δ &delta; &#948; Greek small letter delta
ε &epsilon; &#949; Greek small letter epsilon
ζ &zeta; &#950; Greek small letter zeta
η &eta; &#951; Greek small letter eta
θ &theta; &#952; Greek small letter theta
ι &iota; &#953; Greek small letter iota
κ &kappa; &#954; Greek small letter kappa
λ &lambda; &#955; Greek small letter lambda
μ &mu; &#956; Greek small letter mu
ν &nu; &#957; Greek small letter nu
ξ &xi; &#958; Greek small letter xi
ο &omicron; &#959; Greek small letter omicron
π &pi; &#960; Greek small letter pi
ρ &rho; &#961; Greek small letter rho
ς &sigmaf; &#962; Greek small letter final sigma
σ &sigma; &#963; Greek small letter sigma
τ &tau; &#964; Greek small letter tau
υ &upsilon; &#965; Greek small letter upsilon
φ &phi; &#966; Greek small letter phi
χ &chi; &#967; Greek small letter chi
ψ &psi; &#968; Greek small letter psi
ω &omega; &#969; Greek small letter omega
&ndash; &#8211; en size dash
&mdash; &#8212; em size dash
&lsquo; &#8216; Left single quotation mark
&rsquo; &#8217; Right single quotation mark
&sbquo; &#8218; Low single quotation mark
&ldquo; &#8220; Left double quotation mark
&rdquo; &#8221; Right double quotation mark
&bdquo; &#8222; Low double quotation mark
&dagger; &#8224; Dagger mark
&Dagger; &#8225; Double dagger mark
&bull; &#8226; Bullet, Black small circle
&hellip; &#8230; Three dot leader
&permil; &#8240; Per mille sign
&prime; &#8242; Prime, Minutes
&Prime; &#8243; Double prime, Seconds
&lsaquo; &#8249; Single left angle quotation mark
&rsaquo; &#8250; Single right angle quotation mark
&oline; &#8254; Overline, Spacing overscore
&frasl; &#8260; Fraction slash
&euro; &#8364; Euro sign
&weierp; &#8472; Script capital P
&image; &#8465; Blackletter capital I
&real; &#8476; Blackletter capital R
&trade; &#8482; Trade mark sign
&alefsym; &#8501; Aref Symbol
&larr; &#8592; Leftwards arrow
&rarr; &#8594; Rightwards arrow
&darr; &#8595; Downwards arrow
&harr; &#8596; Left right arrow
&crarr; &#8629; Carrige return symbol
&lArr; &#8656; Leftwards double arrow
&uArr; &#8657; Upwards double arrow
&rArr; &#8658; Rightwards double arrow
&dArr; &#8659; Downwards double arrow
&hArr; &#8660; Left right double arrow
&loz; &#9674; Lozenge
&spades; &#9824; Black spade suit
&clubs; &#9827; Black club suit, Shamrock
&hearts; &#9829; Black heart suit, Valentine
&diams; &#9830; Black diamond suit
&forall; &#8704; For all
&part; &#8706; Partial differential
&exist; &#8707; There exists
&empty; &#8709; Empty set, Null set
&nabla; &#8711; Nabla, Backward difference
&isin; &#8712; Elemant of
&notin; &#8713; Not an elemant of
&ni; &#8715; Contains as member
&prod; &#8719; n-ary product, Product sign
&sum; &#8721; n-ary sumation
&minus; &#8722; Minus sign
&lowast; &#8727; Asterisk operator
&radic; &#8730; Square root, Radical sign
&prop; &#8733; Proportional to
&infin; &#8734; Infinity
&ang; &#8736; Angle
&and; &#8743; Logical and, Wedge
&or; &#8744; Logical or, Vee
&cap; &#8745; Intersection, Cap
&cup; &#8746; Union, Cup
&int; &#8747; Intergral
&there4; &#8756; Therefore
&sim; &#8764; Tilde opetator, Varies with
&cong; &#8773; Approximately equal to
&asymp; &#8776; Almost equal to
&ne; &#8800; Not equal to
&equiv; &#8801; Identical to
&le; &#8804; Less then or equal to
&ge; &#8805; Greate then or equal to
&sub; &#8834; Subset of
&sup; &#8835; Superset of
&nsub; &#8836; Not a superset of
&sube; &#8838; Subset of or equal to
&supe; &#8839; Superset of or equal to
&oplus; &#8853; Circled plus, Direct sum
&otimes; &#8855; Circled times, Vector product
&perp; &#8869; Up tack

まとめ

上の一覧丸暗記してる人は多分いないと思います。あるいは実体・数値参照使わずに書いてるけどたまたま問題発生していないので気にしてない、なんてこともあるかもしれません。だからといって放置しておいていいわけでもないんですけど。

なのでまずは

  • 本文中の「<」「>」「"」「&」については必ず「&lt;」「&gt;」「&quot;」「&amp;」に置き換える
  • 普段使わない特殊な文字・記号を使うときは一度一覧表を参照してみる
  • 参考資料としてこのエントリをブクマしておく(まぁいやらしい…)

そんなことを頭の中に入れておいていただければと思います。

コメント

タイトルとURLをコピーしました