昨今のWeb開発では、ユーザーの注目を集め、サイトに長く留まってもらうために、ビジュアル要素の魅力が非常に重要になっています。そんな中、画像に美しい影を加えることで、サイトの見た目を格段に向上させることができます。 この記事では、JavaScriptのライブラリであるreflection.jsを使用して、画像に半透明の反転した影を表示させる方法を紹介します。 CSSでの準備 まず初めに、画像を美しく表示させるための基本的なCSSを設定しましょう。ここでは、サイト全体のマージンやパディングを0に設定し、見出しや画像を中央揃えにします。特に、clWrapクラスを使って画像を中央に配置する方法を紹介します。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; fo