にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

番号付きリストで「ひらがな」・「カタカナ」を振る [リスト]

ol要素とli要素とで作る番号付きリストには、各項目の先頭に数字で番号が振られます。この1・2・3……という算用数字での番号は、「あ・い・う……」や「ア・イ・ウ……」のようにひらがなやカタカナに置き換えることもできます。list-style-typeプロパティに指定の値を書けば良いだけで、とても簡単です。

番号付きリストの番号をひらがなやカタカナに

ol要素とli要素とで作る番号付きリストには、各項目の先頭に数字で番号が振られます。この1・2・3……という算用数字での番号は、アルファベットで「A・B・C……」と順に振ることも可能ですが、なんと「あ・い・う……」や「ア・イ・ウ……」のようにひらがなやカタカナに置き換えることもできます。驚きです。

リストの先頭数字を変化させるには、list-style-typeプロパティを使います。これに値「hiragana」を指定すると、「あ・い・う・え・お……」という50音順で「ひらがな」が割り振られます。「katakana」を指定すると、「ア・イ・ウ・エ・オ……」という50音順で「カタカナ」が割り振られます。

※ただし、サポートしてないブラウザもあるので、使い方には注意が必要です。(後述)

list-style-typeプロパティを使って「番号付きリスト」の番号をひらがなやカタカナにする方法

以下のようなHTMLソースで番号付きリストを作っている場合を例にします。

HTMLソース

<ol class="japanese">
   <li>最初の箇条書き項目</li>
   <li>2番目の箇条書き項目</li>
   <li>3番目の箇条書き項目</li>
</ol>

以下のようなCSSソースを書けば、先頭の数字が50音順の「ひらがな」になります。

CSSソース

ol.japanese {
   list-style-type: hiragana;
}

先ほどのHTMLソースにこのCSSソースを加えて表示させると、次のように見えます。

  1. 最初の箇条書き項目
  2. 2番目の箇条書き項目
  3. 3番目の箇条書き項目

さて、「ひらがな」になってるでしょうか?(^_^;;;
いやいや、1・2・3……という算用数字にしか見えませんよ、という方々も多数おられると思います。

ひらがなやカタカナでの番号割り振りをサポートしていないブラウザもある

残念ながら、IEやEdgeでは値「hiragana」や「katakana」をサポートしていないようで、「ひらがな」や「カタカナ」にはならず、ただ普通に(何も指定しない場合と同様に)算用数字で振られます。

FirefoxやChromeなどで閲覧すると、ちゃんとひらがなで表示されるのが分かるはずです。Firefoxの場合は「あ、い、う、……」のように読点「、」記号を使って番号と内容が区切られていました。Chromeの場合は「あ.い.う.……」のように区切り記号自体は他の場合と同様にピリオドになっていましたが。

ひらがなやカタカナで割り振られることを前提にするのは避ける方が良い

まあ、ただ「箇条書きを書きたい」というだけなら、ブラウザによって表記の種類が異なってもあんまり困ることはないと思います。

しかし。

何かの手順を示す場合とか、選択肢を示す場合とか、「割り振られている番号が重要」な場面ではちょっと困ります。
例えば、回答の選択肢を列挙しておいて、最後に「正解は、『う』です!」などと書いても、「あ・い・う……」ではなくて「1・2・3……」としか見えていない環境では意味不明になってしまいます。

というわけで、「割り振られている番号(文字)が重要」になる書き方をする場合は、番号そのものに凝ったりせず、普通に「1・2・3……」という(デフォルトの)算用数字を使っておく方が良さそうな気がします。(^_^;)


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---