画像を使わずに、丸付き数字（まるつきすうじ）！　超簡単です。

カテゴリー︎： 【CSS】

数字を丸で囲っているのを

 

丸付き数字（まるつきすうじ）

 
というそうです。（*数字丸　すうじまる）
 
これ⇒❶❷❸
 
もし、この丸付き数字（まるつきすうじ）をホームページに表示するのであれば
 
画像化するかなぁ。。。というふうに考えるのではないでしょうか。
 
しかし、HTMLで記述して、CSSで装飾すれば　超簡単です！

 
下記の通りにHTMLを記述すると
 
【HTML】

<span>&#10102;</span>
 
<span>&#10103;</span>
 
<span>&#10104;</span>
 
<span>&#10105;</span>
 
<span>&#10106;</span>
 
<span>&#10107;</span>
 
<span>&#10108;</span>
 
<span>&#10109;</span>
 
<span>&#10110;</span>
 
<span>&#10111;</span>

 
【ブラウザ表示】
❶

❷

❸

❹

❺

❻

❼

❽

❾

❿

 
と　表示されます。

 
ちなみに
 
下記のように記述すると

<span>&#9312;</span>
 
<span>&#9313;</span>
 
<span>&#9314;</span>
 
<span>&#9315;</span>
 
<span>&#9316;</span>
 
<span>&#9317;</span>
 
<span>&#9318;</span>
 
<span>&#9319;</span>
 
<span>&#9320;</span>
 
<span>&#9321;</span>

 

①

②

③

④

⑤

⑥

⑦

⑧

⑨

⑩
 
と　表示されます。
 
 
参考サイト⇒http://ochikochi.com/tool/character/
 
 

さらにこれを、CSSで装飾するためにクラス名をつけます。

サンプル

【HTML】

<span class="num_color_blue">&#10102;</span>
 
<span class="num_color_pink">&#10103;</span>
 
<span class="num_color_orange">&#10104;</span>

　

【CSS】

.num_color_blue{
    color: blue;
    font-size: 2rem;
}
 
.num_color_pink{
    color: pink;
    font-size: 2rem;
}
 
.num_color_orange{
    color: orange;
    font-size: 2rem;
}

 
↓こう表示されました。

❶

❷

❸

  

１〜２０までのサンプル

【HTML】

<span class="num_color_blue_l">&#9312;</span>
 
<span class="num_color_blue_l">&#9313;</span>
 
<span class="num_color_blue_l">&#9314;</span>
 
<span class="num_color_blue_l">&#9315;</span>
 
<span class="num_color_blue_l">&#9316;</span>
 
<span class="num_color_blue_m">&#9317;</span>
 
<span class="num_color_blue_m">&#9318;</span>
 
<span class="num_color_blue_m">&#9319;</span>
 
<span class="num_color_blue_m">&#9320;</span>
 
<span class="num_color_blue_m">&#9321;</span>
 
 
<span class="num_color_blue_s">&#9322;</span>
 
<span class="num_color_blue_s">&#9323;</span>
 
<span class="num_color_blue_s">&#9324;</span>
 
<span class="num_color_blue_s">&#9325;</span>
 
<span class="num_color_blue_s">&#9326;</span>
 
<span class="num_color_blue_s">&#9327;</span>
 
<span class="num_color_blue_s">&#9328;</span>
 
<span class="num_color_blue_s">&#9329;</span>
 
<span class="num_color_blue_s">&#9330;</span>
 
<span class="num_color_blue_s">&#9331;</span>

 

.num_color_blue_l{
    color: blue;
    font-size: 4rem;
}
 
.num_color_blue_m{
    color: blue;
    font-size: 3rem;
}
 
 
.num_color_blue_s{
    color: blue;
    font-size: 1rem;
}

 
記述すると
  

①

②

③

④

⑤

⑥

⑦

⑧

⑨

⑩

⑪

⑫

⑬

⑭

⑮

⑯

⑰

⑱

⑲

⑳

 

こんな感じです。
 
もちろん、スマートフォンにも対応しているので
 
丸付き数字（まるつきすうじ）を扱う時には
 
HTMLとCSSを使ってみてはいかがでしょうか。