《2007/5/20 日曜日 23:59:26 公開》
番号付きリストで「ひらがな」を振る [リスト]
今日は時間がないので、番号付きリストのネタでお茶を濁す…。(^_^;)
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にこのスタイルシートを加えて表示させると、次のように見えます。
- 最初の箇条書き項目
- 2番目の箇条書き項目
- 3番目の箇条書き項目
さて、「ひらがな」になってるでしょうか?(^_^;;;
………ならないブラウザもたくさんあります。少なくとも、Firefox 2.0では「あ・い・う」と振られているのですが。(^_^;;; もし、お使いのブラウザでは「ひらがな」になっていない場合は、Firefoxなどで見てみて下さい…。
ブラウザによっては、「ひらがな」にならず、ただ普通に(何も指定しない場合と同様に)「1・2・3…」と算用数字で振られます。まあ、ただ「箇条書きを書きたい」というだけなら、それでもあんまり困ることはないと思います。
しかし。
何かの手順を示す場合とか、選択肢を示す場合とか、「割り振られている番号が重要」な場面ではちょっと困ります。
例えば、「正解は、『か』です!」…とか書いても、「あ・い・う…」じゃなくて「1・2・3…」としか見えてない環境では、意味不明になってしまいます。
というわけで、「割り振られている番号(文字)が重要」になる書き方をする場合は、番号そのものに凝ったりせず、普通に「1・2・3…」という算用数字を使っておく方が良さそうな気がします。(^_^;)
ううーん。これはTIPSと言えるのか?(^_^;;;
このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]
| « 行内の画像を、文字の(上下方向での)中心に合わせて配置する |
前後のCSS TIPS < 旧 / 新 > | テーブルのヘッダの下だけ二重線にする » |
このCSS TIPSへのトラックバックURLは以下の通りです。
※言及リンクがないトラックバックは拒否されますのでご注意下さい。
コメントはまだありません。