ホームページのリストや見出しに数字を使う場合「1, 2, 3, 4, 5」より、
丸数字を使って「①, ②, ③, ④, ⑤」としたい時は良くありますね。

①　レンゲですくう
②　口を大きく開ける
③　口に放り込む
④　やけどする
⑤　水で冷やす

この丸数字リストをプログラム出力する場合の”簡単”設定方法をご紹介します

やりがちな例

丸数字をセットした配列を作ってループするPHPのサンプルです
これでもできますが、配列を作るところは無駄な作業になっていますね

$ary = ['①', '②','③', '④', '⑤','⑥', '⑦', '⑧', '⑨' ,'⑪' ,'⑫' , '⑬', '⑭', '⑮'];
$list = ['あ', 'い', 'し','て','る','の','サ','イ','ン'];
for($i = 0, $i < count($list); $i++) {
    echo $ary[$i + 1] . '：' . $list[$i];
}

おススメの方法

丸数字はhtmlコードを利用してループしましょう

$list = ['あ', 'い', 'し','て','る','の','サ','イ','ン'];
for($i = 0; $i < count($list); $i++) {
    $n = 9312 + $i;
    echo '&#'.$n . ';：' .  $list[$i];
}

解説

丸数字のhtmlコードは、&#9312 ～ &#9331 の連番になっているので、
ループしながらhtmlコードで設定しています(※最大20まで)

9312にカウントを足せばループ処理で表示することができます

簡単ですね

JavaScriptで対応する場合

JSではこんな感じです

let list = ['あ', 'い', 'し','て','る','の','サ','イ','ン'];
for(let i=0;i<list.length;i++) {
    let n = 9312 + i;
    document.write('&#' + n + ';　' + list[i] + '<br>');
}

【実行結果】

まとめ

特殊文字の扱いは面倒なこともありますが、このようにhtmlコードを利用することで
簡単にメンテナンス性の高いソースを書くことが出来ます。
ちょっとした工夫でこの旨さ！是非お試しください。

ウィズテクノロジーで一緒に働きませんか？
分野を限定せず幅広い事業を展開。新しい技術の導入にも積極的に取り組んでおり、チャレンジや成長する機会が沢山。
あなたの経験・知識を活かしながら一緒にIT業界を盛り上げて行きましょう！
採用情報詳細はコチラ