良くあるデザインで丸の中に数字や文字が入っているものがありますよね。
画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。
中の文字や大きさも自由に変更できるので、後々メンテナンスしやすくもなります。
方法としては、divで正円を作ってその中に数字や文字を入れるイメージです。
簡単なので、誰にでもできますよ！
サンプルはこちらです。
1. 丸、正円の中に数字・文字を書く（CSS）
まずはCSSです。
|
1 2 3 4 5 6 7 |
.maru { height:50px; width:50px; border-radius:50%; line-height:50px; text-align:center; } |
2行目〜4行目で正円が出来上がります。
ポイントは4行目の「border-radius:50%;」です。
「50%」と指定するのがミソで、どんな大きさのdivでも正円にしてくれる優れもの！
5行目〜6行目で数字や文字をdivの中央に持ってきています。
2. 丸、正円の中に数字・文字を書く（HTML）
後はHTMLでクラスを指定してあげればOKです。
中に文字を書くと出来上がりです！
|
1 2 3 |
<div class="maru"> <span>1</span> </div> |
とても簡単ですね！
サンプルも見てくださいね。
