HTML で摂氏記号を書く

1. HTML で摂氏記号を書くには、小数点以下の記号を使いる
2. 16 進数の &#x2103 参照を使って HTML に摂氏記号を書く
3. 摂氏記号を HTML に書き込むには ° エンティティを用いる
4. <sup> タグを使った HTML での摂氏記号の書き方

この記事では、セルシウス度の記号を HTML で記述する多くの方法を紹介します。

HTML で摂氏記号を書くには、小数点以下の記号を使いる

セルシウス度℃のような記号は、キーボードから直接入力することはできません。記号は温度測定の単位です。

シンボルを HTML で記述しなければならない場合、最初は面倒に思えるかもしれません。しかし実際にはそうではありません。

℃のようなさまざまなシンボルには、シンボルを表すエンコーディングがあります。10 進参照の度セルシウス記号の UTF-8 エンコーディングは&#8451 です。

次の例に示すように、セルシウス度の記号を表すために、HTML で&#8451 参照を記述できます。

<p>
  Writing degree celsius using the decimal reference: &#8451;
</p>

16 進数の &#x2103 参照を使って HTML に摂氏記号を書く

16 進基準を使用して、セルシウス度の記号を表すこともできます。同等の 16 進参照は&#x2103 です。

最初の方法と同様の方法でエンコーディングを使用できます。以下に例を示します。

<p>
  Writing degree celsius using the hexadecimal reference: &#x2103;
</p>

摂氏記号を HTML に書き込むには ° エンティティを用いる

度セルシウス記号を HTML で記述するために、度記号°のエンコーディングを使用して、記号を文字 C と連結することもできます。シンボルをさまざまな形式で表すことができます。

学位記号の HTML エンティティは° です。10 進数と 16 進数の参照は° です。および°。

それらのいずれかを使用して、学位記号を表すことができます。以下のコード例は、これらのエンコーディングを文字 C とともに使用して、HTML で Celsius 度のシンボルを表す方法を示しています。

<p>
  Writing degree symbol using the HTML entity: &deg;C
</p>
<p>
  Writing degree symbol using the HTML code: &#176;C
</p>
<p>
  Writing degree symbol using the hexcode : &#xb0;C
</p>

<sup> タグを使った HTML での摂氏記号の書き方

最後のメソッドは、Celsius 度のシンボルを HTML で記述するための簡単なハックについて説明しています。このメソッドは、<sup> タグを使用して、文字 o の上書きを作成します。

文字を学位記号のように見せます。次に、文字を C 文字と連結できます。

出力は、Celsius 度のシンボルのように表示されます。ただし、この方法は、スクリーンリーダーがそのまま正確に読み取れないため、適切なオプションとは見なされません。

これは、視覚障害のあるユーザーにとっては問題になります。

たとえば、次の例に示すように、o 文字を <sup> タグで囲み、その後に C 文字を書き込みます。

<p>
  Writing degree celsius symbol using the &lt;sup&gt; hack: <sup>o</sup>C
</p>