皆さま引き続きコロナには気をつけてお過ごしください！

【HTML/CSS】いろいろなリストを作ろう（数字編）

リスト HTML/CSS

前回、記号を使った一覧表示の書き方をご紹介しました。

【HTML/CSS】いろいろなリストを作ろう（記号編）
ルビ表示切替 HTMLでただテキストをだらだら書いていると読みづらいと思います。 表や一覧形式を使うだけでも、読みやすくなりますよね。 今回は、HTMLで一覧表示をする方法や、 表示できる種類について...
nekopress.castelodelego.org
2021.05.30

 

今回は、数字を使って一覧表示する方法をご紹介したいと思います。

 

contents
  1. 数字
    1. 算用数字
    2. 漢数字
    3. ローマ数字
    4. バイナリ（2進数）
    5. 8進数
    6. 16進数
    7. アラビア数字
    8. アルメニア数字
    9. ベンガル数字
    10. カンボジア数字（クメール語）
    11. デーヴァナーガリー数字
    12. ゲエズ数字
    13. グルジア数字
    14. グジャラート語
    15. グルムキー文字
    16. クメール数字
    17. 朝鮮のハングルの数値表記
    18. 朝鮮の漢数字（公的）
    19. 朝鮮の漢数字
    20. ラーオ語
    21. マラヤーラム語数字
    22. モンゴリアン数字
    23. ビルマ語（ミャンマー）
    24. オリヤー語
    25. ペルシャ語数字
    26. タミル語
    27. テルグ語数字
    28. タイ語数字
    29. チベット語数字
    30. 簡体字数字
    31. 繁体字数字
  2. まとめ
スポンサーリンク

数字

数字と言っても、以下のようにいろいろな書き方があります。
それぞれご紹介していきます。

  • 1 2 3
  • 一 二 三
  • ⅰ ⅱ ⅲ
  • Ⅰ Ⅱ Ⅲ

 

算用数字

算用さんよう数字の書き方は3つあります。

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
 不要
  • <ol class=”decimal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .decimal {
  • list-style-type: decimal;
  • }
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”decimal-leading-zero”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .decimal-leading-zero {
  •     list-style-type: decimal-leading-zero;
  • }

<ul>タグは、Unordered Listのことで、順序じゅんじょのないリストを作る際に使います。

<ol>タグは、Ordered Listのことで、順序のあるリストを作る際に使います。

1つ1つの項目は<li>タグを使います。

 

漢数字

漢数字は2つの方法で表示ができますが、
cjk-decimalは、Firefoxのみサポートされています。
そのため、cjk-ideographicを利用することをお勧すすめします。

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: cjk-ideographic”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .cjk-ideographic {
  •     list-style-type: cjk-ideographic;
  • }
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: cjk-decimal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .cjk-decimal {
  •     list-style-type: cjk-decimal;
  • }

 

ローマ数字

ローマ数字（大文字）

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: upper-roman”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .upper-roman {
  •     list-style-type: upper-roman;
  • }

ローマ数字（小文字）

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: lower-roman”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .lower-roman {
  •     list-style-type: lower-roman;
  • }

 

バイナリ（2進数）

バイナリは、2進数しんすうのことで、0か1を表示します。

10進数 2進数
0 0
1 1
2 10
3 11
4 100
5 101
6 110
7 111
8 1000
9 1001
10 1010
11 1011
12 1100
13 1101
14 1110
15 1111
16 10000
17 10001
18 10011

バイナリは、Safariのみ表示ができます。

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”binary”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .binary {
  •     list-style-type: binary;
  • }

 

8進数

8進数は「0、1、2、3、4、5、6、7」までの数字を8個使って数を表す方法です。
10進数（私が一般的に使う数字）の「8」の場合、
8進数では「10」になります。

10進数 8進数
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 10
9 11
10 12
11 13
12 14
13 15
14 16
15 17
16 20
17 21
18 22

8進数は、Safariのみ表示ができます。

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: octal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .octal {
  •     list-style-type: octal;
  • }

 

16進数

16進数は「0～9とA～Fまでの数字とアルファベット」を使って数を表す方法です。

10進数（私が一般的に使う数字）の「10」の場合、
16進数では「A」、

10進数の「16」の場合、
16進数では「10」になります。

10進数 16進数
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F
16 10
17 11
18 12
19 13
20 14
21 15
22 16
23 17
24 18
25 19
26 1A
27 1B
28 1C
29 1D
30 1E
31 1F

16進数も、Safariのみ表示ができます。

16進数はアルファベットを使うため、大文字／小文字の2種類あります。

16進数（大文字）

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: upper-hexadecimal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .upper-hexadecimal {
  •     list-style-type: upper-hexadecimal;
  • }

16進数（小文字）

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: lower-hexadecimal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .lower-hexadecimal {
  •     list-style-type: lower-hexadecimal;
  • }

 

アラビア数字

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”arabic-indic”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .arabic-indic {
  •     list-style-type: arabic-indic;
  • }

 

アルメニア数字

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: armenian”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .armenian {
  •     list-style-type: armenian;
  • }

 

ベンガル数字

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”bengali”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .bengali {
  •     list-style-type: bengali;
  • }

 

カンボジア数字（クメール語）

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”cambodian”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .cambodian {
  •     list-style-type: cambodian;
  • }

 

デーヴァナーガリー数字

デーヴァナーガリー数字はインドで使われています。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”devanagari”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .devanagari {
  •     list-style-type: devanagari;
  • }

 

ゲエズ数字

Firefoxでのみサポートされています。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: ethiopic-numeric”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .ethiopic-numeric {
  •     list-style-type: ethiopic-numeric;
  • }

 

グルジア数字

画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: georgian”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .georgian {
  •     list-style-type: georgian;
  • }

 

グジャラート語

グジャラート語は、インド西部のグジャラート州しゅうの公用語こうようごとして使われている言語です。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”gujarati”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .gujarati {
  •     list-style-type: gujarati;
  • }

 

グルムキー文字

グルムキー文字は、インドのブラーフミー文字から派生はせいした文字体系たいけいで、
主にインドのパンジャーブ州しゅう内ないのシク教徒きょうとによってパンジャーブ語を表記ひょうきするのに使われています。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”gurmukhi”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .gurmukhi {
  •     list-style-type: gurmukhi;
  • }

 

クメール数字

クメール数字は、オーストロアジア語族ごぞくのモン・クメール語派ごはに属ぞくする言語で、
カンボジアで使われています。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”khmer”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .khmer {
  •     list-style-type: khmer;
  • }

 

朝鮮のハングルの数値表記

IE（Internet Explorer）と、Safariでは見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”korean-hangul-formal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .korean-hangul-formal {
  •     list-style-type: korean-hangul-formal;
  • }

 

朝鮮の漢数字（公的）

IE（Internet Explorer）と、Safariでは見ることができません。
画面表記 HTMLコード CSS
  • 1番目
  • 2番目
  • 3番目
  • <ol class=”korean-hanja-formal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .korean-hanja-formal {
  •     list-style-type: korean-hanja-formal;
  • }

 

朝鮮の漢数字

IE（Internet Explorer）と、Safariでは見ることができません。
画面表記 HTMLコード CSS
  • 1番目
  • 2番目
  • 3番目
  • <ol class=”korean-hanja-informal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .korean-hanja-informal {
  •     list-style-type: korean-hanja-informal;
  • }

 

ラーオ語

ラーオ語はラオスの公用語として使われています。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”lao”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .lao {
  •     list-style-type: lao;
  • }

 

マラヤーラム語数字

南インドのケーララ州などで話される言語です。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”malayalam”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .malayalam {
  •     list-style-type: malayalam;
  • }

 

モンゴリアン数字

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”mongolian”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .mongolian {
  •     list-style-type: mongolian;
  • }

 

ビルマ語（ミャンマー）

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”myanmar”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .myanmar {
  •     list-style-type: myanmar;
  • }

 

オリヤー語

オリヤ族の人々が話すオリヤー語（マガダン語）は、東インドのオリッサ州の公用語です。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”oriya”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .oriya {
  •     list-style-type: oriya;
  • }

 

ペルシャ語数字

イランを中心とする中東ちゅうとう地域で話される言語です。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”persian”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .persian {
  •     list-style-type: persian;
  • }

 

タミル語

タミル語は、インドのタミル・ナードゥ州、スリランカとシンガポールの公用語の1つです。

Firefoxでのみ見ることができます。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol style=”list-style-type: tamil”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .tamil {
  •     list-style-type: tamil;
  • }

 

テルグ語数字

インド南東部のアーンドラ・プラデーシュ州およびテランガーナ州の公用語です。

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”telugu”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .telugu {
  •     list-style-type: telugu;
  • }

 

タイ語数字

IE（Internet Explorer）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”thai”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .thai {
  •     list-style-type: thai;
  • }

 

チベット語数字

IE（Internet Explorer）と、Firefox（Android）では見ることができません。
画面表記 HTMLコード CSS
  1. 1番目
  2. 2番目
  3. 3番目
  • <ol class=”tibetan”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .tibetan {
  •     list-style-type: tibetan;
  • }

 

簡体字数字

画面表記 HTMLコード CSS
  • 1番目
  • 2番目
  • 3番目
  • <ol class=”simp-chinese-formal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .simp-chinese-formal {
  •     list-style-type: simp-chinese-formal;
  • }

 

繁体字数字

画面表記 HTMLコード CSS
  • 1番目
  • 2番目
  • 3番目
  • <ol class=”trad-chinese-formal”>
  •  <li>1番目</li>
  •  <li>2番目</li>
  •  <li>3番目</li>
  • </ol>
  • .trad-chinese-formal {
  •     list-style-type: trad-chinese-formal;
  • }

 

スポンサーリンク

まとめ

数字も国によってさまざまな形がありますね。

数字を通して、外国を知る。
それも1つの楽しみ方だなと思いました。

なお、各スタイルのブラウザごとの使用可否は、以下サイトを参照させていただいています。

list-style-typeの詳細

スポンサーリンク

コメント

ホーム
トップ
タイトルとURLをコピーしました