プログラミング

【CSS】文字を円で囲み、円の上下左右中央に配置する方法(正円)

CSSを使って、文字を円で囲み円の中央に配置したいけれど、やり方が分からないよ…。

今回はそんな悩みを解決するコードの書き方を紹介します。



この記事で作れるもの

この記事では、「ねこ」という文字を円で囲み、「ねこ」を円の中央に配置するコードを作成します。

シンプルなコードで作成しているので、是非ご自身のサイトでも使いまわしてください。

コードの紹介

htmlは3行で終わりです。ぶっちゃけ1行でもokです。

続いてCSSを記述します。こちらは少し多いです。

コードの解説

成分の分解

今回のコードは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。

まとめ

箇条書きリストの先頭や、セクションの背景に正円が使われることはよくあります。

今回紹介した手法を使えばそれらを実現することができます。ぜひ使ってみてくださいね。




COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です