【コピペOK!】cssでアンダーラインを引く方法を解説

【コピペOK!】cssでアンダーラインを引く方法を解説

こんにちは、コアラのマーチにどハマり中のしゅんです。

さて、本題に入ります。

「html・cssを学び始めて、文中にアンダーラインを引く方法を知りたい」

「cssで装飾のレパートリーを増やしたい」

このように感じている方に向けて、今回は、

cssでアンダーラインを引く方法

を解説していきたいと思います。

ぜひ最後までご覧いただいて、ご自身のポートフォリオやブログ作りに生かしてみてください。

cssでアンダーラインを引く基本的な方法

はじめに、htmlとcssで作成されたページで文中にアンダーラインを引くためには、基本的に以下の2つの方法があります。

  • ・htmlタグ、もしくはクラスを付けて、cssで指定する方法
  • ・文中の一部分だけ指定したい場合は、<span>タグを使用する
  • ・htmlで<u>タグで囲む方法

それぞれの方法を解説します。

htmlタグ、もしくは「class名」を付けて、cssで指定して装飾する

<h2>や<p>タグなど、htmlタグのアンダーラインを引きたい箇所、もしくはhtmlタグに「class名」を付与し、cssで装飾を行っていきます。これが基本的な方法になるでしょう。

文中の一部分だけ指定いたい場合は、<span>タグを使用する

<p>や<h2>といったhtmlタグを指定して装飾した場合は、一文全てにアンダーラインが引かれてしまいます。

文中の一部分だけにアンダーラインを引きたいといった場合には、以下のように<span>タグを使用し、「class名」を付与して指定することで可能になります。

HTML5では、<u>タグは非推奨になっている

html内でアンダーラインを引きたい箇所を<u>タグで囲むことでアンダーラインを引くことは可能ですが、HTML5では非推奨タグとなっていますので、使用することは避けましょう。

【初級編】cssでアンダーラインを引くプロパティ

ここからは、実際にcssでどのような指定の仕方をすれば良いのかを解説していきます。

まずは初級編として、以下の2つをご紹介します。

  • ・text-decoration
  • ・border-bottom

それでは早速、それぞれの使い方を見ていきましょう。

text-decorationプロパティ

text-decorationプロパティでは、以下のような値を設定することが可能です。

  • ・none(線無し)
  • ・underline(下線)
  • ・overline(上線)
  • ・line-through(取り消し線)

とすることで、アンダーラインだけでなく、「線無し」「下線」「上線」「取り消し線」などを表現することができます。実際にコードとサンプルを見てみましょう。

また、<a>タグで表示されるアンダーラインもtext-decorationプロパティで制御することができます。

border-bottomプロパティ

border-bottomプロパティでは、「線の太さ」「線の種類」「線の色」なども自由に設定することが可能です。

このように記述することで、一括で設定をすることができます。また線の種類については、以下の9種類があります。

  • ・none(線無し)
  • ・dotted(点線)
  • ・dashed(破線)
  • ・solid(実線)
  • ・double(二重線)
  • ・groove(立体線・窪み)
  • ・ridge(立体線・隆起)
  • ・inset(囲み立体線・窪み)
  • ・outset(囲み立体線・隆起)

実際にそれぞれどのようになるか、コードと一緒に見ていきましょう。

border-bottomの結果

サンプルでは、これ以上線を太くしてしまうと見づらくなってしまいますので5pxに留めていますが、5px以上に太くすることも可能です。

また、色についてはサンプルのようにカラーコードでの設定や、「red」「blue」といった色名での指定もできますので、好みの色に変更してみましょう。

【応用編】backgroundプロパティを使用してアレンジ

ここからは応用編として、backgroundプロパティを使用したアンダーラインの引き方をご紹介します。

backgrundプロパティを使用することで、蛍光マーカーのようなアンダーラインや、グラデーションがかかったアンダーラインを引くことが可能になりますので、色々と試してみましょう。

蛍光マーカーのようなアンダーライン

このように指定することで、蛍光マーカーを表現することができます。背景色を付けて、それを細くしていくようなイメージですね。実際にコードとサンプルを見ていきましょう。

backgroundの結果

こちらもカラーコードを変更することで、色んな色に変更することが可能です。

グラデーションがかかったアンダーライン

先ほどの蛍光マーカーと似た指定をすることで、グラデーションがかかったアンダーラインを引くことも可能です。

グラデーションがかかったアンダーラインを表現するためには、以下の手順が必要になります。

  1. backgroundプロパティで、グラデーションがかかった背景色を付ける
  2. background-sizeプロパティ、background-repeatプロパティ、background-positionプロパティを追加する

まずは背景にグラデーションをかけるために、以下のコードを指定します。。

backgroundのグラデーションの結果

次に、background-sizeで横幅と縦幅を指定し、background-repeatで繰り返さないようにします。そして、そのままですと上線になってしまうので、background-positionで下線にします。

グラデーションがかかったアンダーラインの結果

以上でグラデーションがかかったアンダーラインの完成です。

今回は、左から右へのグラデーションをご紹介しましたが、角度や色を変更することも可能ですので、ぜひ色んなグラデーションを試してみてください。

まとめ

いかがでしたか?

今回は「cssでアンダーラインを引く方法」を解説してきました。

色んなアンダーラインを試して、ご自身のポートフォリオやブログの雰囲気に合ったアンダーラインを見つけましょう。

ぜひ参考にしてみてください。