VIDEO LESSON

CSSのtext-decoration-colorの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:18動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、テキストデコレーションカラーです。
0:06これは、下線などの装飾線の色だけを決めるプロパティです。
0:10文字の色はそのままに、線の色だけを独立して変えられるのが大きな特徴です。
0:15たとえば、黒い文字に緑色の下線を引くといった組み合わせができます。
0:20今回は、茶色と緑色を比べながら、値の書き方や初期値、効かないときの確認方法まで、
0:24初心者向けに分かりやすく解説します。
0:28小さな色の違いですが、リンクの見分けやすさや文章の印象を大きく左右するので、
0:32仕組みから丁寧に見ていきましょう。
0:36まず基本の書き方です。
0:38セレクターのあとにプロパティ名、テキストデコレーションカラーを書き、コロンを挟んで色の値を入れ、
0:43最後にセミコロンを付けます。
0:47スライドの例では、茶色に近い色を指定しています。
0:51あわせてテキストデコレーションで下線そのものを付けておくことが大切で、線がない要素では色を変えても見た目は変わりません。
1:00クラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることを確認しながら、
1:05まずはこの形を書いてみましょう。
1:10色は後から一か所だけ変えれば、全体の印象を簡単に切り替えられます。
1:15値の読み方を見ていきます。
1:17テキストデコレーションカラーに指定するのは、装飾線に使う色です。
1:23文字のカラーと同じように、色の名前、シャープで始まるカラーコード、アールジービーやエイチエスエルといった関数でも指定できます。
1:33記事の実例では、茶色っぽい色と、深い緑色の二つを比べています。
1:38どちらの場合も、変わるのは下線の色だけで、文字の色は元のまま保たれます。
1:44まずは分かりやすい色名やカラーコードから始めて、背景や文字色とのコントラストを確認しながら選ぶと、
1:50読みやすい組み合わせを見つけやすくなります。
1:56色を指定しない場合の動きも押さえましょう。
1:59テキストデコレーションカラーの初期値は、カレントカラーです。
2:04これは、その要素の文字色、つまりカラープロパティの値と同じ色を使うという意味です。
2:10ですから、普段は下線が文字と同じ色で引かれ、特に違和感なく見えます。
2:15このプロパティで別の色を上書きしたときに初めて、文字と線で色が分かれます。
2:21逆に、カレントカラーを明示すれば、文字色を変えたときに線の色も一緒に追随させることができます。
2:28初期値の意味が分かると、指定しなかったときの見え方も予測しやすくなります。
2:34基本情報を確認します。
2:36テキストデコレーションカラーの初期値はカレントカラーで、通常は継承しません。
2:41親要素に指定しても、子要素へそのまま引き継がれるわけではない点に注意してください。
2:47関連する値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値であるカレントカラーに戻す指定です。
2:55アンセットは、継承しないプロパティではイニシャルとして扱われます。
3:00また、ブラウザーの既定スタイルが要素に適用されている場合は、その結果が優先されることもあります。
3:07最終的な値は開発者ツールのコンピューテッドで確認しましょう。
3:11ここからは記事の実例です。
3:13エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
3:22デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、
3:27折り返して複数行になる長さにしてあります。
3:32下線の色は文字のすぐ下で比べるため、文章がある程度長いほうが違いが分かりやすくなります。
3:39頭の部分では、スタイルシートをリンクで読み込んでください。
3:43比べるのは線の色だけなので、文章や構造などの土台は変えずに固定します。
3:49この土台があることで、次のスライドで変える一行の効果だけを純粋に観察できます。
3:56土台のシーエスエスです。
3:57ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景、そして下線を付けます。
4:05ここで最後の行にテキストデコレーションカラーで茶色を指定すると、文字の色はそのままに、
4:09下線だけが茶色で引かれます。
4:14次に最後の行だけを深い緑色へ換えると、下線だけが緑へ変わります。
4:19変わるのはこの一行だけです。
4:21ファイルを保存してブラウザーを再読み込みし、線の色と文字色が別々に保たれていることに注目して比べてください。
4:29色だけを差し替える実験は、原因と結果の関係がとても追いやすくなります。
4:35活用場面を整理します。
4:37代表的なのは、リンクの下線です。
4:40文字は本文と同じ色にしておき、下線だけをブランドカラーや目立つ色にすると、
4:45読みやすさを保ちながらリンクらしさを伝えられます。
4:50強調したい言葉に下線を引くときも、文字色を変えずに線の色だけでアクセントを付けられます。
4:58線の太さを変えたいときはテキストデコレーションシックネスを、線の位置を調整したいときはテキストアンダーラインオフセットを組み合わせます。
5:09色、太さ、位置を分けて考えると、下線まわりの調整が整理しやすくなり、デザインの意図も伝えやすくなります。
5:18効かないときと間違えやすい点を確認します。
5:21一番の注意点は、テキストデコレーションラインなどで線が作られていなければ、
5:25色だけを指定しても変化が見えないことです。
5:30まず下線などの線があるかを確かめてください。
5:33また、線の色が背景に近すぎると、線があるのに見えにくくなります。
5:38色のコントラストにも注意しましょう。
5:41そのうえで開発者ツールを使い、ネットワーク、エレメンツ、スタイルズ、コンピューテッドの順に調べ、
5:48最後に三百二十ピクセル程度の狭い画面幅や文字拡大でも内容を利用できるかを確認してください。
5:55順番に調べると原因を切り分けやすくなります。
5:58ブラウザー互換性を確認します。
6:00記事が参照するエムディーエヌの記録では、クロームが五十七以降、エッジが七十九以降、
6:06ファイアフォックスが三十六以降、サファリが十二点一以降で対応しています。
6:12アンドロイド版クロームは五十七以降、アイオーエス版サファリは十二点二以降です。
6:18かなり前のブラウザーから使えるため、今回比べた茶色や緑色といった基本の色指定は、
6:23安心して使えると考えてよいでしょう。
6:28ただし、プロパティが使えることと、すべての値や構文が使えることは別なので、
6:33新しい色の書き方を使う場合は値ごとの対応も確認してください。
6:38最後に練習とまとめです。
6:40まとめます。
6:41テキストデコレーションカラーは、装飾線の色を調整する設定で、初期値はカレントカラー、
6:44継承はしませんでした。
6:48茶色を指定すれば下線だけが茶色に、緑を指定すれば下線だけが緑になり、文字色は保たれる点が大切でした。
6:55線がないと色が見えない点も確認しました。
6:58練習として、まず二つの色の違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
7:05お疲れさまでした。
7:07関連するテキストデコレーションやテキストデコレーションシックネスも一緒に学ぶと、
7:11下線まわりの理解が深まります。
7:15一つずつ値を変えて比べる練習を重ねましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

text-decoration-colorの役割と主な指定値を解説。下線だけが茶色から緑へ変わり、文字色は維持されます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのtext-decoration-colorの使い方：指定値・実例・効かない原因とブラウザー互換性 →