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

CSSのtext-decorationプロパティでテキスト装飾を付ける方法

CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。

また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。

基本構文

text-decorationプロパティの基本的な書き方は以下のとおりです。

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

サンプルコード①：疑似要素への適用

まずは、::before疑似要素を使って生成したテキストに装飾を加える例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)::before {
    content: " We will reach the destination ";
    background-color: lightgreen;
    text-decoration: overline blue;
    font-size: 1.2em;
}
</style>
</head>
<body>
<p>I'm not the only traveller</p>
<p>
before night.
</p>
</body>
</html>

表示結果

このコードをブラウザで表示すると、緑色の背景を持つテキストの上部に青い上線（overline）が描画されます。

CSSのtext-decorationプロパティでテキスト装飾を付ける方法

サンプルコード②：span要素と段落への適用

次に、複数のセレクタに対して異なる装飾を指定する例です。<span>要素には赤背景の上に青い打ち消し線を、段落全体には下線を適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
span {
    background: rgb(204,22,50);
    text-decoration: blue line-through;
    font-style: italic;
    color: white;
}
p {
    text-decoration: underline;
}
</style>
</head>
<body>
<h2>Department Details</h2>
<p>
The employees of Department Marketing, Operations, Finance,
<span>IT</span>
are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span>
</p>
</body>
</html>

表示結果

段落全体に下線が引かれ、赤背景の白文字部分にはさらに青い打ち消し線が重ねて表示されます。

CSSのtext-decorationプロパティでテキスト装飾を付ける方法

主な値のまとめ

  • underline … テキストの下部に線を引く（リンクなどで一般的）
  • overline … テキストの上部に線を引く
  • line-through … テキスト中央に打ち消し線を引く（削除された内容の表現に便利）
  • none … 装飾なし（リンクのデフォルトの下線を消したい場合に使用）

値は半角スペースで区切って組み合わせられます。たとえば text-decoration: underline red wavy; のように指定すると、赤色の波状の下線を一度に設定できます。

  1. CSSのz-indexプロパティを使って要素を重ねて表示する方法

    CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用