長文でも overflow しない! レスポンシブな円でテキストを囲む方法

長文でも overflow しない! レスポンシブな円でテキストを囲む方法

テキストの囲み枠(ボックス)をデザインしたいケースは多いと思います。雑誌・新聞で言えば、囲み記事というものですね。

CSSで背景色を敷いたり、枠線を引いて角丸にしたり。レスポンシブデザインで一行に納まる文字数が少なくなっても、テキストは自然に折り返されて、囲み枠もテキストに応じて縦に広がります。

でも、囲み枠を円にしたい場合はどうでしょう? 縦長の楕円に変形してしまったり、テキストが枠からはみ出してしまったりと、うまくいかないと言う方も多いのではないでしょうか。

そこで今回は、レスポンシブデザインでも円を保ったまま、テキストをきちんと納める囲み枠を描くCSSコードをご紹介します。

サンプル コード

<!--  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

問) 一辺の長さ\(x\)の正方形と、これに外接する円がある。正方形のある一辺\(AB\)の垂直二等分線上に、辺\(AB\)との交点\(P\)、円との交点\(Q\)があるとき、線分\(PQ\)の長さ\(y\)を求めよ。ただし、線分\(PQ\)は正方形と交わらないものとする。

円の半径を\(r\)とするとき、\(x + 2y = 2r\)。また、三平方の定理により、\(r = \frac{x\sqrt{2}}{2}\)。よって、\(y = \frac{x(\sqrt{2} - 1)}{2}\)。

答) \(\frac{x(\sqrt{2} - 1)}{2}\)

ブラウザウインドウの幅を変えて、レスポンシブでの変化をご確認ください。(表示領域幅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 未満では表示されない)ので、その値に合わせてメディアクエリで絶対値を指定する必要があることです。

文章を円で囲む表現は、Webメディアに向いていないかもしれませんが、逆に言えば、デザインに独自性を加える手段のひとつになり得るかもしれませんね。