CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-decoration-styleプロパティでテキスト装飾のスタイルを設定する方法

text-decoration-styleプロパティとは

テキスト装飾の線のスタイルを設定するには、CSSの text-decoration-style プロパティを使用します。このプロパティを使うことで、取り消し線・下線・上線などの装飾線を、実線や二重線、点線、破線、波線など好みのスタイルに変更できます。

構文と使用できる値

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
  • solid … 実線（初期値）
  • double … 二重線
  • dotted … 点線
  • dashed … 破線
  • wavy … 波線
  • initial … 初期値に戻す
  • inherit … 親要素から継承する

サンプルコード1：取り消し線と二重下線の例

まずは、取り消し線と二重下線を組み合わせた基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
span {
    text-decoration: line-through;
    text-decoration-color: blue;
}
.demo2 {
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

この例では、span 要素に青色の取り消し線（line-through）を適用し、.demo2 クラスには赤色の二重下線（underline + double）を設定しています。

表示結果

CSSのtext-decoration-styleプロパティでテキスト装飾のスタイルを設定する方法

サンプルコード2：上線に波線と破線を適用する例

続いて、上線（overline）に対して波線と破線を適用した別の例を紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    text-decoration: overline;
    text-decoration-color: blue;
    text-decoration-style: wavy;
}
.demo2 {
    text-decoration: overline;
    text-decoration-style: dashed;
    text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

この例では、1つ目の段落には青色の波線状の上線を、2つ目の段落には赤色の破線の上線を適用しています。このように text-decoration-style を使うことで、装飾線の見た目を柔軟にカスタマイズできます。

表示結果

CSSのtext-decoration-styleプロパティでテキスト装飾のスタイルを設定する方法

  1. HTMLでテキストの方向を設定する方法【directionプロパティの使い方】

    HTMLでテキストの表示方向を設定するには、style属性を使用します。style属性は要素にインラインスタイルを指定するための属性で、CSSのdirectionプロパティと組み合わせることで、テキストの流れる方向（左から右／右から左）を制御できます。 ただし、style属性で指定したスタイルはインラインスタイルとして扱われるため、<style>タグや外部スタイルシートで定義されたグローバルなスタイルよりも優先される点に注意してください。 directionプロパティに指定できる値 番号値と説明 1ltr左から右へ記述する（left to right）。日本語や英語など、ほ

  2. HTML DOM StyleのlineHeightプロパティとは？使い方と設定例を解説

    lineHeightプロパティとはHTML DOMのStyleオブジェクトが持つlineHeightプロパティは、テキストの行間（行の高さ）を設定・取得するために使用されます。行間を適切に調整することで、文章の可読性を大幅に向上させることができます。lineHeightプロパティの値を設定する構文object.style.lineHeight = normal|number|length|%|initial|inherit;lineHeightプロパティの値を取得する構文object.style.lineHeight;指定できる値normal： 通常の行間。デフォルト値です。number（数値