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

JavaScriptでテキストにシャドウ効果を設定する方法【textShadowプロパティ解説】

JavaScriptでテキストに影（シャドウ）効果を設定するには、textShadowプロパティを使用します。このプロパティはCSSのtext-shadowに対応しており、要素のスタイルを動的に変更できます。

textShadowプロパティの基本構文

textShadowプロパティには、次の順序で値を指定します。

水平方向のオフセット 垂直方向のオフセット ぼかし半径 影の色

カンマで区切ることで、複数の影を同時に設定することも可能です。これにより、立体感のある文字表現や、発光しているような演出も簡単に実装できます。

サンプルコード

ボタンをクリックすると、テキストにシャドウ効果が適用されるサンプルです。実際にブラウザで動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <button onclick = "display()">テキストシャドウを設定</button>

      <div id = "myID">
         これはデモテキストです！これはデモテキストです！これは <br>これはデモテキストです！これはデモテキストです！これはデモテキストです！これはデモテキストです！<br> これはデモテキストです！<br> これはデモテキストです！これはデモテキストです！これはデモテキストです！これはデモテキストです！
      </div>

      <script>
         function display() {
            document.getElementById("myID").style.textShadow = "2px 2px 2px #ff0000,20px 5px 2px #F1F1F1";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、ボタンがクリックされるとdisplay()関数が呼び出されます。関数内では、getElementById("myID")でIDが「myID」のdiv要素を取得し、そのstyle.textShadowに影の設定値を代入しています。

設定されている値の意味は以下のとおりです。

  • 2px 2px 2px #ff0000：右へ2px・下へ2pxずらした位置に、ぼかし半径2pxの赤色（#ff0000）の影を描画します。
  • 20px 5px 2px #F1F1F1：右へ20px・下へ5pxずらした位置に、ぼかし半径2pxの薄いグレー（#F1F1F1）の影を追加します。

このように複数の影を組み合わせることで、より立体的で洗練されたテキストデザインを実現できます。ぼかし半径や色の値を変えて、さまざまなシャドウ効果を試してみてください。

  1. JavaScriptでテキストの行間を設定する方法

    テキストの行間（行と行の距離）を設定するには、lineHeightプロパティを使用します。このプロパティは、要素内の各行の高さを制御し、値を大きくするほど行間が広がります。JavaScriptから操作する場合は、document.getElementById()などで対象の要素を取得し、style.lineHeightに値を代入します。値には数値（フォントサイズに対する倍率）のほか、「px」や「%」などの単位も指定できます。以下のサンプルコードを実行して、JavaScriptでテキストの行間を設定する方法を確認してみましょう。サンプルコード<!DOCTYPE html> <h

  2. JavaScriptでテキストの文字間隔（レタースペーシング）を設定する方法

    文字間隔の設定には「letterSpacing」プロパティを使うJavaScriptでテキストの文字と文字の間隔を調整するには、styleオブジェクトのletterSpacingプロパティを使用します。このプロパティはCSSのletter-spacingに対応しており、「px」や「em」、「pt」などの長さの単位で文字間のスペースを自由に指定できます。値には正の数値を指定すれば文字間が広くなり、負の数値を指定すれば狭くなります。また、「normal」を設定すればデフォルトの間隔に戻すことも可能です。サンプルコード以下のコードでは、ボタンをクリックするとdisplay()関数が呼び出され、idが