HTMLで円形の境界線内に単語や文を表示する方法

方法1: border-radiusを使用する方法 この方法では、CSSのborder-radiusプロパティを使用して、円形の境界線を作成します。

<style>
  .circle-border {
    border: 2px solid black;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
  }
</style>
<div class="circle-border">
  <span>テキスト</span>
</div>

方法2: クラスを使用する方法 この方法では、クラスを使用して円形の境界線を作成し、そのクラスをテキストに適用します。

<style>
  .circle-border {
    border: 2px solid black;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    display: inline-block;
  }
</style>
<div>
  <span class="circle-border">テキスト</span>
</div>

方法3: SVGを使用する方法 この方法では、SVGを使用して円形の境界線を作成し、テキストをSVG要素内に配置します。

<svg width="200" height="200">
  <circle cx="100" cy="100" r="98" stroke="black" stroke-width="2" fill="none" />
  <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central">テキスト</text>
</svg>

これらはいくつかの基本的な方法ですが、他にもさまざまな方法があります。具体的な要件に応じて適切な方法を選択できます。