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

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

さて、本題に入ります。

「html・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（囲み立体線・隆起）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

いかがでしたか？

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

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

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