キャプチャ画像
HOME > ウェブデザイン > 【CSS】テキストの下に引くアンダーラインをアレンジしてブログの読みやすさをちょっとだけ改善してみる
公開日:2013.5.16
この記事は約2分で読めます。

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

この記事は最終更新日から6年以上経過しているため現状にそぐわない可能性もあります。

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

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

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

SIRIUSレビューイメージ画像

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

こちら↓をご覧下さい。

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

これはサンプル文例です

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

これはサンプル文例です

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

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

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

 

私は下の方です。

どちらもHTML上は

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

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

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

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

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

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

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

そしてCSSには、

とつけてやります。

 

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

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

これはサンプル文例です

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

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

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