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 テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

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

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

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

文字を一文字ずつ表示してみよう!

小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それを

コメントをどうぞ!

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