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

seoラボラトリー

  • follow us in feedly

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

2017/04/12 2017/08/24

HTMLとCSSで下線(アンダーライン)を引き、テキストを際立たせながら、サイト構築する方法があります。

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

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

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

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

HTML/CSSで下線に色を付ける(text-decoration-color)

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

HTMLマークアップ例:
<p style=”text-decoration:underline; text-decoration-color:#FF0000;”>ホームページの順位を上げるためにSEO対策が必要です。</p>

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

HTMLマークアップ例:
<p>ホームページの順位を上げるためにSEO対策が必要です。</p>
CSS記述例:
p {
text-decoration:underline;/*下線を引く*/
text-decoration-color:#FF0000;/*下線を赤色*/
}

HTML/CSSで下線(text-decoration)を点線にする

「text-decoration」ではできないため、「border-bottom」を使って下線を点線にします。

HTMLに直接CSSの「border-bottom:太さ dotted 色;」を指定して、テキストの下線を点線にすることができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”border-bottom:1px dotted #FF0000;”>SEO対策が必要</span>です。</p>

また、CSSを外部ファイルに記述し、読み込ませることで下線を点線にできます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span class=”seotext”>SEO対策が必要</span>です。</p>
CSS記述例:
.seotext {
border-bottom:1px dotted #FF0000;/*1ピクセルの赤い点線で下線を引く*/ }

HTML/CSSで下線(text-decoration underline)の太さ(太字)を調整する

「text-decoration」ではできないため、「border-bottom」を使って下線の太さ(太字)を調整します。

HTMLに直接CSSの「border-bottom:太さ solid 色;」を指定して、テキストの下線の太さ(太字)調整ができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”border-bottom:5px solid #FF0000;”>SEO対策が必要</span>です。</p>

また、CSSを外部ファイルに記述し、読み込ませることで下線の太さ(太字)調整ができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span class=”seotext”>SEO対策が必要</span>です。</p>
CSS記述例:
.seotext {
border-bottom:5px solid #FF0000;/*5ピクセルの太さ(太字)で下線を引く*/ }

HTML/CSSで下線を二重線にする

「text-decoration」ではできないため、「border-bottom」を使って下線を二重線にします。

HTMLに直接CSSの「border-bottom:太さ double 色;」を指定して、テキストの下線を二重線にできます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”border-bottom:3px double #FF0000;”>SEO対策が必要</span>です。</p>

また、CSSを外部ファイルに記述し、読み込ませることで下線を二重線にできます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span class=”seotext”>SEO対策が必要</span>です。</p>
CSS記述例:
.seotext {
border-bottom:3px double #FF0000;/*3ピクセルの太さ(太字)で二重線を引く*/
}

HTML/CSSで下線の長さを調整する

下線の長さを調整することは基本的にできないようです。

テキスト文字の長さに合わせて下線を引く場合は、SPANタグを使いましょう。

HTML/CSSで下線(underline)の位置を調整する

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

HTMLに直接CSSの「text-decoration:underline;」「text-underline-position:下線の位置;」を指定して、テキストの下線の位置を調整できます。

HTMLマークアップ例:
<p style=”text-decoration:underline; text-underline-position:above;”>ホームページの順位を上げるためにSEO対策が必要です。</p>

また、CSSを外部ファイルに記述し、読み込ませることで下線の位置を調整できます。

HTMLマークアップ例:
<p>ホームページの順位を上げるためにSEO対策が必要です。</p>
CSS記述例:
p {
text-decoration:underline;/*下線を引く*/
text-underline-position:above;/*下線の位置をテキストの上に引く*/
}

HTML/CSSで下線をマーカー風に引く

HTMLに直接CSSの「background:linear-gradient(transparent 太さ, 色 0%);」を指定して、テキストの下線をマーカー風に引くことができます。
※参考:CSSを使って蛍光ペンで太い線や細い線を引いた雰囲気を出す

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”background: linear-gradient(transparent 70%, #FFFF00 0%);”>SEO対策が必要</span>です。</p>

また、CSSを外部ファイルに記述し、読み込ませることで下線をマーカー風にもできます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span class=”seotext”>SEO対策が必要</span>です。</p>
CSS記述例:
.seotext {
background: linear-gradient(transparent 70%, #FFFF00 0%);/*70%の太さで黄色マーカー風に下線を引く*/
}

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

HTML/CSSでSPANタグを使って下線を引く

SPANタグを使い、以下のように下線を引くことができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”text-decoration:underline;”>SEO対策が必要</span>です。</p>

また、CSSを外部ファイルに記述し、読み込ませることでSPANタグを使って下線を引くことができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span class=”seotext”>SEO対策が必要</span>です。</p>
CSS記述例:
.seotext {
text-decoration:underline;/*下線を引く*/
}

HTML/CSSでリンクに下線を引く

HTMLのアンカータグ(<a>)に直接CSSの「text-decoration:underline;」を指定して、テキストリンクに下線を引くことができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<a href=”http://seolaboratory.jp” style=”text-decoration:underline;”>SEO対策が必要</a>です。</p>

また、CSSを外部ファイルに記述し、読み込ませることでテキストリンクに下線を引くことができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<a href=”http://seolaboratory.jp”>SEO対策が必要</a>です。</p>
CSS記述例:
a:link {
text-decoration:underline;/*下線を引く*/
}

HTML/CSSで下線として波線を引く

HTMLに直接CSSの「text-decoration:underline;」「text-decoration-style:wavy;」を指定して、テキストに下線として波線を引くことができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span style=”text-decoration:underline; text-decoration-style:wavy;”>SEO対策が必要</span>です。</p>

また、CSSを外部ファイルに記述し、読み込ませることで下線として波線を引くことができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span class=”seotext”>SEO対策が必要</span>です。</p>
CSS記述例:
.seotext {
text-decoration:underline;/*下線を引く*/
text-decoration-style:wavy;/*下線を波線で表示*/
}

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTML/CSSで下線を消す方法(下線なし)

HTML/CSSで下線を消す方法(下線なし)は、以下のようになります。

HTMLに直接CSSの「text-decoration:none;」を指定して、テキストの下線を消す(下線なしにする)ことができます。

HTMLマークアップ例:
<p style=”text-decoration:none;>ホームページの順位を上げるためにSEO対策が必要です。</p>

また、CSSを外部ファイルに記述し、読み込ませることで下線を消す(下線なしにする)ことができます。

HTMLマークアップ例:
<p>ホームページの順位を上げるためにSEO対策が必要です。</p>
CSS記述例:
p {
text-decoration:none;/*下線を消す(下線なしにする)*/
}

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

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

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

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

HTMLマークアップ例:
<p>ホームページの順位を上げるために<u>SEO対策が必要</u>です。</p>

まとめ

HTML/CSSで下線をうまく活用し、ポイントに目が行くようなわかりやすいサイトにしましょう。

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

順位が上がらないのは、何が原因??
順位決定の仕組と、
サイトの問題点をアドバイス(無料)

お申込みはこちらから

上位表示を目指すURL

※アメブロ、jimdo、fc2ブログのURLはご遠慮ください

上位表示を目指すキーワード

会社名/組織名

ご担当者様名

電話番号

メールアドレス

※個人情報の管理は「プライバシーポリシー」に同意の上お申し込みください

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

最新記事

本日の順位変動幅順位変動情報へ