【CSS】テキストの下に引くアンダーラインをアレンジしてブログの読みやすさをちょっとだけ改善してみる

テキストを強調するため太字にしたり色を変えたりサイズを大きくしたりすることがあります。

それ以外にもテキストの下にアンダーラインを引いて目をひくという方法もあります。

このアンダーラインですが、普通に設定すると文字にぴたっとくっついてちょっと見にくいという印象を持ったことはないですか？

アンダーライン一つにも気を配ってみる

こちら↓をご覧下さい。

「これはサンプル文例です」というテキストにアンダーライン（下線）が引いてあります。

そしてこちら↓も同じくアンダーラインを引いた例。

違いがわかりますでしょうか。

上はテキストにアンダーラインがぴたっとくっついて引かれているのに対し、下はテキストから少しだけ離れてアンダーラインが引かれてます。

どちらが読みやすいと思います？

 

私は下の方です。

どちらもHTML上は

ですが、下の方はこのような↓CSS設定を施してます。

これは『<u></u>で引かれたアンダーラインは「なし」にして、新たに1pxの下線をテキストから1px 離れたところに引く』というものです。

もしブログなどで下線を引くためにuタグがついているようであれば、上のCSSを追加するだけで下線が少し離れてくれます。

ただしuタグは非推奨要素なので、実際にはspanクラス指定を付けた書き方の方がスマートかもしれません。

アンダーラインはクラス指定で

例えばHTMLはこんな感じでクラスを付与してあげます。

そしてCSSには、

とつけてやります。

 

さらにCSS3でちょっとした装飾を付けてみると…。

こんな風にも↓なります。

単なるアンダーラインよりはいいんじゃないでしょうか。

以上です。