この実験では、強力な 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] |
| |
+------------------------+覚えておくべきポイント：
このステップでは、前のステップで学んだ構文を基に、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>ボックスシャドウの適用方法を解説しましょう。
.light-shadow は、以下の設定で微妙な影を使用しています。
.dark-shadow は、以下の設定でより目立つ影を使用しています。
例の視覚的な出力：
+------------------------+------------------------+
| | |
| [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>新しいボックスシャドウのカスタマイズを見てみましょう。
inset キーワードを使用します。box-shadow: inset [水平方向のオフセット] [垂直方向のオフセット] [ぼかし半径] [色]10px の拡散で青味の影の境界が作成されます。例の視覚的な出力：
+------------------------+------------------------+------------------------+
| | | |
| [Inset Shadow Box] | [Spread Shadow Box] | [Colored Shadow Box] |
| | | |
+------------------------+------------------------+------------------------+重要なポイント：
inset は内部シャドウを作成します。このステップでは、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>影付きの円形要素を作成するための重要な技術：
border-radius: 50% を使って完全な円を作成します。0 10px 20px rgba(0, 0, 0, 0.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>複数の影効果の重要な技術：
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)：青の強調影例の視覚的な出力：
+------------------------+
| |
| [Card with Complex |
| Shadow Effects] |
| |
+------------------------+重要なポイント：
inset を使用するこの実験では、参加者は強力な CSS の box-shadow プロパティを使って、ウェブ要素に視覚的に魅力的な深さと立体感を与えます。ボックスシャドウの基本的な構文を学ぶことで、学生たちは水平および垂直方向のオフセット、ぼかし半径、色のパラメータを使って影効果を適用する方法を見つけ出し、HTML 要素の視覚的なデザインを向上させることができます。
この実験では、基本的なボックスシャドウの作成、影のプロパティのカスタマイズ、複数の影効果の試験などの実践的な演習を通じて学習者を導きます。参加者は、オフセット方向、ぼかし強度、色の透明度などの影の特性を操作する実践的な経験を得ることができ、これはウェブページコンポーネントの美的要素と視覚的な階層構造を大幅に改善することができます。
