Blog スタッフブログ

WEBサイト内で表示する様々な装飾をできるだけコーディングだけで再現することは、SEO対策など様々な観点から考えて重要なことです。
今回は文字のボーダーや傍点といった一般的な装飾を再現するCSSについて解説いたします。

❶文字に傍点を打つ

text-emphasis,radial-gradientという2種類の方法をご紹介します。

共通操作として、傍点を打ちたいテキストを<span></span>で囲んでおきます。

spanの内側で

text-emphasis: dot;

と設定するだけで完成します。この記述方法は簡単ですが、

傍点のサイズを変更できない

という無視できないデメリットもあります。

二つ目の方法であるradial-gradientは円形を放射状に広げるCSSプロパティです。

これをspan内部の要素に対して背景として設定することで傍点を表現することができます。

このように記述します。この方法では記述量自体は多くなりますが、

paddingで傍点の位置を、background-sizeで大きさを調整できる

という強みがあります。

❷文字に傍線を入れる

文字の傍線は通常borderプロパティで入れることができます。

しかし、以下のようなデザインの場合は別の方法を使う必要があります。

方法の一つとしては、span内の要素に対してbackgroundプロパティを設定するというものがあります。

この場合、以下のように背景色のうち透明部分の領域(transparent)と色の領域(#4bcbe2)をわけることで傍線のように見せかけることができます。

もちろん、双方の割合を調整することで線の太さを操作できます。

あるいは、以下画像のように疑似要素を使用するという手もあります。

疑似要素内のheightの数値を上下させることで線の太さを変化させられます。

この場合、線の太さがそのままheightの数値となるので、直感的に分かりやすいというメリットがあります。

注意点として、上記画像のようにz-indexを指定しておかないと文字の上に線が重なり視認性が悪化します。