CSSのtext-decorationでアンダーラインなどの線で文字を装飾する

生徒

CSSで文字に線を引いて装飾したいです

先生

CSSで文字に下線などの線を引く方法を説明します

文字に線を付けて装飾する

 この記事でわかること

• HTMLで同じ並びの特定の要素だけにスタイルを指定する方法
• CSSの:nth-childと:nth-last-childのいろいろな使い方

text-decorationで文字を装飾する

MDN Web Docs

text-decoration – CSS: カスケーディングスタイルシート | MDN text-decoration は CSS の一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは text-decoration-line、text-decoration-color、text-decoration-style…

text-decorationプロパティは以下の4つのプロパティの一括指定プロパティです。

• text-decoration-line線の種類を指定する
• text-decoration-color線の色を指定する
• text-decoration-style 線の形式を指定する
• text-decoration-thickness線の太さを指定する

これらのプロパティは個別に単独で指定することもできます。

text-decoration-lineで線を引く位置を指定する

text-decorationプロパティで文字の周りに引く線の位置を指定します。

underlineは下線を引く

underlineを指定すると要素内の各文字に下線を引きます。

overlineは上線を引く

overlineは文字の上に線を引きます。

line-throughは文字の中央に横線を引く

line-throughを指定すると、取り消し線のように文字の水平方向の中央に1本線が引かれます。

複数の線を指定できる

text-decoration-lineに複数の値を指定すると、複数の場所に線を引くことができます。

text-decoration-styleプロパティで線の種類を指定する

text-decoration-styleプロパティは、装飾する線の種類を以下の値から指定できます。

• solid1本線の直線
• double2本線の直線
• dotted1本線の点線
• wavy1本線の波線

text-decoration-styleだけ指定してもtext-decoration-lineプロパティで線の位置を指定しないと線は表示されません。

solidは1本線の直線

solidを指定すると1本線の直線を引きます。

doubleは2本線の直線を引く

doubleを指定すると2本線の直線を引きます。

dotted点線を引く

dottedを指定すると点線の直線を引きます。

wavyは波線を引く

wavyを指定すると波線の直線を引きます。

text-decoration-colorは線の色を指定する

text-decoration-colorで文字の周囲に引いた線の色を指定できます。

p {
  // 文字の周りに引く線の色を指定
  text-decoration-color: red;
  // 線を引く場所を指定
  text-decoration-line: underline;
}

CSSで色を指定する方法は別の記事で詳しく説明しています。

あわせて読みたい

【RGB】CSSで色を指定する書き方について【HSL】 CSSで色を指定するにはどんな書き方がありますか？ CSSで色を指定する書き方を説明します  この記事でわかること CSSで色を指定する書き方CSSのrgb()関数やhsl()関数の…

text-decoration-thicknessは線の太さを指定する

text-decoration-thicknessプロパティで文字の周りに引く線の太さを指定できます。

p {
  // 文字の周りに引く線の太さを指定
  text-decoration-thickness: 3px;
  // 線を引く場所を指定
  text-decoration-line: underline;
}

線の太さを指定することで蛍光マーカーのような線を引くこともできます。