SEOの実験やデータ分析など公開

ディーボのSEOラボ

  • 運営情報

HTML/CSSで下線(アンダーライン)を引くには?1分でわかるテキスト際立たせテクニック!

Webデザイン

HTML/CSSで下線(アンダーライン)を引いて、重要なテキストを際立たせれば見やすいホームページになります。

\申し込みは簡単!今なら、調査結果資料無料配布中!SEO無料調査を申し込む

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

HTML/CSSで下線(アンダーライン)を引くには?1分でわかるテキスト際立たせテクニック!
\申し込みは簡単!今なら、調査結果資料無料配布中!SEO無料調査を申し込む

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

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

\申し込みは簡単!今なら、調査結果資料無料配布中!SEO無料調査を申し込む

色を付ける(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対策が必要です。

\申し込みは簡単!今なら、調査結果資料無料配布中!SEO無料調査を申し込む

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

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

css記述例
\申し込みは簡単!今なら、調査結果資料無料配布中!SEO無料調査を申し込む

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

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

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

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

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

\申し込みは簡単!今なら、調査結果資料無料配布中!SEO無料調査を申し込む

まとめ

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

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

SEO対策しても検索順位が上がらない…なぜ?

検索順位の推移

SEO対策しても検索順位が上がらない…なぜ?

検索順位が上がらない理由は、SEO対策の質が低いからです。

例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やす、内部リンクの最適化など疎かにします。
この場合、SEO対策の質が下がります。
そうなれば、ページやサイト自体の品質が上がらないので、Googleに評価されづらくなります。
結果、検索順位が上がらないというわけです。

こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策をご案内します(無料)。

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