最近、ReactNativeやionicやTypeScriptなどでフロント言語を久々に使っています。
なので、基礎的なことですが、定期的にこういう感じのものもブログに書こうかと思います。
今回は円についてです。
まずは単純な円
きれいな円を描くためには高さと幅を同じにして、border-radiusを50%にすればできます。
HTML
<div class="circle"></div>
.circle {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
}
楕円にする場合はwidthとheightを違う値にすれば実現できます。
次に円の中に文字を入れてみよう
文字を入れる方法は単純で、HTMLのタグの間に文字を入れてしまえばいいのです。
こうすれば、円が移動しても文字も移動してくれるので、余計な心配がいりません。
HTML
<div class="circle">テスト</div>
.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では、widthとheightを指定しても適用されませんので、display: inline-blockにする必要があります。
ここで、ちなみにをもう一つ！
CSSで円を移動させる場合も<div>タグと<span>タグもしくは<å>タグではプロパティを変えないといけません。
HTML
<div class="circle_div">テスト</div> <div class="parent"> <span class="circle_span"></span> </div>
.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を指定することで中央寄せができます。
小ネタですが、ブログにまとめていると、知識や思考が整理できるので、これからも小ネタでも書いていきマッスル
