VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、テキストデコレーションです。
0:07これは、文字に下線や取り消し線などの装飾線を付けるためのプロパティで、線の種類、
0:12線の形、色、太さをまとめて指定できる一括指定の形になっています。
0:18今回は、点線の下線を付ける例と、線をなくすノーンという値を比べながら、基本の書き方から効かないときの注意点まで、
0:23初心者向けに分かりやすく解説します。
0:29リンクの下線を消す場面でもよく使う、実務でとても身近なプロパティですので、
0:33仕組みから丁寧に見ていきましょう。
0:37線の位置、形、色、太さという四つの要素に分けて考えると、このプロパティの全体像がつかみやすくなります。
0:45まず基本の書き方です。
0:47セレクターのあとにプロパティ名、テキストデコレーションを書き、コロンを挟んで値を並べ、
0:51最後にセミコロンを付けます。
0:54スライドの例では、アンダーラインで下線を、ドッテッドで点線を、カラーコードで深い緑色を指定していて、
0:59文字の下に緑色の点線が引かれます。
1:04値はすべてを書く必要はなく、下線だけならアンダーラインだけでも構いません。
1:09クラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることを確認しながら、
1:14まずはこの形をそのまま書いて、ブラウザーで表示を確かめてみましょう。
1:20最初に決めるのは、線をどこに引くかです。
1:23個別プロパティのテキストデコレーションラインに当たる部分で、アンダーラインは文字の下に下線、
1:29オーバーラインは文字の上に上線、ラインスルーは文字の真ん中を通る取り消し線を付けます。
1:35ノーンは何も付けない指定です。
1:37下線と上線のように、複数の種類を空白で区切って同時に指定することもできます。
1:42取り消し線は、価格の改定や削除した内容を示すときによく使われます。
1:47まずは、どの位置に線を引きたいのかを言葉で決めてから、対応する値を選ぶと迷いません。
1:52線の位置が決まれば、次はその線の見た目を整えていきます。
1:56次は線の形です。
1:58個別プロパティのテキストデコレーションスタイルに当たる部分で、ソリッドは途切れのない実線、
2:05ダブルは二重線、ドッテッドは点線、ダッシュドは破線、ウェイビーは波線を指定します。
2:12今回の実例で使うドッテッドは点線なので、普通の下線よりも軽く、さりげない印象になります。
2:19波線は、注意をやわらかく伝えたいときに使われることもあります。
2:24同じ下線でも形を変えるだけで文章の雰囲気が大きく変わるので、強調したいのか、
2:30控えめに目立たせたいのか、目的に合わせて選んでみてください。
2:35テキストデコレーションでは、線の色と太さも一緒に指定できます。
2:39色はテキストデコレーションカラー、太さはテキストデコレーションシックネスという個別プロパティに対応していて、
2:44文字の色とは別に決められます。
2:48スライドのように色と太さを一括で書くこともできますし、後から色だけ、太さだけを変えたいときは個別プロパティで分けて書くこともできます。
2:57下線の位置を文字から少し離したいときは、テキストアンダーラインオフセットを組み合わせます。
3:03まとめて書くか、分けて書くかを、変更のしやすさで選ぶのがコツです。
3:07基本情報を確認します。
3:09テキストデコレーションは一括指定なので、初期値は、線の種類や形、色といった構成する個別プロパティの初期値を参照する形になっています。
3:20通常は継承しません。
3:22ただし注意したいのは、親要素に付けた装飾線は子要素の文字にも表示されるという点です。
3:29継承とは別の仕組みで線が引き継がれて見えるため、子の側でノーンを指定しても、
3:33親の線を単純には打ち消せません。
3:38インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。
3:45最終的な値は、開発者ツールのコンピューテッドで確認しましょう。
3:50ここからは記事の実例です。
3:52エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
4:00デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、
4:05折り返して複数行になる長さにしてあります。
4:10点線の下線が複数行にわたって続く様子を確認するため、文章がある程度長いほうが違いが分かりやすくなります。
4:19頭の部分では、スタイルシートをリンクで読み込んでください。
4:24親と子の構造も例の一部なので、この土台は変えずに固定し、次のスライドで変える一行の効果だけを観察します。
4:32土台のシーエスエスです。
4:34ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
4:40ここで最後の行に、アンダーライン、ドッテッド、緑色を指定すると、文章全体に緑色の点線の下線が引かれます。
4:48次に最後の行だけをノーンへ換えると、線がすべて消えて、ただの文章に戻ります。
4:54変わるのはこの一行だけです。
4:56ファイルを保存してブラウザーを再読み込みし、点線があるときとないときで、
5:00文章の目立ち方がどう変わるかを比べてください。
5:05一か所だけを変える実験は、原因と結果の関係がとても追いやすくなります。
5:10間違えやすい点を確認します。
5:12リンクには標準で下線が付いていますが、テキストデコレーションのノーンで下線だけを消してしまうと、
5:18周りの文章と見分けが付かなくなり、リンクだと気付けなくなります。
5:24下線を消す場合は、色を変える、太字にするなど、リンクだと分かる別の手掛かりを必ず用意してください。
5:31もう一つの注意点は、先ほど触れたように、親要素で付けた線は子要素でノーンを指定しても単純には消せないことです。
5:40そのうえで開発者ツールを使い、ネットワーク、エレメンツ、スタイルズ、コンピューテッドの順に調べ、
5:45狭い画面幅や文字拡大でも使えるかを確認しましょう。
5:51ブラウザー互換性を確認します。
5:53記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
5:58エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
6:04アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
6:09とても古いブラウザーから使えるため、今回比べた点線の下線やノーンといった基本の指定は、
6:13安心して使えると考えてよいでしょう。
6:18ただし、プロパティが使えることと、すべての値や構文が使えることは別です。
6:23色や太さまで含めた新しい書き方を使う場合は、値ごとの対応も確認してください。
6:28最後に練習とまとめです。
6:30まとめます。
6:31テキストデコレーションは、線の種類、形、色、太さをまとめて指定する一括指定のプロパティで、
6:35通常は継承しませんでした。
6:39点線の下線を付ける例と、ノーンで線をなくす例を比べ、見え方がどう変わるかを確認できた点が大切でした。
6:47練習として、まず二つの指定の違いを言葉で説明し、次に文章量や親の幅だけを変えて、
6:51結果がどう変わるかを比べてみてください。
6:55お疲れさまでした。
6:57関連するテキストデコレーションカラーやテキストデコレーションシックネスも一緒に学ぶと、
7:01下線まわりの理解がさらに深まります。
7:06値を一つずつ変えて比べる練習を重ねることが、確かな理解への近道です。

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

この動画で学べること

text-decorationの役割と主な指定値を解説。文章に点線の下線が付きます。noneとの比較で役割を確認します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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