HTML/CSSで下線(アンダーライン)を引くには？1分でわかるテキスト際立たせテクニック！
HTML／CSSで下線（アンダーライン）を引いて、重要なテキストを際立たせれば見やすいホームページになります。
では今回は、HTML（HTML5）とCSSで下線を引く方法と、色を付ける方法、点線にする方法についてご説明したいと思います。
この記事でわかること
- HTML/CSSで下線を引く基本(text-decoration)と、色・太さ・位置の調整方法
- 点線・二重線・波線・マーカー風など、装飾別のCSS実例
- 下線を消す方法とuタグの正しい使い方
おすすめの読者層
- テキストに下線を引く具体的なCSSコードをすぐ知りたい方
- 単調になりがちな記事にアクセントを加えたいブログ運営者の方
HTML（HTML5）/ CSSで下線を引く（デザインする）方法
HTML（HTML5）とcssで下線を引く（デザインする）方法は、以下のようになります。
色を付ける（text-decoration-color）
htmlに直接cssの「text-decoration:underline;」「text-decoration-color」を指定して、テキストの下線に色を付けることができます。
htmlマークアップ例
|
1 |
<p style="text-decoration:underline; text-decoration-color:#FF0000;">ホームページの順位を上げるためにSEO対策が必要です。</p> |
また、cssを外部ファイルに記述し、読み込ませることで下線に色を付けることができます。
htmlマークアップ例
|
1 |
<p class="seotext_00">ホームページの順位を上げるためにSEO対策が必要です。</p> |
css記述例
|
1 2 3 4 |
p.seotext_00 { text-decoration:underline;/*下線を引く* text-decoration-color:#FF0000;/*下線を赤色* } |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
点線にする
下線を点線にするには「text-decoration」では表現できないため、「border-bottom」というプロパティを使い、「dotted」という値を設定することによって点線にすることができます。
htmlマークアップ例
|
1 |
<p>ホームページの順位を上げるために<span class="seotext_01">SEO対策が必要</span>です。</p> |
css記述例
|
1 2 3 4 5 |
.seotext_01 { border-bottom:dotted;/*下線を点線にする*/ border-color:#FF0000; border-width:1px; } |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
太さを調整する
下線の太さは「border-width」を使って調整します。
css記述例
|
1 2 3 4 5 |
.seotext_02 { border-bottom:solid; border-color:#FF0000; border-width:5px;/*5ピクセルの太さにする*/ } |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
二重線にする
二重線にするには「border-bottom」に「double」という値を設定して下線を二重線にします。
css記述例
|
1 2 3 4 5 |
.seotext_03 { border-bottom:double;/*二重線を引く*/ border-color:#FF0000; border-width:3px; } |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
位置を調整する
cssで下線（underline）の位置を調整することはできますが、IE独自の拡張機能のため、IEブラウザでしか適用されません。
また、「border-bottom」を記述して、paddingで余白を調整することも可能です。
css記述例
|
1 2 3 4 |
seotext_04 { text-decoration:underline;/*下線を引く*/ text-underline-position:above;/*下線の位置をテキストの上に引く*/ } |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
マーカー風に引く
cssの「background:linear-gradient(transparent 太さ, 色 0%);」を指定して、テキストの下線をマーカー風に引くことができます。
このlinear-gradientというプロパティはグラデーションを表現するためのもので、上からグラデーションが開始する色と位置、そして終了する色と位置を決めます。
そして、transparentとは透明を意味します。
そのため、下記のように記述すると、透明が70%からはじまり、#ffff00という色が0%からはじまるということで、グラデーションの部分がなくなり、マーカーのような表現をすることができるということです。この数値を変更することでマーカーの太さをお好みに調整することができます。
css記述例
|
1 2 3 |
.seotext_05 { background:linear-gradient(transparent 70%, #FFFF00 0%); } |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
また、backgroundや、background-color、padding-top、padding-bottomを指定して、マーカー風に下線を引くこともできます。
下線として波線を引く
「text-decoration:underline;」「text-decoration-style:wavy;」を指定すると、テキストに波線を引くことができます。
css記述例
|
1 2 3 4 |
.seotext_06 { text-decoration:underline;/*下線を引く*/ text-decoration-style:wavy;/*下線を波線で表示*/ } |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
下線を消す方法（下線なし）
html／cssで下線を消す方法（下線なし）は、以下のようになります。
主にリンクの設定でアンダーバーを表示したくない場合に指定します。
css記述例
|
1 2 3 |
p { text-decoration:none;/*下線を消す（下線なしにする）* } |
htmlで下線がすぐ引けるアンダーラインタグ（<u>）の使い方
htmlで下線がすぐ引けるアンダーラインタグ（<u>）の使い方は、以下のようになります。
htmlに直接アンダーラインを引きたい箇所を<u>～</u>でマークアップし、テキストにすぐ下線を引くことができます。
htmlマークアップ例
|
1 |
<p>ホームページの順位を上げるために<u>SEO対策が必要</u>です。</p> |
サンプル
ホームページの順位を上げるためにSEO対策が必要です。
まとめ
ということで今回はhtml / cssで下線を表現する方法をご紹介しましたが、こういった表現をうまく活用し、コンテンツ内の重要なポイントに目が行くようなわかりやすいサイトにしましょう。
コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。
よくある質問
Q.HTML/CSSで下線を引くにはどうすればいいですか？
A.CSSのtext-decoration: underline;を使うのが基本です。HTMLのuタグでも下線は引けますが、装飾目的ならCSSでの指定が推奨されます。
Q.下線の色や太さを変えることはできますか？
A.できます。text-decoration-colorで色、text-decoration-thicknessで太さを指定できます。点線(dotted)や波線(wavy)、二重線(double)への変更も可能です。
Q.リンクの下線を消すにはどうすればいいですか？
A.CSSでtext-decoration: none;を指定します。ただしリンクの下線はクリックできる目印でもあるため、消す場合はユーザーがリンクと認識できる別のデザイン配慮が必要です。
この記事の監修者
南保 生明 なんぽ たかあき
株式会社ディーボ SEO事業部 営業統括マネージャー。2006年入社、WEBマーケティング全般の提案・コンサルティングに従事。コンテンツマーケティングツール「キーワードファインダー」を累計7,000ユーザー以上に成長させ、SEOセミナー講師も務める。
タグの実装、抜け漏れなくできていますか？
タグの実装、抜け漏れなくできていますか？
個別の対策を積み上げても、抜け漏れがあると効果は半減します。現場で使えるSEOチェックリストを無料配布中です。
- « 前の記事
HTMLアンカーリンク（a hrefタグ）とは～使い方と別ページ（target blank）について - 次の記事 »
