HTML&CSS: 円を作る方法

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
html5 css3 image

画像を使わずに、HTMLとCSSだけで円を作る方法です。作り方はとても簡単です。

画像を読み込む必要がないので、応答時間やページの表示時間が少しだけ短縮できます。

画像を使った円と比べて、応答時間やページの表示時間が大幅に改善されるかといえばほとんど変わらないでしょう。

しかし、このような小さなことの積み重ねが結果的に大きな改善につながります。そのための方法の1つです。

まずは、HTMLとCSS、そしてその結果を見てみましょう。

『Run Pen』を押すと、サンプルコードが表示されます。

サンプルを見るとわかるように、作成方法はとてもかんたんです。width, heightを同じ値にして、 border-radiusの値をその半分にするだけです。

実は、border-radiusの値を半分以上にすると同じ結果になります。つまり、border-radiusの値を50%以上にすると円ができます。

これは、border-radiusの特徴を利用しています。border-radiusの特徴を見てみましょう。

左上を例に見てみます。border-top-left-radiusは、[水平方向の径] [垂直方向の径]を指定します。1つの値だけを指定した場合、水平方向と垂直方向の径は同じになるので、円の4分の1を描画します。そのほかの角も同じです。

border-radiusに1つの値を指定した場合、左上、右上、右下、左下のすべての角が円の4分の1を描画します。ということは、border-radiusの倍の値をwidth, heightに指定することで、正方形の中心がそれぞれの角の4分の1円の中心となり、結果として円が描画されます。

文章だとわけが分かりませんね?百聞は一見にしかずです。今の文章をHTML, CSSで表現すると次のようになります。

『canvasで描けばそれでいいじゃん』と思いますが、canvasで円を描くと、スマホで見たときになめらかさがありません。なので、とりあえずこの方法を残しておきます。
まぁ、昔はこうしていたという遺産を残す意味でもいいかなぁと。

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!