SEO対策に関する実験やデータ分析などを公開します

SEOラボ

HTML/CSSで下線(アンダーライン)!3分でわかるテキスト際立たせテクニック

2017/04/12 2018/03/15

htmlとcssの記述を工夫することによって文章に下線(アンダーライン)を引き、重要な部分を目立たせながら、コンテンツを構築する方法があります。

では今回は、HTML(HTML5)とCSSで下線を引く方法と、色を付ける方法、点線にする方法についてご説明したいと思います。

HTML/CSSで下線(アンダーライン)!3分でわかるテキスト際立たせテクニック

HTML(HTML5)/ CSSで下線を引く(デザインする)方法

HTML(HTML5)とcssで下線を引く(デザインする)方法は、以下のようになります。

色を付ける(text-decoration-color)

htmlに直接cssの「text-decoration:underline;」「text-decoration-color」を指定して、テキストの下線に色を付けることができます。

htmlマークアップ例

また、cssを外部ファイルに記述し、読み込ませることで下線に色を付けることができます。

htmlマークアップ例
css記述例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

点線にする

下線を点線にするには「text-decoration」では表現できないため、「border-bottom」というプロパティを使い、「dotted」という値を設定することによって点線にすることができます。

htmlマークアップ例
css記述例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

太さを調整する

下線の太さは「border-width」を使って調整します。

css記述例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

二重線にする

二重線にするには「border-bottom」に「double」という値を設定して下線を二重線にします。

css記述例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

位置を調整する

cssで下線(underline)の位置を調整することはできますが、IE独自の拡張機能のため、IEブラウザでしか適用されません。

また、「border-bottom」を記述して、paddingで余白を調整することも可能です。

css記述例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

マーカー風に引く

cssの「background:linear-gradient(transparent 太さ, 色 0%);」を指定して、テキストの下線をマーカー風に引くことができます。

このlinear-gradientというプロパティはグラデーションを表現するためのもので、上からグラデーションが開始する色と位置、そして終了する色と位置を決めます。

そして、transparentとは透明を意味します。
そのため、下記のように記述すると、透明が70%からはじまり、#ffff00という色が0%からはじまるということで、グラデーションの部分がなくなり、マーカーのような表現をすることができるということです。この数値を変更することでマーカーの太さをお好みに調整することができます。

css記述例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

また、backgroundや、background-color、padding-top、padding-bottomを指定して、マーカー風に下線を引くこともできます。

下線として波線を引く

「text-decoration:underline;」「text-decoration-style:wavy;」を指定すると、テキストに波線を引くことができます。

css記述例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

下線を消す方法(下線なし)

html/cssで下線を消す方法(下線なし)は、以下のようになります。
主にリンクの設定でアンダーバーを表示したくない場合に指定します。

css記述例

htmlで下線がすぐ引けるアンダーラインタグ(<u>)の使い方

htmlで下線がすぐ引けるアンダーラインタグ(<u>)の使い方は、以下のようになります。

htmlに直接アンダーラインを引きたい箇所を<u>~</u>でマークアップし、テキストにすぐ下線を引くことができます。

htmlマークアップ例
サンプル

ホームページの順位を上げるためにSEO対策が必要です。

まとめ

ということで今回はhtml / cssで下線を表現する方法をご紹介しましたが、こういった表現をうまく活用し、コンテンツ内の重要なポイントに目が行くようなわかりやすいサイトにしましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す