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

CSSの新機能：text-decorationプロパティでテキスト装飾と下線を自由にデザインする方法

text-decoration関連の各プロパティが登場したことで、これまで以上に柔軟にテキストの装飾や下線をコントロールできるようになりました。

text-decorationは、text-decoration-thickness（線の太さ）、text-decoration-color（線の色）、text-decoration-line（線の種類）、text-decoration-style（線のスタイル）をまとめて指定できるショートハンド（一括指定）プロパティです。一方、text-decoration-skip、text-decoration-skip-ink、text-underline-offset、text-underline-positionなどは、個別に明示的に指定する必要があります。

構文

CSSにおけるtext-decorationプロパティの基本構文は以下の通りです。

Selector {
    text-decoration: /*値*/
}

使用例1：さまざまな装飾スタイル

次の例では、text-decorationプロパティの代表的な使い方を紹介します。二重線、波状線（wavy）、上下線（underline overline）、打ち消し線（line-through）などを組み合わせています。

<!DOCTYPE html>
<html>
    <head>
        <style>
            #one {
                text-decoration-style: double;
                text-decoration-skip-ink: auto;
            }
            p {
                padding: 2%;
                text-decoration-line: underline overline;
                text-decoration-style: wavy;
            }
            p:nth-of-type(even) {
                text-decoration: overline;
            }
            span {
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
        <p>Random Demo Text</p>
        <p>Random <span>Demo</span> Text</p>
    </body>
</html>

このコードを実行すると、以下のような表示結果になります。

CSSの新機能：text-decorationプロパティでテキスト装飾と下線を自由にデザインする方法

使用例2：太さとスタイルのカスタマイズ

続いて、text-decoration-thicknessで線の太さを4pxに指定し、点線（dotted）スタイルを適用した例です。text-decoration-skip-ink: none;を指定すると、文字と装飾線が重なる部分でも線が途切れなくなります。

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                margin: 3%;
                font-size: x-large;
                text-decoration-line: underline overline;
                text-decoration-style: dotted;
                text-decoration-skip-ink: none;
                text-decoration-thickness: 4px;
            }
        </style>
    </head>
    <body>
        <p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
    </body>
</html>

このコードを実行すると、以下のような表示結果になります。

CSSの新機能：text-decorationプロパティでテキスト装飾と下線を自由にデザインする方法

まとめ

text-decoration系のプロパティを使いこなせば、単純な下線だけでなく、色・太さ・スタイル・オフセット位置まで細かく制御できます。リンクや強調表現のデザインの幅が大きく広がるので、ぜひ実際のコーディングで試してみてください。

  1. CSSのtext-align＆text-justifyプロパティを使ってテキストを揃える方法

    CSSのtext-justifyプロパティは、要素に適用される均等割り付け（ジャスティフィケーション）の方式を指定するために使用します。一方、text-alignプロパティは、要素内のテキストの水平方向の配置（左寄せ・中央揃え・右寄せ・両端揃えなど）を設定します。 なお、text-justifyプロパティは、text-align: justify;が指定されている場合にのみ有効になります。 text-justifyプロパティの主な値 auto：ブラウザが自動的に適切な均等割り付け方法を選択します（初期値）。 none：均等割り付けを無効にします。 inter-word：単語と単語の間隔を調整

  2. フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選

    CSSには、フォームやテキスト入力に関連する便利でありながら、意外と知られていないプロパティがいくつか存在します。その代表例が caret-color、pointer-events、tab-size の3つです。 caret-color: テキスト入力時に点滅するキャレット(テキストカーソル)の色を自由に指定できます。 pointer-events: 要素へのマウス操作を無効化し、ユーザーがその要素をクリックしたり選択したりできないようにできます。 tab-size: タブ文字によって挿入される空白(ホワイトスペース)の幅を設定します。 以下に、これらのプロパティを使用した具体的なコード例