くま's Tech系Blog

基本的には技術で学んだことを書き留めようと思います。雑談もやるかもね!

HTMLとCSSで文字入りの円を描く

最近、ReactNativeやionicやTypeScriptなどでフロント言語を久々に使っています。

なので、基礎的なことですが、定期的にこういう感じのものもブログに書こうかと思います。

今回は円についてです。

まずは単純な円

きれいな円を描くためには高さと幅を同じにして、border-radiusを50%にすればできます。

HTML

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

CSS

.circle {
   width: 50px;
   height: 50px;
   background-color: red;
   border-radius: 50%;
}

楕円にする場合はwidthheightを違う値にすれば実現できます。

次に円の中に文字を入れてみよう

文字を入れる方法は単純で、HTMLのタグの間に文字を入れてしまえばいいのです。

こうすれば、円が移動しても文字も移動してくれるので、余計な心配がいりません。

HTML

<div class="circle">テスト</div>

CSS

.circle {
  // 文字の色
  color: #fff;
  background-color:red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  // 行間(文字の大きさ+上下の余白→これで高さの中央に配置される
  line-height: 100px;
  text-align: center;
}

ちなみに

今回は<div>タグで作りましたが、<span>タグもしくは<å>タグで作る場合は、CSSのdisplayプロパティの初期値がinlineです。

display: inlineでは、widthheightを指定しても適用されませんので、display: inline-blockにする必要があります。

ここで、ちなみにをもう一つ!

CSSで円を移動させる場合も<div>タグ<span>タグもしくは<å>タグではプロパティを変えないといけません。

HTML

<div class="circle_div">テスト</div>

<div class="parent">
  <span class="circle_span"></span>
</div>

CSS

.circle_div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px auto;
}

.circle_span{
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

<div>タグの場合はmargin: ××px autoで中心に来るようにします。

一方、<span>タグもしくは<å>タグの場合は、親要素に対してtext-align:centerを指定することで中央寄せができます。

小ネタですが、ブログにまとめていると、知識や思考が整理できるので、これからも小ネタでも書いていきマッスル

参照

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

CSSで円を描く方法:文字を中央配置するには?枠線のつけ方は?