LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

HTML&CSS 円を作る方法

html5 css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

画像を使わずに、HTMLとCSSだけで円を作る方法です。とてもかんたんです。

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

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

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

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

See the Pen Circle by tadtadya (@tadtadya) on CodePen.

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

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

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

See the Pen border-radius sample by tadtadya (@tadtadya) on CodePen.

左上を例に見てみます。border-top-left-radiusは

[水平方向の径] [垂直方向の径]

を指定します。ひとつの値だけを指定すると、水平方向と垂直方向の径は同じになるので、円の4分の1を描画します。そのほかの角も同じです。

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

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

See the Pen circle2 by tadtadya (@tadtadya) on CodePen.

4つの1/4円を同じ色にすれば円の完成です。

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

昔はこうしていたという遺産を残す意味でもいいかなぁと。

HTML&CSSの本

post-cta-image

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

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


HTML&CSSの本2選

コメントを残す

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