【CSS】簡単な下線の引き方【HTML】

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

本文中のテキストや見出しに下線を付けたい時があると思います。text-decoration や boder を利用してとても簡単に実装できますので、用途別に応じて解説します。

下線を引く

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

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 では文字長よりも下線を長く(短く)することはできません。長さを調整したい時は boder を利用します。

css を使った下線の引き方


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

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop