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

EC-cube 3.0|帳票出力プラグイン|ロゴ画像・サイズ・位置を変更する

EC-cubeは3.0にバージョンアップしてから、 便利な機能はプラグインとしてすべて有料化してしまい、 ノンプログラマーにとっては運用が難しくなってしまいました(泣) 今日は、帳票出力プラグイン(← …

CSS★長いURLが改行されないではみ出してしまうときの対処法

サイトの表示テストを行っていて、指摘を受けたので調べてみました。 Macではこの現象がでなかったから気付かなかった。。。 長いURLはどうして自動改行されないの? WEBページの文章は、画面の端やボッ …

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

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

no image

CSS★リンク文字の一部分だけ色を変更する

リンク文字のホバーエフェクトでつまずいたときのメモ。 <HTML> <a href=“#” class=”demo1″> リンクテキストのマウスオーバー リンクテキストとマウス …

olタグで丸括弧付きの数字にする方法

olタグで丸括弧()付きの数字にしたかったので、CSSで設定する方法を調べてみました。いろいろと試した結果、下記の設定で上手くいったのでメモしておきます。CSSの書き方によっては、2行目のインデントが …

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