最近、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
を指定することで中央寄せができます。
小ネタですが、ブログにまとめていると、知識や思考が整理できるので、これからも小ネタでも書いていきマッスル