【CSS】簡単な下線(アンダーライン)の引き方【HTML】

最終更新日: 公開日: 2021年10月
下線

本文中のテキストや見出しに下線を付けたい時があると思います。アンダーラインは text-decoration や border を利用してとても簡単に実装できますので、1本の下線をはじめとして、二重線、点線、破線など用途別に応じて解説します。

下線を引く

まず、下線のサンプルを用意しました。

css を使った下線の引き方

サンプルのコードは以下の通りです。

サンプルコード: HTML

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./underline.css">
  </head>
  <body>
    <p class="underline">css を使った下線の引き方</p>
  </body>
</html>

サンプルコード: CSS

.underline {
  text-decoration: underline;
}

text-decoration を使った下線を引き方

下線の位置を変えたい

文字と下線の間隔を調整します。余白を調整することで文字の読みやすさが変わってきます。デフォルトでは文字と下線がくっついているので、下線の位置を下にずらします。

css を使った下線の引き方

.underline {
  text-decoration: underline;
  text-underline-offset: 5px;
}

※text-underline-offset は2021年9月時点で InternetExplorer などの一部ブラウザでは未対応となっていますので使用時は注意が必要です。

下線の太さを変えたい

css を使った下線の引き方

.underline {
  text-decoration: underline 5px;
}

下線の種類を変えたい

波線

css を使った下線の引き方

.underline {
  text-decoration: underline wavy;
}

破線

css を使った下線の引き方

.underline {
  text-decoration: underline dotted;
}

下線の色を変えたい

css を使った下線の引き方

.underline {
  text-decoration: underline red;
}

カラーコードでも可。

.underline {
  text-decoration: underline #ff0000; /* red のカラーコード*/
}

border を使った下線の引き方

下線の長さを調整したい

アンダーラインの引き方は text-decoration だけではありません。text-decoration では文字長よりも下線を長く(短く)することはできません。長さを調整したい時は border を利用します。

css を使った下線の引き方

.underline {
  border-bottom: solid 1px;
  width: 300px;
  text-align: center;
}

padding-bottom を使用すれば border も text-decoration 同様にアンダーラインの位置を変更することができます。

css を使った下線の引き方

.underline {
  border-bottom: solid 1px;
  width: 300px;
  text-align: center;
  padding-bottom: 20px;
}

以上でアンダーラインの書き方の説明を終わります。
アンダーラインは簡単に実装できるということがお分かりいただけましたでしょうか。アンダーラインを引きたくなったらこちらの記事を思いだしていただければと思います。

 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
contact
Pagetop