VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

text-underline-offsetの役割と主な指定値を解説。下線が文字から離れたり近付いたりします。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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