HTML&CSS: 円を作る方法

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
html5 css3 image
イラストACの画像をもとに加工しています。

画像を使わずに、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で円を描くと、スマホで見たときになめらかさがありません。なので、とりあえずこの方法を残しておきます。
まぁ、昔はこうしていたという遺産を残す意味でもいいかなぁと。

 

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

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

*

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

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