WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • CSSで正円形を描く方法【コピペで簡単】

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

https---www.pakutaso.com-assets_c-2015-02-TSU88_scss01500-thumb-1000xauto-12040 (1)

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で正円形を描きたい方は参考にしてください。

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

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

https---www.pakutaso.com-assets_c-2015-02-TSU88_scss01500-thumb-1000xauto-12040 (1)

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

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

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

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

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

  • LIG_hiroyukiMBA500

    ハイクオリティ!お金を出す価値のある有料素材配布サイトを12個まとめてみた

    WEBデザインに欠かせない有料素材の販売サイトをまとめてみました。WEBサイトの制作を行うに当たって、有料素材の購入は避けては通れません。参考にしてください。 記事を読む

  • lavender-1275377_1280

    画像加工はもう不要!CSSだけで画像を円形にする方法

    CSSだけで画像を円形にする方法をご紹介します。この方法を知っていれば、画像を個別に加工する必要はなくなります。スタイリッシュな円形画像をサイトデザインに取り入れたい方、ぜひ参考にしてください。それでは、CSSだけで画像を円形にする方法をどうぞ! 記事を読む

  • golden-retriever-379226_1280

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

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

  • S001_megane0220140830145944500-thumb-1200x800-56183-710x350

    完全無料!よく利用するフリー写真素材の配布サイトを17個まとめてみた。

    WEBサイトの制作やブログのアイキャッチなどを作る時など、フリーの写真素材を使う機会が多くあると思います。頻繁に使用しているフリー写真素材の配布サイトをまとめてみました。 記事を読む

  • AL203elvdoki420140830110253500

    たったの3分!WEBサイトの背景に動画を敷く方法

    とある案件でWEBサイトの背景に動画を敷く機会がありました。この機会に動画を背景に敷く方法と、動画背景を実装するときの注意点を分かりやすくまとめてみました。動画背景の実装をご検討中の方、参考にしてください。 記事を読む

コメントを残す


(必須)

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