【CSS】円の作り方・円の中心に文字を重ねる【border-radius】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回は円の作り方・円の中心にテキストを配置する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

円の作り方

円の作り方はいたって簡単です。

border-radius という要素の外側の角を丸めるプロパティを使って
円形になるまで丸めればOKです。

See the Pen
円の作り方 by samehack (@samehack)
on CodePen.

重要なポイントはこの部分です。

border-radius: 50%;

このように、50%を指定することで、円形となります。

円の中心にテキストを重ねよう

よく、円の中心に”New!!”と書かれているものを見ますよね。
以下の知識を組み合わせることでこれも簡単に設定できます。

①親要素を円にする
②子要素を上下左右中央揃えにする

See the Pen
円の中心にテキスト by samehack (@samehack)
on CodePen.

今回はフレックスボックスを用いて上下左右中央揃えにしましたが、
絶対位置指定してもOKです。

詳しく知りたい方は以下をご参照ください。

【CSS】画像の上に文字を重ねよう【relative, absolute, transform】

この記事を読むと・・・ 1分で要素を重ねる事ができる 1分で文字を画像の中心に配置することができる 1分でtransformの使い方がわかる

samehack.com

【CSS】超簡単に上下中央揃えにする方法2選！【flexbox】

この記事を読むと・・・ 1分で上下中央揃えをマスターできる

samehack.com

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram