htmlで強調したい文字にはstrongタグが使われることが多いですが、タグをつけるだけで特に何もしてない・・・という方もいると思います。

今日はstrongで文字を強調した時に、よく使われているCSSのデザインを5つご紹介します。

文字をstrongで強調すると、seoの面でも重要なテキストとして認識されますし、何より装飾をすることでポイントとして目立ち文章も読みやすくなります。

1.太字

これはデフォルトで設定されているものですね。単純に文字が太くなって表示されます。でもこれだけだとちょっと物足りないかも?

See the Pen strong1 by tatsuya nakafuji (@handywebdesign) on CodePen.

2.色を変える

太字だけじゃなくて文字の色を目立つ色にするだけでもより文字が強調して見えます。色を使うことで文章の見た目にもメリハリがうまれるので、単調な感じが軽減されますね。

See the Pen strong2 by tatsuya nakafuji (@handywebdesign) on CodePen.

3.下線をつける

ボーダーを使って下線をつけるデザインも強調文字ではよく見かけます。ただし文字の色を青にして下線をつけるとリンクに見えたりもするので、色使いなど注意してください。

display: inline-blockにすることで、縦幅が調整できるので下線の位置をmarginで少しずらして文字にくっつかないようにすることもできます。

See the Pen strong3 by tatsuya nakafuji (@handywebdesign) on CodePen.

4.背景色をつける

文字の色を変えるのではなく、背景色を変えるのもよく見かけますね。文字の色は黒のままがいい、といった人にはおすすめです。薄めの色にして文字の読みやすさにも注意しましょう。

See the Pen strong4 by tatsuya nakafuji (@handywebdesign) on CodePen.

5.マーカーっぽい線をつける

一番多いのはこのマーカーのような線をつける方法です。ちょっと一手間加えたように見えますし、マーカーのような線がハンドメイドのような味わいもあって、利用している人が多いですね。

CSSのlinear-gradient(グラデーション)を使って実装することができます。単純に背景で色をつけるよりも、こちらのほうが文字は読みやすいかなと思います。

See the Pen strong5 by tatsuya nakafuji (@handywebdesign) on CodePen.

強調文字のデザインも一度見直してみよう

strongは使ってるけど特になにもしてなかった・・・という方がいたら、一度デザインを見直してみてはどうでしょうか。

文章が読みやすくなったりすると、サイトの印象もよりアップするのでメリットもたくさんあると思います。