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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

コメントアウトの書き方★html & css & php

WEB制作ではhtml & css & phpを触ることが多いですが、コメントアウトの書き方がぞれぞれ違うので忘れないようにメモ。 ちなみに、コメントアウトとは、ソースコード側に書いて …

no image

HTML上で要素に直接スタイルシートを指定する

  ・style属性で、要素に対して直接スタイルを指定することができます。 ・この属性を使用する場合は、meta要素で基準と …

no image

WP Bizvector コンテンツエリアのウィジェットを編集する

Bizvectorのテーマを使ったサイトで、 トップページとなるフロントページの見え方を修正した方法。 自分用の備忘録。 トップページのリスト表示にアイキャッチ画像も一緒に表示させるようにした。 この …

自分のインスタのURLを見て欲しい相手に送るには

自分のインスタのURLを名刺やはがきにプリントしたいとき、どうすればわかるのかつまづいたので調べてみた。 答え:「instagram.com」の後ろに自分のユーザーネームを加える。 アカウントURLは …

no image

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

絶対に導入しておきたいWordPressプラグイン10+3選   このページのもくじ WordPress サイトの集客に必須のプラグインWordPressの高速化に必須のプラグインWordP …

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