1. TOP
  2. デザイン
  3. html・webページで丸数字(①②③)を文字化けせずに記入する方法。

html・webページで丸数字(①②③)を文字化けせずに記入する方法。

 2018/11/01 デザイン
この記事は約 4 分で読めます。 2,033 Views

こんにちは、エリーです。

webページで丸数字を表示したいけど、機種依存文字なので文字化けしてしまう。

そんなときには「数値文字参照」という方法で表示することができます。

ちなみに丸数字とは

①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳

のような文字ですね。

CSSなどでわざわざ作らなくてもこのように丸数字を表示することができます。

さっそく解説していきます。

数値文字参照とは?

数値文字参照とはHTML文書においては、直接記述できない文字や記号(マークアップで使われる、半角の不等号「<」や「>」など)を表記する際に用いられる方法です。

Web制作などでの文字化けを防ぐため、10進数もしくは16進数の文字列に変換することで、いわゆる機種依存文字や、文章中にソースコードやHTMLタグをそのまま表記したいときなどに利用できます。

丸数字を表示するための数値文字参照一覧

以下の表の文字列を入力することで、ブラウザ上で丸数字を表示することができます。

表示 数値
文字参照
表示 数値
文字参照
&#9312; &#9322;
&#9313; &#9323;
&#9314; &#9324;
&#9315; &#9325;
&#9316; &#9326;
&#9317; &#9327;
&#9318; &#9328;
&#9319; &#9329;
&#9320; &#9330;
&#9321; &#9331;
表示 数値
文字参照
表示 数値
文字参照
表示 数値
文字参照
&#10102; &#10112; &#10122;
&#10103; &#10113; &#10123;
&#10104; &#10114; &#10124;
&#10105; &#10115; &#10125;
&#10106; &#10116; &#10126;
&#10107; &#10117; &#10127;
&#10108; &#10118; &#10128;
&#10109; &#10119; &#10129;
&#10110; &#10120; &#10130;
&#10111; &#10121; &#10131;

まとめ

手順などを説明するときに便利な丸数字。
簡単なのでぜご活用ください。

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

  • コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • 【2019】フリー数字フォント。おしゃれで見やすいおすすめをまとめ。無料で商用利用可能。

  • 【コピペでOK】CSSのみで作る矢印ボタン(アニメーションあり)

  • 投稿記事や固定ページにサブタイトルを挿入できるWordPressプラグイン「WP Subtitle」の使い方

  • フリーランスデザイナーが0から仕事を得るための集客術

  • 【2019年最新版】WEBサイトのデザインで参考にしたいギャラリーサイトまとめ

  • 記事をコピー複製できるWordPressプラグイン「Duplicate Post」の使い方