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

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

2017/04/12[最終更新日]:2017/04/13
このエントリーをはてなブックマークに追加

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

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

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

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

PR

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 *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
ご担当者様名 *
電話番号 *
メールアドレス *

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

このエントリーをはてなブックマークに追加
カテゴリ:内部対策
B!

最新記事
SEOラボをSNSで応援する
無料SEOツール
話題の記事
2017年7月 効果があったSEO対策は、被リンク【まとめ】
アメブロで上位表示できますか?【今月(2017年8月)の問合せ】
サイトの使いやすさ(UX=ユーザーエクスペリエンス)が重要なSEO要因になってきている
「検索エンジン最適化スターターガイド」は最も効率のよいSEO技法である
ブログを2つ運営しています。同じ内容を投稿していいの?という問い合わせ
最近6位に上昇したページの対策教えます
他社のSEO商品を比較
最近、順位が落ちてきたというお問合せ
最近のSEO対策と順位決定の仕組み
検索ユーザーが求めるコンテンツの考え方
人気記事BEST10
follow us in feedly