LabEx
ログイン登録

CSS でボックスシャドウを作成する

JavaScriptBeginner
オンラインで実践に進む

はじめに

この実験では、強力な CSS の box-shadow プロパティを探り、ウェブ要素に視覚的に魅力的な影効果を作成する方法を学びます。段階的なアプローチを通じて、ボックスシャドウの基本的な構文を理解し、基本的および高度なシャドウテクニックを適用し、HTML 要素の深さと視覚的興味を高めるためにシャドウプロパティをカスタマイズする方法を見つけます。

この実験では、ボックスシャドウの構文の理解、さまざまな形状にシャドウを適用すること、オフセット、ぼかし半径、および色の変化を試すことなどの重要な概念が扱われます。この実験が終了するまでに、ウェブデザインの視覚的なプレゼンテーションを変え、ユーザーインターフェイスに微妙な深さと立体感を追加することができる、プロフェッショナルな見た目のシャドウを作成する実践的なスキルを身につけるでしょう。

ボックスシャドウの構文を理解する

このステップでは、CSS のボックスシャドウの基本的な構文と、ウェブ要素に深さと視覚的興味を追加する方法を学びます。box-shadow プロパティは、HTML 要素に影効果を作成できる強力な CSS 機能です。

ボックスシャドウの構文を調べるために、新しい HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに index.html という名前のファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Box Shadow Syntax</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        /* Basic box-shadow syntax */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

ボックスシャドウの構文を解説しましょう。

  • 5px: 水平方向のオフセット（影を右に移動）
  • 5px: 垂直方向のオフセット（影を下に移動）
  • 10px: ぼかし半径（影を柔らかくする）
  • rgba(0, 0, 0, 0.3): 透明度を持つ影の色

基本的な構文は：box-shadow: [水平方向のオフセット] [垂直方向のオフセット] [ぼかし半径] [色]

影付きのレンダリングされたボックスの例の出力：

+------------------------+
|                        |
|    [Gray Box with     |
|     Soft Shadow]      |
|                        |
+------------------------+

覚えておくべきポイント：

  • 正のオフセット値は影を右と下に移動します
  • 負のオフセット値は影を左と上に移動します
  • ぼかし半径は影の端を柔らかくします
  • 色名、16 進数、RGB、または RGBA 値を使用できます

div に基本的なボックスシャドウを適用する

このステップでは、前のステップで学んだ構文を基に、div 要素に基本的なボックスシャドウを適用する方法を学びます。異なる影効果を示すために既存の HTML ファイルを変更します。

WebIDE で index.html ファイルを開き、以下のコードでその内容を更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Box Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
      }

      /* Light shadow */
      .light-shadow {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      }

      /* Darker shadow */
      .dark-shadow {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box light-shadow"></div>
      <div class="box dark-shadow"></div>
    </div>
  </body>
</html>

ボックスシャドウの適用方法を解説しましょう。

  1. 影の強さが異なる 2 つの div 要素を作成しました。
  2. .light-shadow は、以下の設定で微妙な影を使用しています。
    • 水平方向のオフセット 5px
    • 垂直方向のオフセット 5px
    • ぼかし半径 10px
    • 不透明度 20% の薄い黒色
  3. .dark-shadow は、以下の設定でより目立つ影を使用しています。
    • 水平方向のオフセット 10px
    • 垂直方向のオフセット 10px
    • ぼかし半径 15px
    • 不透明度 50% の濃い黒色

例の視覚的な出力：

+------------------------+------------------------+
|                        |                        |
|   [Light Shadow Box]   |   [Dark Shadow Box]    |
|                        |                        |
+------------------------+------------------------+

重要な観察結果：

  • オフセット値を増やすと、要素から影がさらに離れます。
  • ぼかし半径を増やすと、影が柔らかくなります。
  • 不透明度を調整すると、影の強さが変化します。

ボックスシャドウのプロパティをカスタマイズする

このステップでは、インセットシャドウ、拡散半径、色の変化など、ボックスシャドウの高度なカスタマイズオプションを探ります。これらの高度なプロパティを示すために index.html ファイルを更新します。

WebIDE で index.html ファイルを開き、以下のコードでその内容を置き換えます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Customized Box Shadows</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: #f0f0f0;
      }

      /* Inset shadow */
      .inset-shadow {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
      }

      /* Spread radius */
      .spread-shadow {
        box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
      }

      /* Colored shadow */
      .colored-shadow {
        box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box inset-shadow"></div>
      <div class="box spread-shadow"></div>
      <div class="box colored-shadow"></div>
    </div>
  </body>
</html>

新しいボックスシャドウのカスタマイズを見てみましょう。

  1. インセットシャドウ：
    • 内部シャドウを作成するために inset キーワードを使用します。
    • 要素が押されたり、くぼんだりしているような効果を与えます。
    • 構文：box-shadow: inset [水平方向のオフセット] [垂直方向のオフセット] [ぼかし半径] [色]
  2. 拡散半径：
    • 影を拡大するための追加の値を追加します。
    • 4 番目の数値が影の拡散を制御します。
    • 例では、10px の拡散で青味の影の境界が作成されます。
  3. カラードシャドウ：
    • RGBA を使用して透明度を持つカラードシャドウを作成します。
    • 例では、不透明度 40% の赤い影が使用されています。

例の視覚的な出力：

+------------------------+------------------------+------------------------+
|                        |                        |                        |
| [Inset Shadow Box]     | [Spread Shadow Box]    | [Colored Shadow Box]   |
|                        |                        |                        |
+------------------------+------------------------+------------------------+

重要なポイント：

  • inset は内部シャドウを作成します。
  • 拡散半径は影を拡大します。
  • カラードで透明な影には RGBA を使用します。

シャドウ付きの円形要素を作成する

このステップでは、CSS の border-radius と box-shadow プロパティを使って、影付きの円形要素を作成する方法を学びます。WebIDE で index.html ファイルを開き、以下のコードでその内容を更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circular Element with Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .circular-element {
        width: 200px;
        height: 200px;
        background-color: #ffffff;

        /* 円形を作成 */
        border-radius: 50%;

        /* ボックスシャドウを追加 */
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.2),
          0 6px 6px rgba(0, 0, 0, 0.15);

        /* コンテンツを中央に配置 */
        display: flex;
        justify-content: center;
        align-items: center;

        /* オプション：テキストを追加 */
        font-family: Arial, sans-serif;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circular-element">Circular Shadow</div>
    </div>
  </body>
</html>

影付きの円形要素を作成するための重要な技術：

  1. 円形：
    • border-radius: 50% を使って完全な円を作成します。
    • 幅と高さが等しいことを確認します。
  2. ボックスシャドウ：
    • 最初のシャドウ：0 10px 20px rgba(0, 0, 0, 0.2)
      • 垂直方向のオフセット 10px
      • 20px のぼかし半径
      • 不透明度 20% の薄い黒色
    • 2 番目のシャドウ：0 6px 6px rgba(0, 0, 0, 0.15)
      • より近くて柔らかいシャドウで深さを追加します。

例の視覚的な出力：

+------------------------+
|                        |
|    [Circular Element   |
|     with Soft Shadow]  |
|                        |
+------------------------+

重要なポイント：

  • border-radius: 50% は完全な円を作成します。
  • 複数のボックスシャドウで深さを作成できます。
  • 必要な効果に合わせて不透明度とぼかしを調整します。

複数のシャドウエフェクトを試す

このステップでは、複数のボックスシャドウを使って複雑な影効果を作成する高度な技術を探ります。WebIDE で index.html ファイルを開き、以下のコードでその内容を更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Shadow Effects</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }

      .card {
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;

        /* 複数の影効果 */
        box-shadow: 
                /* 外側の影 */
          0 10px 20px rgba(0, 0, 0, 0.1),
          /* 内側の影 */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
          /* 色付きの強調影 */ 0 15px 25px rgba(0, 123, 255, 0.2);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: scale(1.05);
        box-shadow:
          0 15px 30px rgba(0, 0, 0, 0.2),
          inset 0 -5px 10px rgba(0, 0, 0, 0.1),
          0 20px 35px rgba(0, 123, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Shadow Experiment</h2>
      <p>Hover to see shadow effect!</p>
    </div>
  </body>
</html>

複数の影効果の重要な技術：

  1. 重ねた影：
    • 最初の影：外側の柔らかい影
    • 2 番目の影：内側の微妙な影
    • 3 番目の影：色付きの強調影
  2. 影の構成：
    • 0 10px 20px rgba(0, 0, 0, 0.1)：柔らかい外側の影
    • inset 0 -5px 10px rgba(0, 0, 0, 0.05)：内側の微妙な影
    • 0 15px 25px rgba(0, 123, 255, 0.2)：青の強調影
  3. ホバー効果：
    • ホバー時に影の強さを増やす
    • インタラクティブな感じを与えるために拡大変換を追加する

例の視覚的な出力：

+------------------------+
|                        |
|   [Card with Complex   |
|    Shadow Effects]     |
|                        |
+------------------------+

重要なポイント：

  • 深さを表現するために複数の影を組み合わせる
  • 内側の影には inset を使用する
  • ホバーでインタラクティブな効果を作成する

まとめ

この実験では、参加者は強力な CSS の box-shadow プロパティを使って、ウェブ要素に視覚的に魅力的な深さと立体感を与えます。ボックスシャドウの基本的な構文を学ぶことで、学生たちは水平および垂直方向のオフセット、ぼかし半径、色のパラメータを使って影効果を適用する方法を見つけ出し、HTML 要素の視覚的なデザインを向上させることができます。

この実験では、基本的なボックスシャドウの作成、影のプロパティのカスタマイズ、複数の影効果の試験などの実践的な演習を通じて学習者を導きます。参加者は、オフセット方向、ぼかし強度、色の透明度などの影の特性を操作する実践的な経験を得ることができ、これはウェブページコンポーネントの美的要素と視覚的な階層構造を大幅に改善することができます。

関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development