1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. 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%;
}

displayには、「inline-block」などを指定しましょう。
inline-block」ならば、円をいくつか作ると、横並びになります。

また、「border-radius」で、角を丸めることができます。
50%を指定すると、円になります。

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

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

<span class="circle">こんにちは</span>

CSSは、次のようにします。

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

line-height」に円の高さ(height)と同じ値を指定することで、文字が上下中央になります。
また、「text-align: center」で、文字が左右中央になります。

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

つづいて、2行の文字を、円の中心に表示する方法です。

まず文字は、行ごとにdivで囲み、さらにそれをcircleで囲います。

<span class="circle">
    <div>こんにちは</div>
    <div>おはよう</div>
</span>

CSSでは、.circleに「display: inline-grid」を指定します。
さらに、「text-align: center」、「align-content: center」で、文字が上下左右中央になります。

.circle {
    display: inline-grid;
    color: #fff;
    background-color: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
}

円の位置を変更する

つづいて、円の位置を変更してみましょう。
今回は、親要素にたいして、絶対位置を指定してみます。

親要素はcontentsというclass名にしました。

<div class="contents">
    <span class="circle contents__circle">こんにちは</span>
</div>

また、CSSは次のようにします。

.contents {
    position: relative;
}

.contents__circle {
    position: absolute;
    top: 80px;
    left: 50px
}

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

親要素の.contentsには、「position: relative」を指定します。
(ここでは省略しますが、.contentsにはその他の要素も含まれていたりして、ある程度の高さがあるものとします)

さらに、.contents__circleには「position: absolute」を使って、絶対位置を指定します。
位置は、topleftrightbottomで、決めることができます。

そして、.circleに、さきほどの円のスタイルを指定しています。

まとめ

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

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

FC2 blog customize

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

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

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

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

Markdown記法一覧。最速で文章を書くには、これを覚えるべし!

Markdownは文章を記述するための言語です。サイト上で文章を作るとき、タグを使うことで、その文章に様々な意味を持たせます。 しかし、直接タグを打ち込むのは大変ですし、エディタの機能を使おう

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

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

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

PythonでUSBメモリのパスワードを解析。総当たりでロック解除してみよう!

みなさんこんにちは。@It_is_Rです。今回はPythonを使って、総当たりでUSBメモリのパスワードを解析する方法を紹介します。(※このストーリーはフィクションです) Rりこ師匠、

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

コメントを残す(コメントは承認後に反映されます)

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




オリジナルゲーム.com