クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS 丸、正円の中に数字・文字を書く!(サンプル付き)

投稿日:2018年4月21日 更新日:

良くあるデザインで丸の中に数字や文字が入っているものがありますよね。

画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。
中の文字や大きさも自由に変更できるので、後々メンテナンスしやすくもなります。

方法としては、divで正円を作ってその中に数字や文字を入れるイメージです。
簡単なので、誰にでもできますよ!

サンプルはこちらです。

1. 丸、正円の中に数字・文字を書く(CSS)

まずはCSSです。

2行目〜4行目で正円が出来上がります。
ポイントは4行目の「border-radius:50%;」です。
「50%」と指定するのがミソで、どんな大きさのdivでも正円にしてくれる優れもの!

5行目〜6行目で数字や文字をdivの中央に持ってきています。

2. 丸、正円の中に数字・文字を書く(HTML)

後はHTMLでクラスを指定してあげればOKです。
中に文字を書くと出来上がりです!

とても簡単ですね!
サンプルも見てくださいね。

 

-CSS

執筆者:

関連記事

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …

CSS ボタンの基本装飾

最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「10 …


comment

メールアドレスが公開されることはありません。