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

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

スポンサードリンク

関連コンテンツ

オススメ記事

【解決!】Macで「デフォルトシェルはzshになった」と表示されるときの対処法

MacOSをアップデートしてから、ターミナルを開くたびに、「The default interactive shell is now zsh.」というメッセージが表示されるようになりました。 これは

クイックタグ

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

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

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。 今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

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

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

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

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

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