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

JavaScriptでボックスにドロップシャドウを追加する方法

ボックス要素にドロップシャドウ（影）を追加するには、JavaScriptの boxShadow プロパティを使用します。このプロパティを使えば、影の位置（オフセット）、ぼかしの強さ、色などを自由に設定できます。

boxShadowプロパティの基本

boxShadow プロパティは、以下の順序で値を指定します。

  • 水平オフセット： 影を右方向へずらす距離（負の値を指定すると左方向へ移動）
  • 垂直オフセット： 影を下方向へずらす距離（負の値を指定すると上方向へ移動）
  • ぼかし半径： 影のぼかし具合（省略可能）
  • 色： 影の色

サンプルコード

以下のコードを実行し、ボタンをクリックすると、ボックスにドロップシャドウが追加される動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid green;
            width: 300px;
            height: 200px
         }
      </style>
   </head>
   <body>
      <div id="box">デモテキスト</div>
      <br><br>
      <button type="button" onclick="display()">ドロップシャドウを追加</button>
      <script>
         function display() {
            document.getElementById("box").style.boxShadow = "20px 15px 25px orange";
         }
      </script>
   </body>
</html>

上記の例では、影が右に20px、下に15pxずれた位置に、25pxのぼかしを持つオレンジ色の影が表示されます。

複数のドロップシャドウを追加する方法

1つの要素に複数の影を付けたい場合は、各シャドウの値をカンマ（,）で区切って指定します。例えば、次のように記述します。

document.getElementById("box").style.boxShadow =
   "20px 15px 25px orange, -10px -10px 20px blue";

これにより、オレンジ色の影と青色の影が同時に表示され、より立体的な演出が可能になります。ボタンやカードなど、UI要素に奥行きを持たせたい場面でぜひ活用してみてください。

  1. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト

  2. JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】

    JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>