【CSS】文字に下線(アンダーライン)を引く方法！色や太さの変更方法も解説
「CSSを使ってHTML文章にアンダーラインを引く方法について知りたい」
「CSSで作成したアンダーラインのデザインを変更する方法について知りたい」
上記のような疑問を抱えている方に向けて、この記事では、CSSを使って文字に下線(アンダーライン)を引く方法と、色や太さなどのデザインを変更する方法について解説していきます。
- text-decorationでアンダーラインを引く方法
- border-bottomでアンダーラインを引く方法
- backgroundでアンダーラインを引く方法
以上の項目に沿って説明します。
この記事を読むことで、CSSプロパティを使ってアンダーラインを引く方法について理解でき、自分好みのデザインに変更できるようになるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSのtext-decorationプロパティにunderlineを指定する
HTMLに記述したテキストにアンダーラインを引くには、CSSのtext-decorationプロパティにunderlineを指定するとできます。text-decorationは、指定したテキストにアンダーラインを引くことができるプロパティです。
サンプルコード
<head>
<style>
.test {
text-decoration:underline;
}
</style>
</head>
<body>
<p class="test">HTMLで作成した文章にアンダーラインを付ける</p>
</body>実行結果
テキストにアンダーラインを引くと、文章中の重要な場面を主張して読者が見逃すことを防ぐ効果があるので要所で利用するとよいでしょう。
また、アンダーラインの色を変更するには、下記コードのようにtext-decoration-colorプロパティに任意の色を指定することで変更できます。
<style>
.test {
text-decoration:underline;
text-decoration-color: red;
}
</style>text-decorationを使ってaタグのアンダーラインを消す方法
HTML要素のほとんどは、初期値でアンダーラインが引かれていないのですが、aタグで表示したテキストはデフォルトでアンダーラインが表示されます。
aタグのアンダーラインは、text-decoration:none;を使って消すことができます。
サンプルコード
<head>
<style>
.test a{
text-decoration: none;
}
</style>
</head>
<body>
<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要素のアンダーラインを表示するため、ブロック要素だと画面全体にラインが引かれます。
文字の下部のみにアンダーラインを引くには、HTML要素をインライン要素かインラインブロック要素にしたり、widthプロパティで要素のサイズを調節するとよいでしょう。
サンプルコード
<head>
<style>
.test {
border-bottom: 1px solid #000;
display: inline-block;
}
</style>
</head>
<body>
<p class="test">HTMLで作成した文章にアンダーラインを付ける</p>
</body>border-bottomプロパティの値は、第一引数に線の太さを入力し、第二引数に線の種類、第三引数に線の色を指定します。
実行結果
border-bottomでアンダーラインの位置を変更する方法
border-bottomプロパティで作成したアンダーラインは、padding-bottomプロパティを使って調節できます。
指定したHTML要素のpadding領域とmargin領域の間にアンダーラインがあるので、paddingのサイズを変化させることでアンダーラインが移動します。
CSSのサンプルコード
.test {
border-bottom: 1px solid #000;
display: inline-block;
padding-bottom: 30px;
}「なんか今の仕事合わないな・・・」
「IT業界に転職してみたいなぁ・・・」
という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？
「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！
WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）
しかも今なら受講料の最大70%が給付金として支給されます。
DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です
backgroundプロパティでマーカー風のアンダーラインを引く
backgroundは、背景に色を加えたり画像を挿入するときに使われるプロパティですが、linear-gradientという値を利用することでアンダーラインを表示することも可能です。
background: linear-gradient(green, yellow);linear-gradientは、複数の色を背景色にできる値です。上記コードでは指定したHTML要素の上部が緑色で下部が黄色の背景になります。
この特徴を利用し、指定した色の上部を透明にして下部色の割合を減らすことでマーカー風のアンダーラインを引くことができます。
<head>
<style>
.test {
background: linear-gradient(transparent 60%, yellow 30%);
display: inline-block;
}
</style>
</head>
<body>
<p class="test">HTMLで作成した文章にアンダーラインを付ける</p>
</body>linear-gradientの第一引数に透明を表すtransparentを指定し、透明の範囲を60%に設定しています。そして、第二引数のyellowが要素の下部に30%の範囲で表示されるというコードです。
実行結果
この記事でも利用しているマーカー風のアンダーラインが完成しました。
透明部分とマーカー部分の割合を変えることで、アンダーラインの太さも変更できるので、自分好みの割合に調節して利用してみてくださいね。
用途別にCSSプロパティを使い分けてアンダーラインを引こう
今回はCSSを使って文字に下線(アンダーライン)を引く方法と、色や太さなどのデザインを変更する方法について解説しましたが、いかがでしたでしょうか？
各プロパティの特徴を再度振り返っていきましょう。
| プロパティ名 | 特徴 | 色の指定 | 線の太さ | 位置の変更 |
| text-decoration | underlineという値を指定することでアンダーラインを引ける | ○ | × | × |
| border-bottom | paddingとmarginの間にアンダーラインを引ける | ○ | ○ | ○ |
| background | マーカー風のアンダーラインを引ける | ○ | ○ | × |
上記特徴を見ると、各CSSプロパティの中でborder-bottomプロパティが一番デザイン変更に適していることがわかります。
ほかにも、特徴的なアンダーラインを引きたいときはbackgroundを使い、aタグのアンダーラインを消すにはtext-decorationを使うなど、用途に合わせて使い分けるとよいでしょう。
ぜひ参考にしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
