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

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

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

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

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

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

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

FC2 blog customize

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

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。

コメントをどうぞ!

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