CSSで正円形を描く方法【コピペで簡単】
  • 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サイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

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

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

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

  • 2015-10-10

    まとめて良かった!WEBデザインするときに参考になるデザインまとめサイトのまとめ

    WEBデザインの参考になる21の「デザインまとめサイト」をご紹介します。WEBデザインをする方には、役立つコンテンツかな~と勝手に思い込んでいます。WEBデザインの参考にしてください。 記事を読む

  • 2015-12-31

    画像が読み込めなかった時に別の画像を表示させる方法

    画像が読み込めなかった時に別の画像を表示させる方法をご紹介します。画像が読み込めない時、altのテキストではなく別の画像を表示させたい方は必読です。3分後には実装可能です。 記事を読む

  • 2018-09-18

    【たった1分】ドメインから使っているサーバーを調べる方法

    ドメインからサイトが設置されているサーバー会社を調べる方法をご紹介しています。専門的な知識は必要ありません。コンテンツの中で紹介しているWEBサービスを利用(無料)すれば、どなたでもドメインからサーバー会社を調べることができます。 記事を読む

  • 2016-08-19

    サイト上でALT設定を可視化できる「Google Chrome」拡張機能

    サイト上でALT設定を可視化できる「Google Chrome」拡張機能をご紹介します。【Alt & Meta viewer】という拡張機能ですが、Alt属性のチェックには欠かせない拡張機能です。WEBサイトを制作する方は、インストールしておいて損はありません。 記事を読む

  • 2016-10-11

    404エラーページをカスタマイズしてユーザビリティを最大化しよう!

    404エラーページをカスタマイズしてユーザビリティを最大化する方法をご紹介します。404エラーページをデフォルトのままで使用している方は、ぜひご確認ください。404エラーページを少しカスタマイズするだけで離脱率などの改善につながりますよ! 記事を読む

コメントを残す


(必須)