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

SEOの疑問を実験で解明しブログ配信【SEOラボ】

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

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対策が必要です。

上位表示させるための基本的対策をご紹介しています。

関連記事

【SEOとは?】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が正しく施されているかどうかを無料で調査し、問題点や改善点などのアドバイスを致します。

\ 効果的な改善方法を明確にしませんか? / サイト調査を依頼する

カテゴリから記事を探す

SEO対策無料ご提案はこちら