CSSを使って、文字を円で囲み、円の中央に配置したいけれど、やり方が分からないよ…。
今回はそんな悩みを解決するコードの書き方を紹介します。
目次
この記事で作れるもの
この記事では、「ねこ」という文字を円で囲み、「ねこ」を円の中央に配置するコードを作成します。
シンプルなコードで作成しているので、是非ご自身のサイトでも使いまわしてください。
コードの紹介
htmlは3行で終わりです。ぶっちゃけ1行でもokです。
1 2 3 | <div class="cat"> ねこ </div> |
続いてCSSを記述します。こちらは少し多いです。
1 2 3 4 5 6 7 8 9 10 11 | .cat { width: 100px;/*-- 任意の数値（入力必須） --*/ height: 100px;/*-- widthと同じ（入力必須） --*/ border: 1px solid black;/*-- 任意の装飾 --*/ border-radius: 50%; background-color: yellow;/*-- 任意の色 --*/ display: flex; flex-direction: column; align-items: center; justify-content: center; } |
コードの解説
成分の分解
今回のコードは2つの成分に分解すれば分かりやすいです。
・文字を円で囲む
・文字を上下左右中央に配置する方法
文字を円で囲む方法
まず、縦と横のサイズを同じにします。正方形ですね。（→width＆height）
続いて、[border-radius]で曲線を描き、円にします。
[border-radius]の値を50%にし、縦と横のサイズを同じにすれば、文字を囲む円が正円になります。
文字を円の上下左右中央に配置する方法
これは、フレックスボックスを使うのが最強です。
フレックスボックスを使えば、円を形作る要素の中に子要素が何個あったとしても、文字が綺麗に上下左右中央に配置されます。他のパターンを考えなくて良いので楽です。
また、フレックスボックスを使うことで、[align-items: center;]、[justify-content: center;]を使って上下左右中央配置できるようになります。便利度マックス。
あと、[display: flex]を記述すると、通常、子要素が横並びに配置されますが、[flex-direction: column;]を一緒に記述することで、縦並びのまま表示させることができます。
お役立ちメモ
widthを指定しないとどうなるか
要素の幅が横いっぱいになるので、その状態で[border-radius: 50%;]すると楕円になります。
円に囲まれた文字を、文中に表示させたい
ブロック要素のままだと改行されてしまうので、[display: flex;]を[display: inline-flex;]にすればok。
まとめ
箇条書きリストの先頭や、セクションの背景に正円が使われることはよくあります。
今回紹介した手法を使えばそれらを実現することができます。ぜひ使ってみてくださいね。
