体重が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について

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

まず、円形を作る為の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で円の色を指定します。

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

文字の左右中央配置

まずは文字を円の左右中央へ移動させてみようと思います。
文字を左右中央へ移動させる命令は、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;  /*この部分を追加*/
}

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

文字を上下中心に配置

では、文字を上下中心に配置してみましょう。
今度は、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%);
}

円の位置を変更

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

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%);
}

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%);
}

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

• 1
  Tweet
• 0
  Facebook
• 0
  GooglePlus
• 0
  はてブ
• 20
  Pocket