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で作ることができ、これはボタンを作る時などに利用できます。

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

スポンサードリンク

関連コンテンツ

オススメ記事

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変

scratch

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

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

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

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

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

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

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

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

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

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

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

コメントをどうぞ!

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