HTMLで丸数字を書く方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで丸数字の書き方について解説しています。サイト上で丸数字のような環境に依存する文字を扱う際、適切な記述を行わないと文字化けをおこす可能性があります。文字コードの種類や文字化けを防ぐ書き方について学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLで丸数字を書く方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

丸数字の書き方について詳しく説明していくね!

大石ゆかり

お願いします!

 

丸数字一覧

丸数字とは数字を丸で囲った文字を指すものです。

例として、HTMLでは以下のような種類があります。

記号 文字参照
⓪
①
②
③
④
⑤
⑥
⑦
⑧
⑨
⑩
⑪
⑫
⑬
⑭
⑮
⑯
⑰
⑱
⑲

その他にも多くの種類があります。詳しくは以下を参考にしてください。

丸文字(Wikipedia)

 

文字化けの防ぎ方

コンピューターは数字しか処理しません。文字はすべて「文字コード」という文字を表す番号で管理しています。

それぞれの文字の形(イメージ)に付けられた番号で文字を構成しているといえるでしょう。

また、よく使われる文字コードには以下の種類があります。

 

  • ASCII

もっとも基礎的な文字コードです。半角英数字128文字から構成されており、全ての文字を1バイトで表します。例えば「A」はASCIIでは0x41(0xは16進数を表す)です。

  • Shift_JIS

日本語を表すために多く用いられていた文字コードです。全ての文字を2バイトで表します。亜種がWindowsで採用されてことで広く使われていました。例えば「あ」はShift_JISでは0x82E0です。

  • UTF-8

現在最も広く使われている標準的な文字コードです。Unicodeと呼ばれます。全ての文字を1から4バイトで表します。世界中の文字を扱えるため、標準的に使われるようになりました。例えば「あ」はUTF-8では0xe38182です。

そして、文字コードを誤ってコンピュータが解釈してしまうと違う文字が表示されてしまいます。

それが「文字化け」であり、以下は文字化けの例です。

丸数字を含む丸文字は機種依存文字の1種で、そのまま書くと文字化けの原因になります。

そのため文字参照という書き方で丸文字を表現します。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

丸数字の入力方法

丸数字を文字参照で入力するには「&#9312」などのように入力してください。

入力した内容をブラウザで表示すると以下のようになります。

具体的なサンプルプログラムは以下の通りです。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="Shift_JIS" />
  <title>sample</title>
  </head>
<body>
  <ul>
    <li>&#9312:いちばん</li>
    <li>&#9313:にばん</li>
    <li>&#9314:さんばん</li>
  </ul>
</body>
</html>

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

田島悠介

HTMLで丸数字を書く方法はよくわかったかい?

大石ゆかり

はい、分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。