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

CSSでテキストの周りに影を設定する方法｜text-shadowプロパティの使い方

CSSでは、text-shadowプロパティを使用することで、テキストの周りに影を簡単に設定できます。影の位置（水平方向・垂直方向のオフセット）、ぼかしの度合い、色を自由に指定できるため、文字に立体感や装飾効果を加えたい場合に非常に便利です。

text-shadowプロパティの基本構文

text-shadowプロパティは、以下のような形式で値を指定します。

text-shadow: 水平方向のオフセット 垂直方向のオフセット ぼかし半径 影の色;

各値は半角スペースで区切って記述し、順番は「横方向のずれ → 縦方向のずれ → ぼかしの強さ → 色」となります。ぼかし半径と色は省略することも可能です。

サンプルコード

次のコードを実行して、CSSでテキストの周りに影を設定する方法を実際に確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "text-shadow:3px 1px 4px green;">
         お使いのブラウザがCSSのtext-shadowプロパティに対応していれば、このテキストには緑色の影が表示されます。
      </p>
   </body>
</html>

上記の例では、テキストに対して「右方向に3px」「下方向に1px」ずらした位置に、ぼかし幅4pxの緑色（green）の影を付けています。対応しているブラウザで表示すると、文字の周りに緑色の影が確認できます。

なお、text-shadowは主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）すべてでサポートされているため、安心して使用できます。複数の影をカンマで区切って指定すれば、より立体的で凝ったデザイン表現も可能です。

  1. 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 … 波

  2. CSSのtext-decoration-lineでテキスト装飾の種類を設定する方法

    テキストに適用される装飾（下線・上線・打ち消し線など）の種類を設定するには、text-decoration-lineプロパティを使用します。このプロパティを活用することで、テキストにどのような装飾線を表示するかを細かく制御できます。 構文 text-decoration-line: none|underline|overline|line-through|initial|inherit; 指定できる主な値は以下の通りです。 none：装飾を一切付けない（既定値） underline：テキストの下に線を表示する overline：テキストの上に線を表示する line-through：テキストの