cssのメモ。
このページのもくじ
丸形の作り方
基本的な方法は、
（１）div 要素で囲った範囲の上下左右のサイズを指定する（height, width）
（２）背景色を付ける（background-color）
（３）角を丸くする（border-radius）
主要ブラウザのベンダープレフィックス（接頭辞）である「-webkit-」（Google Chrome, Safari 用）や「-moz-」（Internet Explorer 用）はいずれ必要がなくなりますが、いまのところは、これらを付けてプロパティを指定しておきます。同時に、ベンダープレフィックス無しも併記しておきましょう。（この点について詳しいことは、ネット上にたくさん情報がありますので調べてみてください）
円形の中央に文字を置く
今作った<div>で囲った円形の中に、もうひとつ<div>～</div>を作り、その中に文字を入れます。class 属性に名前も付けておきましょう。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mRVxMJ” default_tab=”css,result” user=”m_myu” preview=”true” data-preview=”true”]See the Pen <a href=’http://codepen.io/m_myu/pen/mRVxMJ/’>mRVxMJ</a> by myu (<a href=’http://codepen.io/m_myu’>@m_myu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
しかし、このままでは文字が左寄せに表示され、うまく中央の位置にきてません。
調整が必要です。
まずpadding-top を指定して文字を真ん中まで下ろし、つぎにtext-align:center; で中央に寄せます。ついでに文字の色や余白なども変更しておきましょう。先ほどのCSSに追加します。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ggPeZL” default_tab=”css,result” user=”m_myu”]See the Pen <a href=’http://codepen.io/m_myu/pen/ggPeZL/’>ggPeZL</a> by myu (<a href=’http://codepen.io/m_myu’>@m_myu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
やり方★その２
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mRVxor” default_tab=”css,result” user=”m_myu”]See the Pen <a href=’http://codepen.io/m_myu/pen/mRVxor/’>mRVxor</a> by myu (<a href=’http://codepen.io/m_myu’>@m_myu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]