四角で囲む文字をCSSで作成 //CSS

 4 
のように、四角で囲む文字をCSSで扱う機会があったので、記録しておきます。

ふと思うと、今までなら画像で処理してしまいそうでしたが、ブラウザでの文字サイズの変更や、ファイルサイズを1バイトでも減らすことは、サーバーや回線の負荷など、1つは微々たるものでも、何度も表示されれば積み重なっていくので、今回はエコを考えてCSSでの処理となりました。

まあ、とくに目新しい訳ではないですが、次使うときには忘れていそうなので。

//HTML//////////////////////////////////////////////////////////////////

<span class="cubettl">&nbsp;4&nbsp;</span>


//CSS//////////////////////////////////////////////////////////////////

.cubettl{
border-style: solid;
border-width: 1px;
border-color: #000000;
color:#000000;
}

/*Safariのみ見え方が異なるため、ハックで調整*/
body:last-child:not(:root:root) .cubettl {
padding-top:0px;
padding-bottom:1px;
}