CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

公開 :  → 更新 :

体重が50キロを切りました。@It_is_Rです。身長は171あります。
骨っていうなー!

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人はいませんか?
画像を使いすぎると、サイトが遅くなり、読み込みに時間がかかってしまいます。SEO的にはあまり良く無いんですね。
そこで、CSSで丸を描けばいいんだ。と思った人も多いでしょう。しかし、CSSで丸を描くまではできても、その中央に文字を表示したりするのが苦労する人も多いのではないでしょうか。

というわけで、今回はCSSで描いた円の中央に文字を書いてみましょう。

文字の背景に、円形に色をつける方法

*この方法は、 2016/10/28 に追記しました。

まず、文字の背景に、円形に色をつける方法を紹介します。
今まで紹介していた方法は、円形を作った上に文字を表示させる方法でした。

ただ、それだと少し複雑になりますので、文字に背景色を付けて、その色を丸くするという方法を追記します。

<p class="circle">Rです</p>
.circle {
  color: #fff;
  background-color:#f00;
  padding: 0;
  margin: 0;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
}

See the Pen circle by R (@It_is_R) on CodePen.

HTMLについて

eyecatch_background

※ここよりも下は、過去に紹介していた方法です。上の方法をお勧めします。

まず、円形を作る為のHTMLを書きます。HTMLはとてもシンプルです。

<div id="circle">
  <p>Rです</p>
</div>

この様に、円で囲む部分の文字をpタグ、それをdivで囲み、circleというidを付けます。
シンプルすぎてムカつきますね。

CSSについて

次に、CSSの編集です。

CSSで円形を作る

まずは、CSSで円形を作ってみましょう。

#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  font-size: 20px;
  color: #000;
  background-color: #f00;
}

まず、widthとheightで、横幅と高さを決めます。この数値は自分の作りたいサイズによって決めればいいと思います。

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
この5つは、各ブラウザに対して角を50%丸める命令です。50%を指定することで、円形を簡単に作ることができます。

font-sizeで文字の大きさ、colorで文字の色を指定し、background-colorで円の色を指定します。

Rです
しかし、まだ文字が円の中央へいきません。

文字の左右中央配置

まずは文字を円の左右中央へ移動させてみようと思います。
文字を左右中央へ移動させる命令は、text-align: center;を使います。とりあえず、一番下にでも追加してみましょう。

#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  font-size: 20px;
  color: #000;
  background-color: #f00;
  text-align: center;  /*この部分を追加*/
}

Rです
この様に円の中央に文字を表示させることができます。

文字を上下中心に配置

では、文字を上下中心に配置してみましょう。
今度は、id circleの中のpタグに対して指定します。まず、position: relative;で配置する方法を指定します。
position: relative;は、本来配置されるその位置を基準に配置場所を決めます。つまり、今配置されている円の上あたりからの位置を指定できます。

top:50%;で円の上から、円の50%下の位置に文字を移動させます。しかし、円の半分の位置に移動させたとしても、文字の半分の大きさ分ずれてしまいます。なので、transform: translateY(-50%);で、文字の大きさの50%上に移動させます。これで上下中央に配置させることができます。

では実際にCSSに書いてみましょう。

#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  font-size: 20px;
  color: #000;
  background-color: #f00;
  text-align: center;
}

/*ここから下の部分を追加*/
#circle p {
  position: relative;
  top:50%;
  transform: translateY(-50%);
}

Rです

円の位置を変更

では、円の位置を指定してみましょう。

marginを使って指定する

円の位置の指定にはmarginを使います。下や右から指定する方法などは後ほど説明します。

marginで位置を指定すると、この様になります。

#circle {
  margin: 200px 50px;  /*これを追加*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  font-size: 20px;
  color: #000;
  background-color: #f00;
  text-align: center;
}

#circle p {
  position: relative;
  top:50%;
  transform: translateY(-50%);
}

Rです

margin: 200px 50px;は、まるの上下200px、左右50pxに空間を作る命令ですが、もともと表示されている位置が左上なので、上に200px、左に50px空間があるだけの様に見せることができます。
他に色々表示させている場合は、右や下にも空間ができてしまうので、margin: 200px 0 0 50px;と指定すれば、上に200px、左に50pxのみの指定になります。

下や右からの位置で指定する

下や右からの位置をしていする場合、ほんの少しコードを書き加えなくてはなりません。

まず、円の配置方法を変更しましょう。position: absolute;を書き加えます。すると、bottomやrightという指定方法が使える様になります。しかし、#circle pの親要素がposition: absolute;になってしまうので、そこで文字がずれてしまいます。その為、#circle pに、margin: 0;を加えましょう。そうすると、また円の中央に文字が表示されるようになります。

#circle {
  position: absolute;  /*これを追加*/
  bottom:100px;  /*これを追加*/
  right:10px;  /*これを追加*/
  /*margin: 200px 50px;  これは削除*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  font-size: 20px;
  color: #000;
  background-color: #f00;
  text-align: center;
}

#circle p {
  position: relative;
  margin: 0px;  /*これを追加*/
  top:50%;
  transform: translateY(-50%);
}

Rです

さてどうでしょうか。右下に表示することができましたか?
この、position: absolute;というのは、絶対位置への配置となるので、覚えておくといいでしょう。

スポンサードリンク

おすすめの記事♪

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 [email protected]_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと[email protected]_is_Rです。やかましいわ。 今回の記事は初のWordPre

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼って[email protected]_is_Rに送り付けて下さい。

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

[email protected]_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって[email protected]_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこ[email protected]_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかし[email protected]_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

[email protected]_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

[email protected]_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな


コメントをどうぞ!

メールアドレスが公開されることはありません。




Category

Games