CSS Interenet

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

投稿日:

cssのメモ。

丸形の作り方

基本的な方法は、

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

やり方★その2

[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]

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

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS, Interenet

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

『IcoMoon』のWeb-FontをWebページに実装する方法

オリジナルのアイコンフォントを簡単につくれる『IcoMoon』。 自作のSVGアイコンづくりで活用していたけど、 Web-fontも使えるので実装の方法を確認しておく。 『IcoMoon』へアクセスし …

CSS★疑似要素にFontawesomeのアイコンフォントを表示させるには…

右端にアイコンフォントを入れたボタンを作ろうとしたときに躓いたところ。なので、忘れないようにメモ。 下のようなボタンを作ろうとしていた。  ↓ ↓ ↓ ボタンのデザイン /* 疑似要素内での Font …

CSS ★ inline-blockで横並びにした要素を上揃えにする

CSSで横並びさせたい時によく使うのが、 display:inline-block。 でも、縦のラインがきれいに揃わないで困ることがある。 そんな時に、 たった1行追加するだけでOKなセレクタがあった …

レスポンシブサイト★ウインドウサイズにあわせて画像を拡大縮小させる

レスポンシブサイトでの画像のリサイズ問題   ウインドウサイズに合わせて、画像を拡大縮小させる方法。 CSSだけで解決できます。     <css>  img{ width:100%; max-wid …

coding programming css 1853305

CSSが更新されない!CSSのキャッシュを自動で読み直すWEBサイト更新テクニック

WEBサイトの更新時、クライアントさまから クライアント:「更新されていませんよ」 私:「お手数ですがキャッシュの削除をお願いできますか?」 クライアント:「キャッシュって何?…」 という不毛なやりと …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。