loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
キャプチャ画像
Home > [ウェブデザイン] > 【CSS】テキストの下に引くアンダーラインをアレンジしてブログの読みやすさをちょっとだけ改善してみる
この記事は約2分で読めます。
この記事は最終更新日から4年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2013.5.16

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

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

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

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

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

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

これはサンプル文例です

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

これはサンプル文例です

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

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

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

 

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

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

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

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

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

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

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

で、CSS に、

とつけてやります。

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

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

これはサンプル文例です

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

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LUXE (tcd022)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

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

先頭へ