CSSシャドウ生成

CSSシャドウの基本：box-shadow, drop-shadow, text-shadowの違い

CSSで影を表現する代表的なプロパティには、box-shadow、drop-shadow、text-shadowがあります。
box-shadowはボックス要素全体に影を付け、text-shadowはテキストにのみ影を付けます。
drop-shadowは画像やSVGの透明部分を考慮して影を付けるフィルター効果で、より自然な影表現が可能です。

box-shadowのパラメータと複数影の重ね方

box-shadowは水平オフセット、垂直オフセット、ぼかし距離、拡散距離、色を指定します。
例：box-shadow: 4px 4px 10px rgba(0,0,0,0.3);。
複数の影をカンマ区切りで指定すれば、立体感や光の屈折を表現でき、繊細なデザインに役立ちます。

drop-shadowの特性と使いどころ

drop-shadowはfilterプロパティの一種で、画像の透明部分を考慮して影を付けるため、特に透過PNGやSVGに適しています。
box-shadowより自然でリアルな影を表現できる一方、パフォーマンス面でやや負荷が高い点に注意が必要です。
複雑なグラフィックに対して影をつける場合に重宝します。

text-shadowで文字を際立たせる技術

text-shadowはテキストに影を付け、コントラストを強調したり立体感を演出します。
色やオフセットを工夫して、読みやすさを向上させることができますが、過剰な影は可読性を損なうためバランスが重要です。
レスポンシブデザインでは影のサイズ調整も検討しましょう。

パフォーマンスとアクセシビリティの考慮点

影の表現は美しいUIに欠かせませんが、過剰なbox-shadowやdrop-shadowはレンダリング負荷を高め、ページ表示速度に影響します。
また、影がコントラストの低下を招く場合、視認性やアクセシビリティを損なうこともあります。
適切な影の使い方を心がけ、デザインとパフォーマンスのバランスを取りましょう。

// ユーザーがシャドウの種類を切り替えたときに、プレビューとクラスを更新
radio.addEventListener('change', (e) => {
	document.body.className = `shadow-type-${e.target.value}`;
	this.updatePreview();
});

ここでは、box-shadowやtext-shadowなど、ユーザーが選んだ影の種類に応じて、画面の見た目と出力されるCSSを切り替えています。クラス名を変更してスタイルを適用しやすくし、同時にプレビューも更新しています。

// シャドウの数値を変更したとき、リアルタイムにCSSを反映
slider.addEventListener('input', () => {
	number.value = slider.value;
	this.updateShadowValues();
});

スライダーや数値入力で調整したときに、シャドウのスタイルが即時反映されるようにしています。値の同期と、リアルタイムプレビューの更新がポイントです。操作性を高めることで、調整→確認→調整の流れをスムーズにしています。

// 現在アクティブなシャドウ情報をもとに、表示と出力を更新
updatePreview() {
	const cssValue = this.shadows.map(shadow => this.getShadowString(shadow)).join(', ');
	previewBox.style.boxShadow = cssValue;
	output.textContent = `box-shadow: ${cssValue};`;
}

複数のシャドウを合成している場合も、配列としてまとめて処理し、ひとつのCSSに変換して出力しています。これにより、複雑な影の効果を可視化しながら簡単にコピーできる構造になっています。

// シャドウをRGBA形式に変換
getRGBAString(shadow) {
	return `rgba(${r}, ${g}, ${b}, ${shadow.opacity / 100})`;
}

カラーコード（16進数）に加え、透明度（0〜100）をCSSのrgba形式に変換しています。CSSで自然な影を作るには透明度の調整が欠かせないため、ユーザーが直感的に扱えるように変換処理を挟んでいます。

// シャドウの削除ボタンの処理
item.querySelector('.delete-button').addEventListener('click', () => {
	this.deleteShadow(index);
});

影のレイヤーを追加・削除できるようにすることで、複数の影を重ねたデザインにも対応できます。