HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLシンボルとは？HTML文字エンティティの正しい使い方

HTMLページにテキストを記述していると、キーボードから直接入力できない文字や、HTMLで特別な意味を持つ予約文字を使いたい場面に遭遇します。こうした特殊文字は「エンティティ（実体参照）」と呼ばれます。本記事では、コード内でこれらの特殊文字を扱う方法を解説し、頻出エンティティの早見表もご紹介します。

HTMLコードをそのまま画面に表示させるには

シンボルの活用例として、画面上に表示したいコードブロックを作成するケースを考えてみましょう。ここで問題になるのは、HTMLコードをそのまま表示しようとしても、ブラウザがそれを「実行」してしまうという点です。

< と > は、HTMLにおける予約文字です。この問題を回避するには、該当する文字を「HTMLエンティティ」へ置き換えます。エンティティとは、いわばHTML文字コードの別名です。次のコードでは、エンティティを使うことで、生のコードブロックをそのまま画面に表示しています。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <code>
     <!--<code>タグで囲むだけでは、このHTMLはレンダリングされてしまう-->
     <p>Famous Baseball Players</p>
     <ul>
       <li>Babe Ruth</li>
       <li>Mickey Mantle</li>
       <li>Nolan Ryan</li>
     </ul>
   </code>
   &ltcode> <br>
     <!--特殊文字を文字参照に置き換える-->
     <!--
         &nbsp; === ノーブレークスペース（スペース4つ分 === タブ1つ分）
         &lt; === <
         &gt; === >
         &sol; === /
     -->
     &nbsp;&nbsp;&nbsp;&nbsp;&lt;p>Famous Baseball Players<&sol;p> <br>
     &nbsp&nbsp&nbsp&nbsp&ltul> <br>
       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Babe Ruth<&sol;li> <br>
       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Mickey Mantle<&sol;li> <br>
       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Nolan Ryan<&sol;li> <br>
     &nbsp&nbsp&nbsp&nbsp<&sol;ul> <br>
   &lt/code>
 </body>
</html>

最初のコードブロックを囲んでいた <code> タグでは、HTMLの処理を防ぐことができませんでした。一方、2つ目の <code> ブロック——文字参照で記述したもの——は、HTMLとして評価される代わりに、ソースコードがそのまま画面に表示されました。

文字エンティティの3つの記述方法

HTMLで特殊文字を表現する方法には、「16進数コード」「10進数コード」「エンティティ名（文字名）」の3種類があります。いずれも & で始まるのが特徴です。以下に具体例を示します。

記号文字名10進数コード16進数コード説明
<&lt;&#60;&#x3C;小なり記号
©&copy;&#169;&#xA9;著作権表示
&&amp;&#38;&#x26;アンパサンド

これらのコードは、HTML4で導入されたエンティティとほぼ互換性があります。どの記法を選ぶかは、実際に試しながら判断すれば問題ありません。すべてのシンボルを暗記しようと時間をかける必要はないでしょう。日常的に使う機会は限られているからです。W3Schoolsには、テキスト内で利用できる全エンティティの充実したリファレンスが用意されています。まずHTML4で導入されたシンボルの一覧を掲載したページがあり、同サイトの次章には、より新しいシンボルがまとめられています。3つの記法がすべて用意されているシンボルもあれば、一部のみのものもあります。さらに、ブラウザ間の互換性もシンボルによって異なる点に注意しましょう。

81%の受講者が、ブートキャンプ参加後にテック業界でのキャリア展望への自信が高まったと回答しています。今すぐブートキャンプとのマッチングを試してみましょう。

ブートキャンプ修了者の平均的な転職期間は、受講開始から初めての仕事獲得まで6ヶ月未満でした。

まとめ

大切なのは、シンボルの存在を認識し、必要になったときにコードを調べてプロジェクトで活用できるようにしておくことです。それさえ押さえておけば十分です。試行錯誤を重ねれば、あっという間に使いこなせるようになりますよ！

  1. HTML DOM Codeオブジェクトとは？基本的な使い方とサンプルコードを解説

    HTML DOM CodeオブジェクトとはHTML DOMのCodeオブジェクトは、HTML5の<code>タグに関連付けられたオブジェクトです。<code>要素でコード部分を囲むことで、プログラムコードをマークアップするために使用されます。Codeオブジェクトは、基本的に<code>要素そのものを表します。構文Codeオブジェクトの構文は以下のとおりです。Codeオブジェクトの作成var a = document.createElement("CODE");サンプルコードHTML DOM Codeオブジェクトの使用例を見てみましょう。ボ

  2. HTMLシンボルとは？実体参照を使って数学記号やギリシャ文字を表示する方法

    HTMLシンボル（特殊文字）とはHTMLシンボルとは、通常のキーボードには存在しない、物理学・数学・技術・通貨などのさまざまな記号を指します。こうした記号をWebページ上に表示させるためには、HTMLエンティティ名を使用します。もし対応するエンティティ名が存在しない場合は、10進数または16進数によるエンティティ番号を使うこともできます。基本構文HTMLシンボルを記述する際の基本的な書式は以下のとおりです。エンティティ名を使用する場合：&entityName;エンティティ番号（10進数）を使用する場合：&#entityNumber;エンティティ番号（16進数）を使用する場合：&