CSSで正円を書き中に文字を入れる（可変幅でもjavascriptで対応）

CSSで正円を書く際は、幅と高さを指定してborder-radius: 50%;と設定すればそのサイズの円が描けます。

中の文字が2行になるときは絶対配置を掛け、上下は少し上に位置をずらして上下中央寄せするのがコツです。

bootstrapのグリッドシステムなど幅が％単位で高さが無い場合は、javascriptで実寸幅を読み取り、その数値を高さとしてstyleで当ててやると正円を描画できます。

CSSで正円を書き中央に文字を入れる

本記事ではCSSで円を描き、その中央にテキストを入れる方法を紹介します。

中に入る文章によってCSS制御を変える

まずはCSSのみで正円を書き、その中に文字を上下左右中央寄せで設置します。

文字が1行の場合は、正円の高さと文章のline-heightを合わせる事で中央揃えができます。

文字が2行や3行になる場合、文章の高さの中心を正円の中心に持ってくる必要があります。

この場合、中の文章要素を絶対配置を使って位置調整していきます。

幅の固定できないケースにも対応

基本的に正円を構成する際は、CSSで横幅・縦幅を固定するのがセオリーです。そうしないとCSSで正円が表現できません。

ですがケースによっては横幅が可変するレイアウトがあります。

bootstrapのグリッドシステム

例えば、bootstrapのグリッドシステムなどが良い例でしょう。

グリッドの分け方（3段や4段など）によって自動で幅が決まってきますよね。

横幅が固定されていない事には縦幅も指定できず、正円を作る事ができません。

こういったケースで正円を作って文章を中央揃えする方法についても解説していきます。

CSSで正円を描く

まず外枠となる正円を作ります。対象となるセレクタやクラス名に対して設定していきます。

正円の基本的な書き方

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

上記の様に、正円を書くときはwidthとheightの値を指定する必要があります。

その上でborder-radiusを50％とする事で、四方の丸みで円を描いている訳ですね。

正円の作成例

HTML

<div class="circle"></div>

実際は中に文章を入れる事になるので、pタグではなくdivタグに設定をした方が良いと思います。

CSS

.circle{ width: 100px; height: 100px; border-radius: 50%; background: #cc0000; //背景色 border: solid 2px #cc0000; //枠線 }

上記CSSでは幅と高さを100pxに指定しています。

背景色を指定するか、borderを設置する事で正円を描きます。

実行例

実行例では、borderのみによる正円にしています（まだ文字は入っていません）。

インライン要素で正円を描く場合

spanタグやaタグは元々がインライン要素（display: inline;）です。

インライン要素では、widthとheightを指定しても幅や高さが生成できません。

aやspanタグ等のインライン要素で正円を描く場合は、display: inline-block;を設定しましょう。

そうする事で、円の幅と高さが指定できるようになります。

正円の中心に1行の文字を入れる

では正円内に、文字を1行入れてみます。

文章が1行の場合

「数字だけのせる」や「アイコンだけのせる」様に、文章が次の行へと折り返さない場合には、以下のように書きます。

HTML

<div class="circle">A</div>

CSS

.circle{ width: 100px; height: 100px; border-radius: 50%; border: solid 2px #cc0000; text-align: center; line-height: 100px; }

text-align: center;で左右方向に対し中央寄せをしています。

line-height: 100px;で上下方向に対し中央寄せをしています。

つまりheightの値と同じline-heightを入れれば、上下中央寄せできる訳ですね。

実行例

Aの文字が上下左右の中心に来ているのがわかります。

正円の中心に2行以上の文字を入れる

文字が1行に収まる場合、先程の様に「円の高さ」を「行の高さ」とするのがコツでした。

ですが文字が改行されて2行以上になる場合、この方法では円から文字がはみ出てしまいます。

これはline-heightが広く設定してあるためですね。

2行・3行の文章は中心線に揃える

2行以上の文章を配置したい場合には、違う設定が必要です。

HTML

<div class="circle"> <span>AI<br>Artist</span> </div>

この様に途中で改行がされている文章の場合です。

CSS

.circle { position: relative; width: 100px; height: 100px; border-radius: 50%; border: solid 2px #cc0000; } .circle span { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100px; text-align: center; }

実行例

CSSの解説

今回は正円をdivが担当し、中の文字をspanタグが担っています。

母体となる正円のdivには、position: relative;を入れましょう。

spanタグを正円の真ん中に絶対設置するため、spanタグにposition:absolute;を設定します。

50％から開始は中心線より下になる

絶対配置でtop: 50%としていますが、これだとspanタグの開始位置が「50％のところから」になってしまいます。

2行の文章の場合、1行目は若干上の45％位にないと、うまく上下の中央に来ませんよね。

そこでtransform: translateY(-50%)とする事で、ど真ん中に配置されるように調整しているのです。

-webkit-transformの記述は、未対応向けプレフィックスのためです。

さらにwidth: 100px;が設定されていますが、これは文字の横幅を示しています。

これは正円の横幅と同じサイズなので、左の絶対配置をleft:0;とすれば丁度左端から計算される事になります。

その上でtext-align: center;で中央に寄せています。

横幅が指定できないレイアウト

次に、bootstrapのグリッドシステムなどのレイアウト内で正円を作る事を考えてみましょう。

bootstrapのグリッドはcol-xx-3やcol-xx-6など様々な分割クラスが用意されています。

分割クラスの幅はCSSで％設定されているため、段組みの状態によって自在に幅が可変する訳ですね。

bootstrapグリッドの中で正円を作るには

ではこの分割枠の中で正円を作るにはどうしたらよいのでしょうか。

繰り返しますが、正円を作るには幅と高さをpxなどで固定する必要があります。

ですがcol-xx-3等のCSSクラスは、母体の幅によって変わるので固定されていません。

さらに高さに関しては全く指定がない状態なのですね。

widthを100％にした場合

まず思いつくのが、widthを100％にする案でしょう。

確かに％指定なら、幅がどれだけ変わっても横幅は常に幅一杯になってくれます。

ただし問題はheightの方です。

heightを100％にしたとしても、元の高さの指定がないので高さが生まれません。

極端に高さの無い「楕円形」になってしまうのです。

その要素の幅から高さを知る事

ポイントはその時の「実質の幅」に対し、「高さ」も同じ数値に指定すれば正円になる事です。

つまり構成されているレイアウト要素の幅情報をリアルタイムに取得して、それと同じ高さを作る様にする必要があるのです。

そのために今回簡単なjavascriptを使います。

JSを使ったwidthの取得style制御

まずは以下の様に、bootstrapで3段組を作ってみました。

col-sm-4の3段組

上記レイアウト上での「col-sm-4の幅」は、ブラウザで決定されています。

F12のディベロッパーツールで確認すると「215.33px」となっていました。

これが1段あたりの実質の横幅になる訳ですね。

直接CSS指定しない様に

数値がわかったからといって、CSSに直接width: 215px;、height: 215px;と設定するのはよくありません。

段数が変わったり掲載位置が変わると、この数値も毎回変更しなければならなくなるためです。

正円を描く位置が複数あると、場所ごとに幅の違うクラス名を用意する事にもなりかねません。

構成ソース

まずはHTMLから一つずつソースを見ていきましょう。

HTML

<div class="row"> <div class="col-sm-4 text-center"> <div id="box" class="circle"><p>ここに正円の<br>要素が入ります。</p></div> </div> <div class="col-sm-4 text-center"> <div class="circle"><p>ここに正円の<br>要素が入ります。</p></div> </div> <div class="col-sm-4 text-center"> <div class="circle"><p>ここに正円の<br>要素が入ります。</p></div> </div> </div>

例によってクラス名「circle」が、正円を構成する要素です。

そして最初の枠にのみ、id属性box（赤枠）がありますね。これは段落の幅を計算するために使います。

CSS

.circle{ width: 100%; border: solid 3px #1f4e79; background: #f6f6f6; border-radius: 50%; position: relative; } .circle p{ position: absolute; left: 0; top: 50%; font-size: 2rem; line-height: 1.2 !important; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; }

基本的には一つ前で紹介した「2行になる時のCSS」と同じです。

違うのは正円の要素がwidth: 100%;と、「％表記」になっている事ですね。

どんなレイアウト時でも、正円を枠一杯に広げるための措置です。

そして今回heightに関しては、一切指定をしません。

JSを使って幅の情報を取得する

いよいよ、Javascriptの出番です。

その段落の横幅をJavascriptで取得し、その数値を「要素の高さ」としてstyle制御する訳です。

javascriptコード

以下のコードを、HTMLソースのすぐ下に入れましょう。

<script> let client_w = document.getElementById('box').clientWidth; let target = document.getElementsByClassName("circle"); let hei = client_w + "px"; for(i=0;i<target.length;i++){ target[i].style.height = hei; } </script>

実行例（Javascript稼働）

上記サンプルでは3pxの枠線をつけたので幅は209pxになりましたが、高さもきちんと209pxになっています。

javascriptで常に幅情報を取得するので、これが仮に4列や2列になった時も、heightが自動計算され、適切な正円ができます。

スマホで確認した場合も、列は解除され縦に並びますがその分大きな正円がきちんと描画されます。

注意

JavascriptのコードはHTMLソースよりも下に入れましょう。

後に書かないと、id属性boxなどを認識する事ができません。

一押し人気コーナー紹介