designWeb全般webmasterデザインメモTOPWebデザインCSSCSSのみでパララックス効果をつけるパララックスとは、簡単に言うと「視差」という意味があり、Webデザインにおけるパララックスは画面をスクロールさせることで複数のコンテンツに奥行きや立体感といった視差効果をつけるデザイン手法になります。パララックスにはjQueryなどのプラグインもありますが、CSSだけでも簡単にパララックスのような表現を実装することができます。パララックスの作り方それでは、CSSのみで視差効果をつける方法を見ていきましょう。url(画像のパス);}まず、パララックス効果をつけたい要素に対して高さを指定します。ここでは100%を指定していますが、数値を変えることで違った見え方になるのでお好みで設定してみてください。fixed;」を指定することで背景画像を固定させることができます。cover;」で画面いっぱいに画像を表示させたりしています。これで、視差効果をつける準備が整いました。あとは表示させたい分だけ背景画像を指定してあげれば完成です。DEMOこのように、jQueryなどのプラグインを使用しなくても簡単にCSSだけでパララックス効果を表現することができますので、機会があれば試してみてください。