HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLページで円を描く方法｜CSSのborder-radiusを使った簡単な実装例

HTMLページ上に円を描くには、主に「SVG」「Canvas」「CSS」の3つの方法があります。中でも最も手軽なのが、CSSのborder-radiusプロパティを使う方法です。要素の幅と高さを同じ値にし、border-radiusをその半分（または50%）に設定するだけで、簡単に正円を描くことができます。

HTMLページで円を描く方法｜CSSのborder-radiusを使った簡単な実装例

CSSで円を描くサンプルコード

以下のコードを実行すると、青い円が画面に表示されます。ぜひ実際に試してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #circle {
            width: 50px;
            height: 50px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            background: blue;
         }
      </style>
   </head>
   <body>
      <div id="circle"></div>
   </body>
</html>

コードのポイント

  • widthとheight：どちらも50pxに設定し、正方形の要素を作成します。
  • border-radius：幅・高さの半分である25pxを指定することで、四隅が完全に丸められ正円になります。「50%」と指定しても同じ結果になります。
  • ベンダープレフィックス：「-webkit-」や「-moz-」が付いた記述は、古いブラウザ向けの互換用指定です。現在のモダンブラウザでは標準のborder-radiusだけで十分です。
  • background：円の塗りつぶし色を指定します。好みの色に変更可能です。

その他の方法：SVGとCanvas

より高度な描画を行いたい場合は、SVGやCanvasの利用も検討しましょう。SVGはベクター形式のため拡大しても画質が劣化せず、アイコンや図形の描画に適しています。一方、CanvasはJavaScriptと組み合わせることで、アニメーションや動的なグラフィック描画に活用できます。静的な円であればCSSが最もシンプルで、パフォーマンス面でも優れています。

  1. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま

  2. JavaとOpenCVで円を描画する方法を徹底解説

    Java版OpenCVライブラリの org.opencv.imgproc パッケージには、Imgproc というクラスが含まれています。画像に円を描きたい場合は、このクラスが提供する circle() メソッドを呼び出します。このメソッドは以下のパラメータを受け取ります。Matオブジェクト：円を描画する対象となる画像を表します。Pointオブジェクト：円の中心座標を表します。int型の値：円の半径を表します。Scalarオブジェクト：円の色を表します。OpenCVでは色の指定順序がRGBではなくBGR（青・緑・赤）である点に注意してください。int型の値：円の輪郭線の太さを表します。デフォルト