【CSS】文字に下線(アンダーライン)を引く方法!色や太さの変更方法も解説

2022.11.21
CSSを使って文字に下線(アンダーライン)を引く方法!

「CSSを使ってHTML文章にアンダーラインを引く方法について知りたい」
「CSSで作成したアンダーラインのデザインを変更する方法について知りたい」

上記のような疑問を抱えている方に向けて、この記事では、CSSを使って文字に下線(アンダーライン)を引く方法と、色や太さなどのデザインを変更する方法について解説していきます。

  • text-decorationでアンダーラインを引く方法
  • border-bottomでアンダーラインを引く方法
  • backgroundでアンダーラインを引く方法

以上の項目に沿って説明します。

この記事を読むことで、CSSプロパティを使ってアンダーラインを引く方法について理解でき、自分好みのデザインに変更できるようになるので、ぜひチェックしてみてくださいね!

CSSのtext-decorationプロパティにunderlineを指定する

HTMLに記述したテキストにアンダーラインを引くには、CSSのtext-decorationプロパティにunderlineを指定するとできます。text-decorationは、指定したテキストにアンダーラインを引くことができるプロパティです。

サンプルコード

      <body>
        <style>
          .test {
          text-decoration:underline;
          }
        </style>
     <p class="test">HTMLで作成した文章にアンダーラインを付ける</p>  
     </body>

実行結果

text-decorationプロパティを使って指定したテキストにアンダーラインを引いた画像

テキストにアンダーラインを引くと、文章中の重要な場面を主張して読者が見逃すことを防ぐ効果があるので要所で利用するとよいでしょう。

また、アンダーラインの色を変更するには、下記コードのようにtext-decoration-colorプロパティに任意の色を指定することで変更できます。

        <style>
          .test {
            text-decoration:underline;
            text-decoration-color: red;
          }
        </style>
注意点
text-decorationプロパティは、アンダーラインの位置や太さの変更ができない点に注意しましょう。

text-decorationを使ってaタグのアンダーラインを消す方法

HTML要素のほとんどは、初期値でアンダーラインが引かれていないのですが、aタグで表示したテキストはデフォルトでアンダーラインが表示されます。

aタグのアンダーラインは、text-decoration:none;を使って消すことができます。

サンプルコード

      <body>
        <style>
          .test a{
            text-decoration: none;
          }
        </style>
        <div class="test">
           <a href="#">HTMLで作成した文章にアンダーラインを付ける</a>  
        </div>
     </body>

aタグのアンダーラインを消すときは、aタグに直接text-decoration: none;を指定する必要があります。親要素に指定しても消えないので注意しましょう。

CSSのborder-bottomプロパティを使ってアンダーラインを引く

border-bottomは、HTML要素の下部にあるpadding領域とmargin領域の間の線を表示できるプロパティです。そのため、padding-bottomやmargin-bottomというプロパティを使ってアンダーラインと文字の間を調節できます。

また、border-bottomはテキストではなく指定したHTML要素のアンダーラインを表示するため、ブロック要素だと画面全体にラインが引かれます。

border-bottomプロパティで指定したHTML要素のアンダーラインが表示されている画像

文字の下部のみにアンダーラインを引くには、HTML要素をインライン要素かインラインブロック要素にしたり、widthプロパティで要素のサイズを調節するとよいでしょう。

サンプルコード

      <body>
        <style>
          .test {
          border-bottom:1px solid;
          width: 350px;
          }
        </style>
     <p class="test">HTMLで作成した文章にアンダーラインを付ける</p>  
     </body>

border-bottomプロパティの値は、第一引数に線の太さを入力し、第二引数に線の種類、第三引数に線の色を指定します。

実行結果

HTMLで作成した文章にアンダーラインをつけている画像

border-bottomでアンダーラインの位置を変更する方法

border-bottomプロパティで作成したアンダーラインは、padding-bottomプロパティを使って調節できます。

指定したHTML要素のpadding領域とmargin領域の間にアンダーラインがあるので、paddingのサイズを変化させることでアンダーラインが移動するのです。

CSSのサンプルコード

          .test {
          border-bottom:1px solid;
          width: 350px;
          padding-bottom: 30px;
          }

backgroundプロパティでマーカー風のアンダーラインを引く

backgroundは、背景に色を加えたり画像を挿入するときに使われるプロパティですが、linear-gradientという値を利用することでアンダーラインを表示することも可能です。

background: linear-gradient(green, yellow);

linear-gradientは、複数の色を背景色にできる値です。上記コードでは指定したHTML要素の上部が緑色で下部が黄色の背景になります。

この特徴を利用し、指定した色の上部を透明にして下部色の割合を減らすことでマーカー風のアンダーラインを引くことができます。

       <body>
        <style>
          .test {
            background: linear-gradient(transparent 60%, yellow 30%);
            width: 350px;
          }
        </style>
     <p class="test">HTMLで作成した文章にアンダーラインを付ける</p>  
     </body>

linear-gradientの第一引数に透明を表すtransparentを指定し、透明の範囲を60%に設定しています。そして、第二引数のyellowが要素の下部に30%の範囲で表示されるというコードです。

実行結果

linear-gradientの第一引数に透明を表すtransparentを指定して黄色いアンダーラインを付けている画像

この記事でも利用しているマーカー風のアンダーラインが完成しました。

透明部分とマーカー部分の割合を変えることで、アンダーラインの太さも変更できるので、自分好みの割合に調節して利用してみてくださいね。

用途別にCSSプロパティを使い分けてアンダーラインを引こう

今回はCSSを使って文字に下線(アンダーライン)を引く方法と、色や太さなどのデザインを変更方法について解説しましたが、いかがでしたでしょうか?

各プロパティの特徴を再度振り返っていきましょう。

プロパティ名特徴色の指定線の太さ位置の変更
text-decorationunderlineという値を指定することでアンダーラインを引ける××
border-bottompaddingとmarginの間にアンダーラインを引ける
backgroundマーカー風のアンダーラインを引ける×

上記特徴を見ると、各CSSプロパティの中でborder-bottomプロパティが一番デザイン変更に適していることがわかります。

ほかにも、特徴的なアンダーラインを引きたいときはbackgroundを使い、aタグのアンダーラインを消すにはtext-decorationを使うなど、用途に合わせて使い分けるとよいでしょう。

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5