text-decorationとは？使い方をサンプルコードで解説 │ TechMania

1. text-decorationとは
2. text-decorationプロパティを構成する4つのプロパティ
3. その他の便利な装飾プロパティ
- - 3.4.1. text-decoration-skip-ink
  - 3.4.2. text-underline-offset
4. HTML/CSSの学習方法は？
- 4.1. HTML/CSS部門

text-decorationとは

CSSのtext-decorationプロパティは、テキストに線や色など、装飾に関する4つのCSSプロパティを一括で指定できるプロパティです。現在はショートハンドプロパティとして定義されています。

text-decorationプロパティを構成する4つのプロパティ

text-decorationプロパティを構成する4つのプロパティを以下に示します。

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness

text-decorationプロパティはこれら4つの個別指定のtext-decorationプロパティのうち、1つまたは複数の値を空白で区切って指定することで、一括で指定できるのです。

まずはそれぞれの個別指定プロパティについて解説します。

text-decoration-line

text-decoration-lineプロパティは使用する装飾の種類を設定するCSSプロパティです。

指定可能な値

none（初期値）	装飾なし
underline	下線
overline	上線
line-through	取り消し線

【HTML実行コード】

<p>ここに<span>テキスト</span>が入ります。</p>

【CSS実行コード】

span{
 text-decoration:line-through;
}

※text-decoration-lineプロパティでも可。

【実行結果】

また、線は複数指定することもできます。次のように半角スペースを空けて「underline overline」というように複数指定すればテキストの上下に線をつけられます。

【CSS実行コード】

span{
 text-decoration-line:underline overline;
}

【実行結果】

aタグの下線は「none」で非表示にできる

aタグではブラウザ側で予め「text-decoration:underline」が指定されているので、デフォルトで下線が付いています。非表示にする場合は、再度text-decorationプロパティを設定し、値を「none」に指定しましょう。

text-decoration-color

text-decoration-colorプロパティは装飾に使用する線の色を設定するCSSプロパティです。線の色の指定には文字色や背景色を指定するのと同様に「black」「red」のようなカラーネームや「#ff0000」のように16進数であらわ明日カラーコードを使用します。

カラーネームは、なじみのある英語表記で「red」や「black」、「white」などの色名です。直感的にイメージがつきやすく、シンプルな色を指定する場合に適しています。RGBで指定する場合は合計16,777,216通りの色を表現できるので、細かい色味を調整したい場合に適しています。

カラーコードは左から2桁ずつ赤、緑、青を意味し、色の強さを00～ffまでの16進数で表現します。00 に近いほど要素が弱く、ff に近いほど強くなります。たとえば、白は「#FFFFFF」、黒は「#000000」、青は「#00FF00」になります。

【HTML実行コード】

<p>ここに<span>テキスト</span>が入ります。</p>

【CSS実行コード】

span{
 text-decoration:underline red;
}

【実行結果】

text-decoration-style

text-decoration-styleプロパティは装飾に使用する線の種類を設定するCSSプロパティです。

指定可能な値

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

【HTML実行コード】

<p>ここに<span>テキスト</span>が入ります。</p>

【CSS実行コード】

span{
 text-decoration:underline wavy;
}

【実行結果】

text-decoration-thickness

text-decoration-thicknessプロパティは装飾に使要する線の太さを設定するCSSプロパティです。なお、値にはpxなどの絶対値を用いる方法と%やemなどのフォントサイズを基準とする相対値を用いる方法があります。

【HTML実行コード】

<p>ここに<span>テキスト</span>が入ります。</p>

【CSS実行コード】

span{
 text-decoration:underline wavy 3px;
}

【実行結果】

【まとめ】

複数のプロパティの値を同時に指定する場合は、値同士の間に半角スペースを空けることで実現できます。
値を指定する順番に指定はありません。
必ず4つのプロパティを指定する必要はありません。

あなたのご希望に沿った案件が必ず見つかります
【フリーランス向け】高収入・好待遇の案件をご紹介

≫まずは簡単60秒で無料お問い合わせから≪

その他の便利な装飾プロパティ

text-decoration-skip-ink

text-decoration-skip-inkプロパティは下線と文字の重なり方を決めるCSSプロパティです。デフォルト値は「auto」です。値に「none」を指定することで下線と文字が重なる部分でも下線が途切れなくなります。

【HTML実行コード】

<p>ここに<span>abcdefghijklmnopqrstuvwxyz</span>が入ります。</p>

【指定しない場合】

【実行コード】

span{
 text-decoration:underline;
}

【指定する場合】

【実行コード】

span{
 text-decoration:underline;
 text-decoration-skip-ink:none;
}

text-underline-offset

text-underline-offsetプロパティは線と文字列との距離を指定するCSSプロパティです。

【HTML実行コード】

<p>ここに<span>テキスト</span>が入ります。</p>

【CSS実行コード】

span{
 text-decoration:underline;
 text-underline-offset:10px;
}

【実行結果】

線と文字列の間に隙間ができました。

値にはemやrem、%などの単位も使用可能です。

HTML/CSSの学習方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。