"CSS Tips Factory" : Presented by Nishishi via WordPress.

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

今日は時間がないので、番号付きリストのネタでお茶を濁す…。(^_^;)

ol要素とli要素とで作る番号付きリストには、各項目の先頭に数字で番号が振られます。この1・2・3…という算用数字での番号は、なんと「あ・い・う…」のようにひらがなに置き換えることもできます。驚きです。

リストの先頭数字を変化させるには、list-style-typeプロパティを使います。これに値「hiragana」を指定すると、「あ・い・う・え・お…」という50音順で「ひらがな」が割り振られます。
※ただし、サポートしてないブラウザもあるので、使い方には注意が必要です。(後述)

例えば、以下のようなHTMLがある場合…

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

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

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

先ほどのHTMLにこのスタイルシートを加えて表示させると、次のように見えます。

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

さて、「ひらがな」になってるでしょうか?(^_^;;;
………ならないブラウザもたくさんあります。少なくとも、Firefox 2.0では「あ・い・う」と振られているのですが。(^_^;;; もし、お使いのブラウザでは「ひらがな」になっていない場合は、Firefoxなどで見てみて下さい…。

ブラウザによっては、「ひらがな」にならず、ただ普通に(何も指定しない場合と同様に)「1・2・3…」と算用数字で振られます。まあ、ただ「箇条書きを書きたい」というだけなら、それでもあんまり困ることはないと思います。

しかし。

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

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

ううーん。これはTIPSと言えるのか?(^_^;;;

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。