CSSプロパティ｜ text-decoration テキストデコレーション [ホームページ制作の装飾プロパティ]

text-decoration: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「text-decoration」についてのご説明です。

ホームページ制作・作成において、text-decoration（テキストデコレーション）は、「テキストの装飾」として、テキストの下線・上線・打ち消し線・点滅を指定します。

text-decoration テキストの下線・上線・打ち消し線・点滅を指定

text-decorationは、ホームページ内の文字に対する装飾を指定します。テキストに下線・上線・打ち消し線を付けたり、点滅（現在一般的なブラウザでサポート外）させます。テキストデコレーション。

同時に複数の値を指定可能（任意順序でスペースで区切り）。

text-decoration : none

無指定（初期値）

text-decoration : underline

テキストに下線

text-decoration : overline

テキストに上線

text-decoration : line-through

テキストに打ち消し線

text-decoration : blink

テキストが点滅

現在一般的なブラウザでサポート外

適用可能要素　：　すべての要素

リンクの視認性とユーザビリティへの影響

text-decorationプロパティは、テキストに下線や取り消し線を引く単純な装飾と思われがちですが、ホームページ（ウェブサイト）の操作性（ユーザビリティ）において極めて重要な役割を持っています。特にWebマーケティングの観点から見ると、ユーザーは「下線が引かれたテキストはクリックできるリンクである」という無意識の認識を持っています。

そのため、リンク以外の単に強調したいテキストに対してtext-decorationで下線を引いてしまうと、ユーザーがリンクだと勘違いしてクリックを試み、何も起こらないことにストレスを感じてページから離脱してしまう原因につながります。反対に、デザインをすっきり見せたいからといって、本文中のリンクから下線をすべて消去してしまうと、どこが遷移できるテキストなのか判別しづらくなります。その結果、事業の目標であるお問い合わせや詳細ページへの誘導率（クリック率）が大幅に低下してしまうかもしれません。リンクには標準的な下線を残し、それ以外のテキストには安易に下線を使わないという、UI設計に基づいた明確なルール設定が重要です。

モダンCSSを活用した表現力の向上と保守性

より専門的には、現在のホームページ制作では単純なtext-decorationだけでなく、派生する新しいプロパティを組み合わせて表現力を高める手法が主流となっています。例えば、text-decoration-colorで下線の色だけを文字色とは別の色に指定したり、text-decoration-styleで波線や点線を表現したりすることが可能です。

さらに、text-underline-offsetプロパティを使えば、テキストのベースラインと下線の間の隙間を好みの数値で調整でき、text-decoration-thicknessで線の太さも自由に変更できます。かつてはこうした細かな下線のデザインを実現するために、あえてtext-decorationをnoneにして、border-bottom（下側の枠線）プロパティで代用する手法が広く使われていました。

しかし、文字装飾専用のモダンなプロパティを正しく使用することで、CSSのコード記述がより直感的になり、後からのデザイン変更や複数人での運用がしやすくなります。デザインの細部へのこだわりと、内部構造のクリーンさを両立させることが、長期的に集客効果を発揮し続ける強固なホームページへと繋がっていきます。

text-decoration: ;

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページ制作・Webデザインの1ポイント

text-decorationなどを利用してテキストに様々な装飾を施すことで、一味違ったホームページへと仕上がります。HTML4.01までは、HTML側で設定していた項目もほとんどがCSSの方へと移行しました。Webデザインとしての装飾性ではなく論理性を示す場合は、打ち消し線などはHTMLを使用したほうが良いでしょう。

ホームページ制作で安易に下線を使うことは避けたほうが賢明です。ホームページ制作において下線はハイパーテキストリンクを示すのが一般的であるため、ユーザーは下線付きのテキストを見るとリンクであると判断する可能性が高く、ホームページ中のリンク以外の下線は、ユーザーの混乱を招きます。

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ