【初心者向け】超簡単！CSSで円を作る方法と円のど真ん中に文字を配置する方法

おはこんばんにちは！ノボルです。

CSSで円を作って真ん中に文字を表示したいんだけど、どうやってするんだろ・・・。

そういうことなら任せて！さっそく解説するね。

HTMLやCSSの勉強をしていて、円形のパーツってどうやって作るんだろう？と思ったことはありませんか？

円はWeb制作でもよく使うので、この機会に作れるようにしておくといいと思います！

そこで今回は、CSSで円を作る方法と円のど真ん中に文字を配置する方法を解説します。

CSSで円を作る方法
CSSで円のど真ん中に文字を表示する方法
最後に

CSSで円を作る方法

CSSでは、以下のように円を描きます。



セレクタ {
	width: ◯◯px;/*幅*/
	height: ◯◯px;/*高さ*/
	border-radius: 50%;/*角丸*/
}

セレクタ {

width: ◯◯px;/*幅*/

height: ◯◯px;/*高さ*/

border-radius: 50%;/*角丸*/

}

「width」と「height」で幅と高さを指定し、「border-radius: 50%;」で角の丸さを調整することで、円を作ることができます。

<div>や<p> タグで円を作る方法

See the Pen dyPrZbd by monkey d ruffy (@ruffy126) on CodePen.

幅と高さが90pxの円を作ることができました。
背景色を指定しないと、円が見えなくなってしまうので注意してください。

<span>や<a>タグで円を作る方法

See the Pen jOEJaOO by monkey d ruffy (@ruffy126) on CodePen.

<div>や<p>タグの場合と違って、「display: inline-block;」がついていますよね。

これは、spanタグやaタグなどのインラインの要素は、inline-blockを指定しないと、widthとheightを指定することができないからです。

CSSで円のど真ん中に文字を表示する方法

次に、円の上下左右央に文字を配置する方法を解説します。

文章が1行の場合

文章が1行の場合には、以下のように書きます。

See the Pen dyPrZMe by monkey d ruffy (@ruffy126) on CodePen.

「text-align: center;」… 文字を左右に中央寄せする設定です。
「line-height: 100px;」… 行の高さを指定する設定です。「line-height」と「height」の値は同じにしましょう。

文章が２行の場合

文章が1行の場合では、「円の高さ＝行の高さ」としました。しかし、文章が2行以上になると、円から文字がはみ出てしまいます。そこで、以下のように書きます。

See the Pen PowLOzL by monkey d ruffy (@ruffy126) on CodePen.

まず、「円」と「文字」の要素を分けます。今回の場合、divタグで円を、spanタグで文字を配置しています。

次に、divタグで円を作ります。そして、「position: absolute;」を使って、円のど真ん中にspanタグを配置しています。

spanの位置は、「top: 50%;」だと真ん中から少しズレてしまうので、「transform: translateY(-50%);」を指定し、位置を修正しています。