ページ

2012/11/10

PHP で ASCII コードを利用して CSS の list-style-type を再現する

CSS の list-style-type は ul 要素や ol 要素などに指定することができて、
以下のように表示したければ
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
以下のように指定します。
ol {
    list-style-type: upper-alpha;
}
<ol>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
</ol>
しかし、このABCなどのリストマーカー部分をリスト部分とは異なるデザインにしたい場合、
特に表示位置、色、大きさを調節したい場合はリストでは難しくなります。

HTML/CSSでは難しいのですが、動的なサイトだったためPHPで書くことができました。
リストマーカー部分が数値であれば簡単に for ループのインデックスが使えるのですが
リストマーカーが英字なので少しどうしたものかと思いました。
パッと思い浮かんだ選択肢は、アルファベットを持った配列を定義しておきインデックスで配列の要素を出力、
またはアルファベットを文字列で持ちインデックスでsubstrで1文字だけ出力、という2つ。

定義するのがめんどくさいし、ダサい実装でどうしたものかと考えていたら
C言語の入門書でアスキーコードを利用したことを思い出しました。
PHPでアスキーコードを利用したことがなかったのですが、
C言語でできることはPHPでもできるだろと探してみたらありました。

PHPでアスキーコードを利用する方法!

<?php
for($i = 0; $i < 26; $i++){
    echo chr(ord('A') + $i) . '.';
}
?>
chrがアスキーコードから文字を返してくれて、ordが文字のアスキーコードを返してくれます。