サンプル コード

<!--  HTML  -->
<div id="sample">
  <div class="content">
    <p>問） 一辺の長さxの正方形と、これに外接する円がある。正方形のある一辺ABの垂直二等分線上に、辺ABとの交点P、円との交点Qがあるとき、線分PQの長さyを求めよ。ただし、線分PQは正方形と交わらないものとする。</p>
    <p>円の半径をrとするとき、x + 2y = 2r。また、三平方の定理により、r = x√2 / 2。よって、y = x(√2 - 1) / 2。</p>
    <p>答） x(√2 - 1) / 2</p>
  </div>
</div>

/*  CSS  */
#sample .content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(22em * (1.41421356237 - 1) / 2 );
  width: 22em;
  height: 22em;
  border-radius: 50%;
  font-size: 1vw;
  background: pink;
}
@media screen and (max-width: 1000px){
  #sample .content{
    font-size: 10px;
  }
}

サンプル DEMO

ブラウザウインドウの幅を変えて、レスポンシブでの変化をご確認ください。（表示領域幅1000px未満のデバイスだと変化がありません）

なお、DEMO では数式に MathJax を使っていますが、本題じゃないのでここではスルーします。興味のある方は MathJax 公式サイトをご参照ください。

コード解説

まず CSS 3-6行目、flex でコンテンツを縦横中央揃えにしています。

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

ポイントは11行目で、font-size をビューポート幅を基準とした相対値（vw単位）で指定しています。

  font-size: 1vw;

この font-size を基準にして、8-9行目でコンテンツのサイズを em単位で指定しています。これにより、ビューポート幅→フォントサイズ→コンテンツボックスサイズと連動して、流動的に大きさが変化します。

  width: 22em;
  height: 22em;

このコンテンツのサイズを基に、7行目ではサンプルテキストにある数式を用いて padding を指定しています。この padding を指定しないと、テキストエリアの四隅が円のボーダー境界からはみ出てしまいます。（1.41421356237 ≒ √2 です。三平方の定理は、最寄りの中学生に確認しました）

  padding: calc(22em * (1.41421356237 - 1) / 2 );

最後に14-17行目、メディアクエリを用いて、ビューポート幅が1000px 以下のときに font-size を 10px に固定しています。このサンプルでは font-size を 1vw にしましたから、ビューポート幅 1000px のとき 10px になります。これよりも小さくならないようにするための指定です。

@media screen and (max-width: 1000px){
  #sample .content{
    font-size: 10px;
  }
}

Chrome では font-size に 10px 未満の指定をしても、良心的なことに 10px で表示されます。ですが、em単位で指定したコンテンツボックスの方はビューポート幅に応じて小さくなるため、メディアクエリでの指定をしておかないと、テキストのオーバーフローが生じます。

まとめ

今回は、レスポンシブデザインでも円形を保つ、テキストの囲み枠（ボックス）を描く CSSコーディングをご紹介しました。

ポイントは、フォントサイズをビューポート幅を基準とした相対値（vw）で指定すること、そのフォントサイズを基準とした相対値（em）でボックスのサイズを指定することです。ビューポートに連動した指定を、シンプルな記述で実現しています。

あとはテキストが、50%の角丸で表現した円形のボーダーからオーバーフローしないように、三平方の定理を用いてボックスのパディングを指定している点も面白ポイントです。

注意点は、ブラウザによっては最小表示可能サイズがある（Chrome は 10px 未満では表示されない）ので、その値に合わせてメディアクエリで絶対値を指定する必要があることです。