WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • CSSで正円形を描く方法【コピペで簡単】
  • 記事公開:2015/06/05
  • 最終更新:2015/09/14

CSSで正円形を描く方法【コピペで簡単】

CSSで正円形を描く機会がありましたので、その方法を備忘録としてまとめておきます。基本的にコピペだけで実装可能。サイズや背景色を任意に変更するだけでOKです。参考にしてください。

この記事は約 2 分で読めます。

CSSで正円形を描く

とある案件で機会がありましたので、勉強した内容をまとめます。
簡単な内容ですので、前置きはなしでいきなり核心部分に移行しますね。

CSSで正円形を描くためには、以下の様なコードを書きます。

.round {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #ff0000;
}

上記のように定義してやると、以下の様な正円形を描くことができます。

仕組みは簡単で、border-radiusを角丸を作り、その数値をwidthの半分=50%と定義することで正円形を描いています。

widthとheightの数値を変更すれば、お好きなサイズの正円形を描くことができます。

まとめ

CSSで正円形を描く方法を備忘録として書き残しました。

正円形を描ければ、デザインの幅が若干ですが広がるような感じがします。
CSSで正円形を描きたい方は参考にしてください。

今回の内容がどなたかのお役に立てば幸いです。

シェアしていただきありがとうございます。

この記事が気に入ったら【いいね】しよう!

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • iPhoneのsubmitボタンのスタイルを初期化する方法

    iPhoneのsubmitボタンのスタイルを初期化する方法をご紹介します。iPhoneのsubmitボタンはデフォルトで角丸のスタイルが適用されています。このスタイルを解除する方法をまとめてみました。簡単な内容ですが知らない方には重宝な内容になっています。 記事を読む

  • 美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

    美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。CSSだけでデザインにグラデーションを導入したい方は参考にしてください。5分後にはグラデーションを自由自在に操れるようになります。 記事を読む

  • めっちゃ便利!ダミー画像を作成するなら【placehold.jp】で決まり!

    ダミー画像を簡単に作成することのできる【placehold.jp】をご紹介します。簡単な操作でダミー画像がサクッと作成できる無料サービス。WEBサイトの制作などダミー画像が必要になったら【placehold.jp】がめちゃ便利です。 記事を読む

  • 知らずに損した!最初・最後・奇数・偶数・○番目など、要素を指定して装飾する方法

    疑似クラスを使うことで、CSSを複雑にすることなく指定要素を装飾することができます。「この3番目のliタグだけ色を変えたい」など特定の要素だけを装飾したいケースの参考にしてください。 記事を読む

  • CSSで高さ100%のボックスを作成する方法

    CSSで高さ100%のボックスを作成する方法をご紹介します。ある要素の高さを親要素の高さ一杯にしたい場合があるかと思います。今回はそんな時のCSSの記述の仕方です。参考にしてください。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)