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

Total 2,120 views
この記事の所要時間は約 2分です。

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

スポンサーリンク


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

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

イメージ画像

 

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

こちら↓をご覧下さい。
「これはサンプル文例です」というテキストにアンダーライン(下線)が引いてあります。

これはサンプル文例です

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

これはサンプル文例です

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

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

どちらが読みやすいでしょう。

 

私は下の方です。
どちらも HTML 上は

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

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

u は下線を引くという HTMLタグです。

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

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

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

で、CSS に、

とつけてやります。

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

そうするとこんな風にも↓なります。

これはサンプル文例です

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

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)