こんにちは。一番好きな和菓子は豆大福のサイトウです。
さて、今回は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】の使い方
|
1 2 3 |
h1 { text-decoration: underline; } |
CSSの基本的な書き方
- セレクタ（どの部分の）
- プロパティ（何を）
- 値（どのようにするか）
は変わりません。以下では具体的にどのような値があるのかご紹介します。
１、どの部分に線を引くか
- 下線：underline
- 上線：overline
- 取り消し線：line-through
See the Pen
wvWOeOw by Fusae Saito (@mori238)
on CodePen.
取り消し線は、終了したイベントや数量限定商品が完売した時などに、サイトでよく使用されています。
２、線の種類
- 実線：solid
- 二重線：double
- 点線：dotted
- 破線：dashed
- 波線：wavy
どの部分に線を引くのか指定するのを忘れないようにしましょう。
See the Pen
zYBbdqR by Fusae Saito (@mori238)
on CodePen.
３、色も指定できる
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
