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

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。
円はCSSで簡単に作ることができます。

さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。

目次
  1. CSSでの円の作り方
  2. 円の上下左右中央に文字を表示する方法
  3. 2行の文字を円の中央に表示する方法
  4. 円の位置を変更する
  5. まとめ

CSSでの円の作り方

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

<span class="circle"></span>

.circleに対してCSSを当てます。

.circle {
  background-color:#f00;
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 50%;
}

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

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

円の上下左右中央に文字を表示する方法

続いて、円の中央に文字を表示する方法です。

<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.

2行の文字を円の中央に表示する方法

もちろん文字を2行にしても、円の中心に表示することが可能です。
今回はボタンを想定し、aタグを使ってみました。

<a harf="#" class="circle">
  <span class="texts">
    <div>二行の</div>
    <div>ボタン</div>
  </span>
</a>
.circle {
  color: #fff;
  background-color:#f00;
  width: 100px;
  height: 100px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
}

.texts {
  margin: 100px;
}

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

円の位置を変更する

円の位置を変更するには、position: absolute;を使います。
position: absolute;を使うと、絶対位置への配置となります。

例えば以下のようにすると、上から50px、左から70pxの位置になります。

position: absolute;
top: 50px;
left: 70px;

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

もしも右からや、下からの位置を指定したい場合は以下のようにします。
これは下から50px、右から70pxの位置に円が表示されます。

position: absolute;
bottom: 50px;
right: 70px;

まとめ

Webサイトを作る時、円を使ったデザインにしたいときはよくあると思います。
円はCSSで作ることができ、これはボタンを作る時などに利用できます。

とても簡単なので、ぜひ活用していきましょう。

スポンサードリンク

関連コンテンツ

オススメ記事

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

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

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

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、4回目の今

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

ショートコード

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

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

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

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

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、第8弾です。 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔《いどうかんかく

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です