HTML/CSSで下線(アンダーライン)を引くには？1分でわかるテキスト際立たせテクニック！
HTML／CSSで下線（アンダーライン）を引いて、重要なテキストを際立たせれば見やすいホームページになります。
では今回は、HTML（HTML5）と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対策で上位化を目指すことが重要です。
SEO対策しても検索順位が上がらない…なぜ？
SEO対策しても検索順位が上がらない…なぜ？
検索順位が上がらない理由は、SEO対策の質が低いからです。
例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やす、内部リンクの最適化など疎かにします。
この場合、SEO対策の質が下がります。
そうなれば、ページやサイト自体の品質が上がらないので、Googleに評価されづらくなります。
結果、検索順位が上がらないというわけです。
こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策をご案内します（無料）。
