【text-decoration】下線を装飾するプロパティの使い方とそれぞれの値【CSS】

きなこ

リンクを作った時の下線って消せないの？

こばゆた

そういう時はtext-decorationプロパティを使うんだよ

1.text-decorationの使い方とそれぞれの値

text-decorationプロパティを使い、値を入れることでテキストの線の装飾ができます。

セレクター{
  text-decoration: 値;
}

1-1.none

通常aタグでリンクを作ると以下のように下線が入ります。

その下線をレイアウトの問題などで消したい場合は値を”none“とします。

a{
  text-decoration: none;
}

ちゃんと消えていますね。

こばゆた

これは一番使います！

1-2.line-through

文章に対して打ち消し線を入れたい時は値に”line-through“を入れます。

p{
  text-decoration: line-through;
}

ブログなどの装飾などにも使えますね！

1-3.underline

下線を引くには値に”underline“を指定します。

p{
  text-decoration: underline;
}

さらに特定の値を指定することでこの線の種類を変えることもできます。

ちなみに”underline”の初期値は”solid”になります。

また続けて色を指定する事で下線に色をつける事ができます。

p{
  text-decoration: underline red;
}

最終的に下線をありにし、種類を指定し色をまとめて指定することができます。

p{
  text-decoration: underline red　double;
}

似た様なプロパティにborder-bottomもありますが違いが少しあります。

border-bottomについてはコチラ。

境界線を作るborderプロパティの詳しい使い方【CSS】

borderは文字通り境界線を意味し、それを境にmargin、paddingといった余白が決まります。今回はそのborderプロパティの詳しい使い方を解説しています。

kbyt-programming.com

2021年12月02日

2.まとめ

セレクター{
  text-decoration: 値;
}

セレクター{
  text-decoration: underline 色 種類;
}