今回はテキストに下線・上線・訂正線などの装飾する際に使用するCSSプロパティ、text-decorationプロパティの使い方について解説していきます。
この記事を読むと分かること
- text-decorationプロパティの概要について
- text-decorationプロパティで指定できる値について
- aタグにデフォルトで付いている下線を消す方法について
text-decoration：テキストに装飾を付けるCSSプロパティ
text-decorationプロパティは、テキストに装飾を付けることができるCSSプロパティです。
このプロパティは4つのCSSプロパティを同時に指定することができる一括指定プロパティで、text-decorationプロパティを構成する4つのプロパティは以下の通りになります。
■text-decorationプロパティを構成する4つのプロパティ
| プロパティ名 | 意味 |
|---|---|
| text-decoration-line | 表示する線の位置を指定できる。 |
| text-decoration-style | 表示する線の種類を指定できる。 |
| text-decoration-color | 表示する線の色を指定できる。 |
| text-decoration-thickness | 表示する線の太さを指定できる。 |
なお4つのプロパティの値を同時に指定する際は、値同士の間に半角スペースを空けて記述すればOKです。
|
1 |
<p>ここに<span class="red-underline">テキスト</span>が入ります。</p> |
|
1 2 3 |
.red-underline{ text-decoration: underline solid red 3px; } |
また値の指定する順番に特に決まりはなく、必ず4つのプロパティを指定しなければならない訳ではありません。
aタグに付いている下線は「none」を指定することで非表示にできる
aタグにデフォルトで付いているアンダーラインは、ブラウザ側から予め「text-decoration: underline」の指定がされている為付いています。
非表示にしてあげたい場合は、再度text-decorationを指定し、値を「none」としてあげればOKです。
|
1 2 3 |
.underline-none{ text-decoration: none; } |
aタグのアンダーラインを非表示にしたい場面は多々あるので、覚えておくと良いでしょう。
text-decorationで指定できる値
それではここからはtext-decorationプロパティで指定できる値を1つ1つ紹介していきます。
線の位置を指定する：text-decoration-line
まずは線の位置を指定できる値(text-decoration-lineの値)についてです。
線の位置を指定できる値には以下の3つの値があります。
■線の位置を指定できる値
- 下線：underline
- 上線：overline
- 取り消し線：line-through
|
1 |
<p>ここに<span class="sample">テキスト</span>が入ります。</p> |
|
1 2 3 |
.sample{ text-decoration: line-through; } |
また、線の位置は複数指定することも可能で、以下のように半角スペースを空けて「underline overline」と指定してあげることでテキストの上下に線を付けることもできます。
|
1 2 3 |
.sample { text-decoration: underline overline; } |
線の種類を指定する：text-decoration-style
次に線の種類を指定できる値(text-decoration-styleの値)についてです。
線の種類は以下の5つから選択できます。
■線の種類を指定できる値
- 実線：solid
- 二重線：double
- 点線：dotted
- 破線：dashed
- 波線：wavy
|
1 2 3 |
.sample { text-decoration: underline wavy; } |
線の色を指定する：text-decoration-color
線の色(text-decoration-color)を指定するには、文字色や背景色を指定する時と同じように「black」「white」のようなカラーネームや「#333333」といった16進数を使用します。
|
1 2 3 |
.sample { text-decoration: underline wavy red; } |
線の太さを指定する：text-decoration-thickness
線の太さ(text-decoration-thickness)を指定するには、pxなどの絶対値を使う方法と%やemといったフォントサイズを基準とした相対値を使う方法の2つがあります。
|
1 2 3 |
.sample { text-decoration: underline wavy red 3px; } |
まとめ
まとめです。今回はテキストに装飾を付けるCSS「text-decoration」の使い方について解説しました。
文章の中の大切な部分にアンダーラインを引いたり、aタグにデフォルトで付いている下線を消したりする際によく使うのでぜひ覚えておきましょう。
なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。
今回は以上になります。最後までご覧頂き、ありがとうございました。
合わせて読みたい記事
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
