普段はECサイト運営会社に従事しているR.U.I（ルイ@rui_bass）です。
冬場のLP（ランディングページ）では、どうやって冬っぽくしよう？とか、どうやってクリスマスっぽくしよう？とか悩みますよね。
主にECサイト（ネットショップ）向けの記事になりそうですが、そこでオススメの方法が「ページ全体に雪を降らせる」です。
今回はコピペで簡単にページに雪を降らせる方法をご紹介します。もちろんhtmlとCSSのみ！
お気づきでしょうか？そう、このページでは特別に雪を降らせています。
簡単に実装できるので、ぜひ活用してみてください。
それでは紹介していきましょう！
CSSで雪を降らせるためのhtmlコピペ用コード
まずは html のサンプルを紹介します。
<div class="snow">●</div> はい、htmlはたったこれだけ！
適当なところに配置してあげてください。
コンテンツの最後とかへ配置しちゃって大丈夫です。
CSSで雪を降らせるためのCSSコピペ用コード
次にメインの CSS コピペ用コードがこちら。
.snow {
color: snow; /*雪の色*/
font-size: 18px; /*雪の大きさ*/
position: fixed;
top: -5%; /*初期位置*/
text-shadow:
5vw -100px 2px,
10vw -400px 3px,
20vw -500px 4px,
30vw -580px 1px,
39vw -250px 2px,
42vw -340px 5px,
56vw -150px 2px,
63vw -180px 0,
78vw -220px 4px,
86vw -320px 9px,
94vw -170px 7px;
animation: anim 5s linear infinite;
}
@keyframes anim {
100% {
color: transparent;
top: 150%;
}
}color:snow; はカラーコード #fffafa; と同じになるかな。
でもどうせだったらsnowっていう雪色で指定したくなっちゃう！私は。
お好きな方でどうぞ。
これらをコピペするだけで、簡単に雪を降らせることができます。超簡単で便利！
あとは雪がわかりやすいように、少し色のついた背景にしたりすると良いです。
CSSで雪を降らせるページのオススメデザイン
私がクリスマス系のLPで使う色味などを紹介します。
当記事で外側の背景色として実装済なのですが、赤系の色はいつも #a51918 を利用しています。
文字などコンテンツの背景にこの赤色を設定すると文字色を #ffffff の真っ白にしても少々読みづらくなるので、文字を読ませるタイプのページだと赤をもう少し濃い目にするとか、工夫を入れた方が良いですね。
そして、文字（font-family）は明朝体もアリアリ。
このページでは見出しだけ明朝体にしてみました。
ゴージャス系にするのか可愛い系にするのかなど、ページの雰囲気に合わせてフォントも変更し良き特集ページをコーディングしましょう！
【コピペで簡単】CSSで雪を降らせる方法についてまとめ
こんな感じで冬のLP作成に役立つデザインコーディングとして、CSSをコピペするだけで簡単にページで雪を降らせる方法を紹介してみました。
アパレル系ECサイトとかだと、サンタのコスプレやクリスマスグッズを取り扱うLPを作ることになるはず。
そういうページでぜひ利用したいデザインコーディングです。
ページが一気におしゃれで華やかになるので、ぜひ利用してみてください！
良きWEBデザインをっ！
