CSS★丸い背景+円形の中央に文字

cssのメモ。

丸形の作り方

基本的な方法は、

(1)div 要素で囲った範囲の上下左右のサイズを指定する(height, width)
(2)背景色を付ける(background-color)
(3)角を丸くする(border-radius)

主要ブラウザのベンダープレフィックス(接頭辞)である「-webkit-」(Google Chrome, Safari 用)や「-moz-」(Internet Explorer 用)はいずれ必要がなくなりますが、いまのところは、これらを付けてプロパティを指定しておきます。同時に、ベンダープレフィックス無しも併記しておきましょう。(この点について詳しいことは、ネット上にたくさん情報がありますので調べてみてください)

円形の中央に文字を置く

今作った<div>で囲った円形の中に、もうひとつ<div>~</div>を作り、その中に文字を入れます。class 属性に名前も付けておきましょう。

See the Pen mRVxMJ by myu (@m_myu) on CodePen.0

しかし、このままでは文字が左寄せに表示され、うまく中央の位置にきてません。
調整が必要です。

まずpadding-top を指定して文字を真ん中まで下ろし、つぎにtext-align:center; で中央に寄せます。ついでに文字の色や余白なども変更しておきましょう。先ほどのCSSに追加します。

See the Pen ggPeZL by myu (@m_myu) on CodePen.0

やり方★その2

See the Pen mRVxor by myu (@m_myu) on CodePen.0

参照:http://original-game.com/css-center-of-the-circle/

シェアする

  • このエントリーをはてなブックマークに追加

フォローする