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;というのは、絶対位置への配置となるので、覚えておくといいでしょう。

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

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




オススメ記事

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

Homebrew

Homebrewを使いこなせ!Macへのインストールや使い方。

人生をもう一度やり直したいとつくづく思う@It_is_Rです。 やり直したところで同じ道を辿るのがオチですよ、全国の不幸な皆さん!! さて、おふざけはここまでにして、今回はHomebrewにつ

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 WordPress テーマ自作シリーズ、第2回目です。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていき

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

wordpress

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。 WordPress テーマ自作シリーズ、早くも第6回目です。 今回はウィジェット(サイドバー)を追加する方法を紹介します。

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

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

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ