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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

サイトで使っているサーバーを調べる方法

現在公開されているWebサイトがどこのサーバで公開されているのかを知りたいとき、どうすればいいか調べてみました。 というのも、あるレンタルサーバーを解約することにしたのですが、そこにはクライアントさん …

no image

クラウド型レンタルサーバー★ Zenlogic(ゼンロジック)を試してみた!★その1

「サーバに詳しくないWeb担当者でも使いやすい!」と評価を集めている新しいクラウド型レンタルサーバーが、ファーストサーバ社の「Zenlogic(ゼンロジッ)ク」。 ちょうど、創業20周年記念 特別限定 …

no image

CSS 重なり順序を指定する

背景画像を複数重ねるなら CSS3 より、要素に複数の背景を適用できるようになりました。 複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、指定した順に重ねて …

今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】

新しくサイトを作ることになった。 もちろん、レスポンシブ対応で。 そこで改めて、ブレイクポイントを考えてみことにした。 Googleでは「モバイルファースト」を推奨している。さらに「モバイルファースト …

no image

絶対に導入しておきたいWordPressプラグイン10+3選

絶対に導入しておきたいWordPressプラグイン10+3選   WordPress サイトの集客に必須のプラグイン 【1】「All in One SEO Pack」 【2】「WP Soci …

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