パソコンと花

text-dcorationで文字に線や色を加える

文字の下や上に線を引いたりその線の色を変えたりします、線の種類も色々指定できます。

まず、htmlに<div>タグで囲んだ中に<p>段落を作って文字を入れます、これがおおもとの例題のブロックになります。

text-decorationは線の装飾に関する複数のプロパティ(line、color、style)を一度に設定するのにはこれを使うのが便利です。

文字に打消し線を入れる line-through

このように文字の中心に線を引いて訂正する打消し線を入れることができます、text-decorationにline-throughを使います。

CSSにtext-decoration: line-through; を記述します。

複数のプロパティが設定できるので色も設定しています、半角スペースを開けてred(赤)を設定しています。

文字の下に線を引く underline

文字の下に線を引きます、リンクの線とは違いますので間違わないように。

文字の上に波線を引く wavy overline

波線を引くのは「wavy」で文字の上側に線を引くのは「overline」を使います、複数を記述する場合は半角スペースを開けて記述します。

複数のプロパティを設定できるので波線、上に引く、色を設定します。

破線を文字の上下に引く dashed underline overline

破線は「dashed」文字の下に線を引くのは「underline」文字の上に線を引くのは「overline」を使います。

枠の線の色は指定していないのですが「currentColor」で、このブロックで使用している色(#0000ff)を引き継いでいます。

リンクの下線を消す none

htmlでaタグにリンクを指定すると文字の下に線が現れます、この線を消すのが「none」になります。

CSSの記述で「a」タグに対してtext-decoration: none; を記述してやると文字の下の線が消えます。

このように下のラインは消えています。

ここで使ったものとその他の線の種類

  • line-through 打消し線
  • solid 実線 一本の線になります。
  • double 二重線
  • dotted 点線 破線より小さい点になります
  • wavy 波線
  • underline 下に線を引く
  • overline 上に線を引く
  • none 線を消す

他にもある線や色をつける方法

緑の森

「style」これでも文字に線をつけることができます、ただし線の種類のみになります。

text-decoration-style: で線をつける

style属性で線の種類を指定します。 

text-decoration-style: solid; 実線単線
double; 二重線
dotted; 点線
doshed; 破線
wavy; 波線
これらの線を指定できます。

text-decoration-color: で色を指定する

color属性は色を指定できます。

指定の方法は色の英語表記、rgb値の16進数で表示するやり方とrgbを0~255の数値で表示するやり方があります。

text-decoration-color: black:
text-decoration-color: #000000; (#000でも表せる)
text-decoration-color: rgb(0,0,0);

このようにして色を指定してやります、他の色も下のようになっています。

色の種類とコード表

text-decoration-line: で何処に線を引く

text-decoration-lineは線を何処に引くのかを指定します。

その種類には
underline 下に線を引く
overline 上に線を引く
line-through 打消し線を引く
underline overline 上下に線を引く
underline line-through 下線と打消し線を引く

以上のような感じで線の場所を指定できます。

style、color、lineは一つ一つを設定する場合はいいのですが下のように複数の指定をしようとすると。

このような波線を赤色で指定してみます

htmlに下のように記述してCSSにstyle、color、lineを使ってそれぞれを指定します

なかなかメンドクサイものがあります。

style、color、lineなど複数の属性を指定するのであれば「text-decoration」を使って記述をすると簡単に出来ます、記事の冒頭で述べたように半角スペースを開けて記述していきます。

設定で色を変えてみました、記述の順番はどれからでも構いません。

CSS text-decorationを使い文字に装飾をする

このように複数のプロパティを設定するのであれば「text-decoration」を使用した方がいいでしょう。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事