text-decorationでテキストに飾りをつけてわかりやすく伝える

こんにちは。一番好きな和菓子は豆大福のサイトウです。

さて、今回はCSSのプロパティ「text-decoration」をご紹介します。

教科書の大切なポイントにマーカーで線を引いたことってありますよね。本を読むことが好きな方は、お気に入り部分に線をひくことがあるかもしれません。同じことが自作のサイトでもできるのです!

昔からうまく線をひけないんだよね・・・

 

大丈夫です。一度コツをつかんでしまえば意外と簡単にできますよ。

今回は、【text-decoration】の

・基本的な使い方とポイント
・応用的な使い方

について説明します。文章をわかりやすく伝えたい方やサイトのデザインを変えたい方は是非読んでみてくださいね。

【text-decoration】とは

【text-decoration】の読み方

「テキストデコレーション」と読みます。直訳すると文字装飾です。デコレーションというとお菓子のイメージが強いですが、本来は「装飾する・飾り付ける」という意味で広く使用されます。

【text-decoration】の説明

テキストの装飾を指定するプロパティです。装飾の種類には下線、上線、取り消し線、などがあります。また、色や線の種類も指定することができます。

【text-decoration】で利用できる値

【text-decoration】では以下の値を使うことができます。

説明
none

underline

overline

line-through

blink

text-decoration-line(どの部分に線をひくのか)の指定をする時に使用します。初期値はnoneです。
solid

double

dotted

dashed

wavy

text-decoration-style(どんな線をひくのか)の指定をする時に使用します。
カラーコード

カラーネーム

RGB

text-decoration-color (どんな色の線をひくのか)の指定をする時に使用します。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 非対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

【text-decoration】の基本的な使い方

【text-decoration】の使い方

CSSの基本的な書き方

  • セレクタ(どの部分の)
  • プロパティ(何を)
  • 値(どのようにするか)

は変わりません。以下では具体的にどのような値があるのかご紹介します。

1、どの部分に線を引くか

  • 下線:underline
  • 上線:overline
  • 取り消し線:line-through

See the Pen
wvWOeOw
by Fusae Saito (@mori238)
on CodePen.


取り消し線は、終了したイベントや数量限定商品が完売した時などに、サイトでよく使用されています。

2、線の種類

  • 実線:solid
  • 二重線:double
  • 点線:dotted
  • 破線:dashed
  • 波線:wavy

どの部分に線を引くのか指定するのを忘れないようにしましょう。

See the Pen
zYBbdqR
by Fusae Saito (@mori238)
on CodePen.


3、色も指定できる

red、blueなど通常通り色の指定を行えば、線の色を変えることができます。また、下記のようにすべて指定することも可能です。

See the Pen
jOrJwQb
by Fusae Saito (@mori238)
on CodePen.


下線と上線を両方指定することもできます。

See the Pen
rNLRwXz
by Fusae Saito (@mori238)
on CodePen.


組み合わせ次第で様々な装飾ができますね!

【キーワード】の応用的な使い方

線を引くだけではなく、線を消すことでデザインを変えることもできます。aタグを使用すると、下記のようにデフォルトで下線が表示されます。

See the Pen
OJXqjxM
by Fusae Saito (@mori238)
on CodePen.


下線が不要な時は、CSSに「text-decoration:none;」と入れることで線を消すことができます。

See the Pen
xxOBLpQ
by Fusae Saito (@mori238)
on CodePen.


使い方次第で様々なことができる「text-decoration」を是非覚えておきましょう。

まとめ

いかがでしたか。今回は、線を表示させたり消したりすることができる「text-decoration」をご紹介しました。イメージに合った線を使いこなして、自分らしいサイト制作を進めていきましょう。少しでも参考になればうれしいです。

参考文献:2019年 SBクリエイティブ株式会社|1冊ですべて身につくHTML&CSSとWebデザイン入門講座【著】Mana

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?