ホームページに丸数字をhtmlコードを使ってプログラムで表示する時の方法
公開日：2019年09月04日
カテゴリー：JavaScript, PHP, 開発
ホームページのリストや見出しに数字を使う場合「1, 2, 3, 4, 5」より、
丸数字を使って「①, ②, ③, ④, ⑤」としたい時は良くありますね。
① レンゲですくう
② 口を大きく開ける
③ 口に放り込む
④ やけどする
⑤ 水で冷やす
この丸数字リストをプログラム出力する場合の”簡単”設定方法をご紹介します
やりがちな例
丸数字をセットした配列を作ってループするPHPのサンプルです
これでもできますが、配列を作るところは無駄な作業になっていますね
|
1 2 3 4 5 |
$ary = ['①', '②','③', '④', '⑤','⑥', '⑦', '⑧', '⑨' ,'⑪' ,'⑫' , '⑬', '⑭', '⑮']; $list = ['あ', 'い', 'し','て','る','の','サ','イ','ン']; for($i = 0, $i < count($list); $i++) { echo $ary[$i + 1] . '：' . $list[$i]; } |
おススメの方法
丸数字はhtmlコードを利用してループしましょう
|
1 2 3 4 5 |
$list = ['あ', 'い', 'し','て','る','の','サ','イ','ン']; for($i = 0; $i < count($list); $i++) { $n = 9312 + $i; echo '&#'.$n . ';：' . $list[$i]; } |
解説
丸数字のhtmlコードは、① ～ ⑳ の連番になっているので、
ループしながらhtmlコードで設定しています(※最大20まで)
| ① | ① | ⑪ | ⑪ |
| ② | ② | ⑫ | ⑫ |
| ③ | ③ | ⑬ | ⑬ |
| ④ | ④ | ⑭ | ⑭ |
| ⑤ | ⑤ | ⑮ | ⑮ |
| ⑥ | ⑥ | ⑯ | ⑯ |
| ⑦ | ⑦ | ⑰ | ⑰ |
| ⑧ | ⑧ | ⑱ | ⑱ |
| ⑨ | ⑨ | ⑲ | ⑲ |
| ⑩ | ⑩ | ⑳ | ⑳ |
9312にカウントを足せばループ処理で表示することができます
簡単ですね
JavaScriptで対応する場合
JSではこんな感じです
|
1 2 3 4 5 |
let list = ['あ', 'い', 'し','て','る','の','サ','イ','ン']; for(let i=0;i<list.length;i++) { let n = 9312 + i; document.write('&#' + n + '; ' + list[i] + '<br>'); } |
【実行結果】
① あ
② い
③ し
④ て
⑤ る
⑥ の
⑦ サ
⑧ イ
⑨ ン
② い
③ し
④ て
⑤ る
⑥ の
⑦ サ
⑧ イ
⑨ ン
まとめ
特殊文字の扱いは面倒なこともありますが、このようにhtmlコードを利用することで
簡単にメンテナンス性の高いソースを書くことが出来ます。
ちょっとした工夫でこの旨さ！是非お試しください。
ウィズテクノロジーで一緒に働きませんか？
分野を限定せず幅広い事業を展開。新しい技術の導入にも積極的に取り組んでおり、チャレンジや成長する機会が沢山。
あなたの経験・知識を活かしながら一緒にIT業界を盛り上げて行きましょう！
採用情報詳細はコチラ
