1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

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

スポンサードリンク

関連コンテンツ

オススメ記事

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

bootstrap3

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

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

コメントをどうぞ!

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