VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

text-decoration-thicknessの役割と主な指定値を解説。下線が文字サイズに比例した太さから細い線へ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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