HTML・CSSで囲み文字を作る方法（四角・正円）

CSSでHTMLテキストや特定の文字を枠線で囲む方法をご紹介します。

divはブロック要素なので横幅一杯まで囲んでしまいますが、インライン化すれば文字部分だけを囲むようになります。

1文字のみを正円で囲むには、文字の下にCSS疑似要素で作った正円を敷く形にしましょう。

文章や文字を枠線で囲みたい

本記事では、HTML上のテキストを枠線で囲む方法について紹介していきます。

文字情報は単に表記するだけでなく、枠線等でデザインする方が洗練され、ユーザーの目に留まりやすくなりますよね。

文章を枠線で囲む、文字を枠線で囲む、機種依存文字の様に1文字を正円の枠で囲む方法について解説していきましょう。

段落を枠線で囲む

テキストを枠線で囲む場合、通常は外枠を囲んでいるdiv（ブロック要素）に対してCSSでborderを設置するのが一般的です。

外枠をdivで囲んでいる場合

html

<div class="border"> <p>枠線で囲まれるブロック要素の文章</p> </div>

css

.border{ border: solid 1px #454545; }

サンプル

この時の枠線は、borderプロパティで色や太さ・形状など自在に変更する事ができます。

文字との間隔などもpaddingで調整すれば、見栄えの良い空白を作る事が可能です。

一般的な方法なので、既にご存じなのではないでしょうか。

常に横幅一杯を囲む

ポイントはdivはブロック要素なので、枠線が文章部分ではなく段落全体を囲む事です。

仮に文章が短くても常に横幅一杯まで囲むため、右端に余白ができる事が多いです。

これがブロック要素divの特徴ですね。

文字を枠線で囲む

ではdivなどのブロック要素単位ではなく、特定の文字や文章部分のみを枠線で囲む場合はどうしたらよいのでしょうか。

右端に余白を作らず、常に文の末尾までで枠線が収まるようにしたい訳ですね。

特定の文字・文章部分を囲む場合、いくつかの方法があります。

インラインタグによる構成

html

<p><span>特定文章</span>部分のみ枠線で囲む</p>

CSS

p span{ border: solid 1px #454545; }

サンプル

特定文章部分のみ枠線で囲む

spanはブロック要素ではなくインライン要素なので、段落とみなされることがありません。

ですので枠線をつけたい部分をspanで囲んで、CSSでborder設定を掛けてあげましょう。

そうすれば文字部分だけを囲む事ができます。

ブロック要素のインライン化

divのブロック要素でも、文章部分のみを枠線で囲むことはできます。

この場合、周りを囲むdivに対し「display: inline-block;」を追加する事で対応します。

これによりdiv要素が「インライン化」され、文章部分のみを囲える様になります。

html

<div class="ib">文章を枠線で囲む</div>

CSS

.ib{ display: inline-block; border: solid 1px #454545; }

サンプル

先程は横幅一杯まで枠線が伸びていましたが、今回は文の末尾までで止まっています。

この様にinline-blockをつければ、常に文章部分だけを囲むようになります。

丸みをつける

borderプロパティは、border-radius:を使えば角に丸みを加える事ができます。

px数値を変える事で、丸みの調整もできます。

枠線幅と丸みの角度をうまく使って、オシャレな枠線を演出する事ができます。

サンプル（border-radius）

特定文章部分のみ枠線で囲む

1文字を正円で囲む

ここまでは文字を四角で囲んできましたが、丸く囲む例も紹介しましょう。

1文字だけの場合、四角く囲むよりも丸く囲むケースの方が多いのではないでしょうか。

正円（真ん丸）で囲む

ここでの丸く囲むというのは楕円形ではなく、真ん丸の「正円」で囲む事を指します。

よく数字の周りを正円で囲った「特殊依存文字」ってありますよね。

この数字はキーボードで出力できますが、通常の文字を正円で囲ったものは用意されていません。

border-radius:で検証

枠線をCSSでまん丸にする場合、border-radius: 50%;を使う事が多いでしょう。

これを利用して、1文字を丸で囲って検証してみます。

先程のインライン設定で試すと、以下のようになります。

サンプル（真円にならない）

結果としてはご覧の通り、楕円形になってしまいます。

これで正円を描こうと思ったら、様々な調整が必要になるのですね。

ではどうすればもっと簡単に正円で囲めるのでしょうか。

正解：真ん丸の枠線を文字の下に敷く

正解は「文字を囲むのではなく、文字の下に正円を敷く事」です。

CSSで文字の下に真ん丸の枠線をうまく入れれば、正円で囲った様に見せる事ができるのです。

html

<p>このバラは<span>赤</span>いです。</p>

CSS

span{ padding: 0 0.2em; position: relative; } /* afterで丸枠を生成 */ span::after { content: ''; position: absolute; display: block; top: 47%; left: 1px; transform: translateY(-50%); width: 1.2em; height: 1.2em; border: 1px solid #454545; border-radius: 50%; }

サンプル

この様に、きちんと赤の文字の周りを正円が囲んでいますよね。

正円が表示されてもバランスが崩れない様に、spanタグにpaddingで多少余白を作っています。

CSS解説

正円を敷くのに役立つのが、beforeやafterなどの疑似要素です。

今回、正円の枠線部分はafter疑似属性が担当します。

正円の生成

本来、構成する要素は横と縦のサイズを指定した「四角形」になります。

しかし枠線のborder-radiusで50％を指定する事で「正円」の造形にできるのです。

border: 1px solid #454545;で囲っているので、正円に見えます。

その正円の枠を、beforeで作った連番数字の下にもぐり込ませています。

正円枠の位置指定

一旦絶対配置（top: 47%;）で要素の高さの丁度半分（中心）くらいまで移動させます。

その上でtransform: translateY(-50%):で半分程上にずらしています。

これによりどのような環境でも、正円枠を常に文字の真っ芯部分に持ってくる事ができます。

これで1文字を正円で囲むことができるようになりましたね。

応用編：自動出力される番号を正円で囲む

最後は自動で出力されるリストの番号対して、正円で囲む例を紹介します。

これも先程と同じ仕組みで、数字の下に正円枠を敷き詰めて実現しています。

番号付きリストの構成

html

<ol> <li>連番付きリスト</li> <li>連番付きリスト</li> <li>連番付きリスト</li> <li>連番付きリスト</li> <li>連番付きリスト</li> </ol>

CSS

/* 番号付与を初期化します */ ol { list-style-type: none; counter-reset: number; } ol li { position: relative; } /* beforeで番号リストを作成 */ ol li::before { content: counter(number); counter-increment: number; padding: 0 0.2em; } ol li::after { position: absolute; display: block; top: 47%; left: 1px; width: 1.1em; height: 1.1em; content: ''; transform: translateY(-50%); border: 1px solid #454545; border-radius: 50%; }

サンプル

リストの項目の頭に番号が１～５と自動付与されており、それらが全て正円で囲まれています。

正確には囲まれているのではなく、下に正円を敷いているだけです。

CSS解説

この例もbefore・afterの疑似要素をフル活用したものになります。

まず「li」につく連番の番号は、before属性につけたcontent: counter(number)で生成しています。

liの項目が増えるごとに番号が連番付与されるようになっています。

このbeforeで生成された番号の下に、afterで生成した正円枠が入ってくる訳ですね。

afterで生成した正円の仕組みは、一つ前の事例と同じです。

連番を正円で囲む際の注意

サンプル

上記の様に番号が2桁になると1文字ではなくなり、下に敷いた正円との間にズレができます。

数が2桁になるケースでは、使わない方が無難ですね。

一押し人気コーナー紹介