text-decorationとは？初心者向けの使い方と実例共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

text-decorationとは？

Webサイトを作るときには、文字をただ表示するだけでなく、見栄えを整えるための装飾を使うことが多いです。text-decorationはその中でも基本的な CSS のプロパティの一つで、文字の下や上に線を引いたり、文字を打ち消したように見せたりする機能を持っています。つまり、文字自体の色やフォントを変えるのではなく、装飾線の有無とスタイルをコントロールするための道具です。

初めての人にも覚えやすいポイントは次の3つです。何を変えたいのか、どんな見た目にしたいのか、ブラウザの動作を確認することです。

基本的な使い方

最も基本的な使い方は text-decoration: underline; のように、文字の下に線を引くことです。これによりリンクでなくても下線をつけることができます。反対に text-decoration: none; と書くと、どんな下線も消えます。

その他の使い方として、打ち消し線を入れる text-decoration: line-through; や、上に線を引く text-decoration: overline;、複数の線を同時に出したい場合は text-decoration: underline overline; のように並べます。

重要な補助情報として、text-decoration は色を変えたいときには text-decoration-color、線のスタイルを変えたいときには text-decoration-style、太さを変えたいときには text-decoration-thickness を使います。これらを組み合わせると、下線の色を赤にしたり、波形の下線をつけたりすることができます。

実践例とコードの見方

以下はよくある使い方の例です。

例1 下線だけを付ける場合。
これは p などの要素に text-decoration: underline; を適用する形です。実際には CSS ファイルに記述しますが、ここでは考え方を覚えることが大切です。なお、HTML 側では特に何もする必要はなく、CSS 側だけで装飾を決めます。

例2 下線の色とスタイルを変える例です。text-decoration: underline; のほかに text-decoration-color、text-decoration-style を組み合わせて使います。例えば text-decoration: underline; text-decoration-color: blue; text-decoration-style: wavy; のように設定すると、下線が青色で波形になります。

表で覚えるテキスト装飾

<th>説明

プロパティ	例
text-decoration	主な装飾を一括で指定。基本は underline, none, line-through, overline の4つ程度。	text-decoration: underline;
text-decoration-color	装飾線の色を指定。	text-decoration-color: red;
text-decoration-style	装飾線のスタイルを指定。solid, wavy, double など。	text-decoration-style: wavy;
text-decoration-thickness	装飾線の太さを指定。px や % で指定可能です。	text-decoration-thickness: 2px;

このように text-decoration を使うと、リンクの見た目を変えずに文章の一部だけ強調することができます。デザインの一貫性を保つためには、サイト全体で同じ装飾ルールを決めておくと良いでしょう。

よくある質問

Q. 下線を消したいときはどうするの？ A. text-decoration: none; を適用します。リンクにも適用された下線を消したい場合には、対象要素にこのプロパティを上書きします。

Q. すべてのブラウザで同じ見た目になるの？ A. ほとんどの現代的なブラウザは同じ挙動をしますが、古いブラウザや特定の環境では解釈が異なることがあります。開発時には複数のブラウザで確認しましょう。

text-decorationの関連サジェスト解説

text-decoration none とは: text-decoration とは、文字や文字列の周りに装飾をつける CSS のプロパティです。下線、上線、取り消し線などをコントロールします。text-decoration: none は、その装飾を「なし」にする指定です。主にリンクの下線を消すために使われることが多いですが、使い方次第でデザインの印象を大きく変えることができます。全てのリンクに適用したい場合は a { text-decoration: none; } のように書きます。特定の要素だけにしたいときはクラスを作って .no-underline { text-decoration: none; } とします。ただし注意点もあります。多くの利用者はリンクを下線で認識します。下線を消すとリンクだと気づきにくくなる場合があるため、代わりに色を変えたり、ホバー時に下線を出すなどの工夫をするのが大切です。例として、a { color: #1a0dab; text-decoration: none; } a:hover, a:focus { text-decoration: underline; color: #000; } これで通常時は下線なし、マウスを重ねると下線と色でリンクだと分かります。text-decoration には他にも line, overline, underline の組み合わせがあり、必要に応じて line を組み合わせて美しく表現できます。近年は text-decoration-line など個別プロパティも使えるようになり、デザインの自由度が高まっています。実務では、ブランドのデザインガイドに合わせて適切に使うことが大切です。

text-decorationの同意語

テキスト装飾: CSS の text-decoration プロパティを指す総称。文字に下線・上線・取り消し線などの装飾をつける機能のこと。
文字装飾: 文字自体への装飾全般を表す語。文脈によっては text-decoration の機能を指すことも多い。
文字デコレーション: 日本語の外来語表現で、テキストの装飾全般を意味する言い方。
下線: 文字の下に線を引く装飾。代表的な値は text-decoration: underline の意味。
下線付き: 下線が付いた状態の装飾表現を指す言い方。
上線: 文字の上に線を引く装飾。text-decoration: overline の意味。
上線付き: 上線が付いた状態を示す表現。
取り消し線: 文字に横線を引く装飾。text-decoration: line-through の意味。
取消線: 同義の表現。
打ち消し線: 同義の表現。
なし: 装飾が適用されていない状態を指す。text-decoration: none の意味。
装飾なし: 同義の表現。
テキストデコレーション: 英語の text-decoration をそのまま音に直した表現。装飾機能を指す。
テキスト装飾プロパティ: CSS のプロパティ名としての解釈。装飾を指定する機能を指す説明。

text-decorationの対義語・反対語

装飾なし: テキストに飾りを施さない状態。下線・取り消し線・色付きの装飾などが適用されていないことを指します。
無装飾: 装飾が一切ない状態。素のテキストとして表現されることを意味します。
プレーンテキスト: 飾りや書式設定が施されていない、最も基本的なテキストの状態。
素文字: 文字自体に装飾が付いていない、装飾のない素の文字情報の状態。
素のテキスト: 装飾やスタイルが付いていない、最小限のテキスト表現。
下線なし: テキストの下に線を引かない状態。デコレーションを使っていない状態の一例です。
上線なし: テキストの上部に線を引かない状態。overline を適用していないことを示します。
取り消し線なし: 文字に取り消し線を引かない状態。line-through の装飾を使っていないことを意味します。
デコレーションを使わない: text-decoration の装飾効果を一切適用しないこと。
飾りなし: 視覚的な装飾を持たない、シンプルな表示を指します。
無デコレーション: 飾り（デコレーション）を完全に排除したテキスト表現。
ミニマルなテキスト: 必要最低限の装飾にとどめ、余計なデコレーションを避けたテキスト表現の考え方。

text-decorationの共起語

CSS: Cascading Style Sheets の略。ウェブページの見た目を制御するスタイル言語です。
HTML: HyperText Markup Language の略。ウェブページの構造を記述するマークアップ言語です。
リンク: ウェブページ内の別の場所へ移動する要素。通常は a タグで表現され、クリックで遷移します。
アンカー: リンクの対象を指す言葉。a 要素自体がアンカーとして機能します。
下線: テキストの下に線を引く装飾。text-decoration で underline を指定したときに適用されます。
上線: テキストの上に線を引く装飾。text-decoration-line で overline を指定した場合に適用されます。
取り消し線: テキストに横線を引く装飾。text-decoration-line で line-through を指定します。
打ち消し線: 取り消し線と同義の表現です。
なし: text-decoration: none のように装飾を表示しない状態を指します。
text-decoration-color: 装飾線の色を指定します。
text-decoration-line: 装飾するラインの種類を指定します。underline、overline、line-through、none のいずれかを設定します。
text-decoration-style: 装飾線のスタイルを指定します。solid、double、dotted、dashed、wavy などがあります。
text-decoration-thickness: 装飾線の太さを指定します。数値やキーワードで調整します。
text-underline-offset: 下線の位置を文字の基線からずらして調整します。
text-decoration-skip-ink: 下線が文字のインクをスキップするかどうかを制御します。可読性の向上に役立ちます。
hover: マウスを重ねたときに text-decoration を変えるための疑似クラスです。
focus: 要素にフォーカスが当たったときに text-decoration を変えるための疑似クラスです。
アクセシビリティ: 視認性と読みやすさを高めるための装飾の配慮全般を指します。
ブラウザ互換性: 異なるブラウザ間で実装差が出ることがあるため、互換性の確認が重要です。
デフォルト値: 特に指定がない場合の初期状態を指します。text-decoration のデフォルトは none であることが多いです。
装飾: 文字の見た目を決める全般的な表現。text-decoration は装飾の一部です。

text-decorationの関連用語

text-decoration: CSSのショートハンドプロパティ。テキストの装飾全体を一度に指定でき、下線・取り消し線・上線などのライン、色、スタイル、太さをまとめて設定する用途で使われます。
text-decoration-line: 装飾として描くラインの種類を指定します。主に underline（下線）、overline（上線）、line-through（取り消し線）を設定します。複数指定も可能です。
text-decoration-color: 装飾ラインの色を決める設定です。color 値（例: red, #333, rgb(0,0,0) など）を使います。
text-decoration-style: 装飾ラインのスタイルを指定します。solid（実線）、dashed（破線）、dotted（点線）、double、wavy などが選べます。
text-decoration-thickness: 装飾ラインの太さを長さで指定する設定です。ブラウザによって表現の差がありますが、px、em などの長さで太さを調整します。
text-decoration-skip-ink: 下線が文字のインクをスキップして描画されるかどうかを制御します。auto や none などの値を使います。
text-underline-offset: 下線を文字とどれだけ離して描くかを調整する設定です。長さ値でオフセットを指定します。
box-decoration-break: ボックス装飾が改行時にどう分割されるかを指定します。slice は行に分割して装飾を続け、clone は各分割 fragment に装飾を複製します。