❄️ Bootstrapで作る「雪 snow が降るおしゃれなクリスマス用トップページ」【コピペOK】

冬のサイトやクリスマスイベントページを作るとき、「もっと雰囲気を出したい」「動きのある背景を追加したい」と感じる人は多いはず。
実は、Bootstrap × JavaScript（Canvas） を組み合わせるだけで、誰でも簡単に “雪が降る幻想的なトップページ” を作れるんです。
今回は 完成コード付きで、初心者でも迷わず作れるようにわかりやすく丁寧に解説します。

今回作る雪が降るトップページはこちら

See the Pen 雪が降るアニメーション画面 by VA-Rie (@VA-Rie) on CodePen.

このページは以下の要素で構成されています。

• Bootstrapで整えたおしゃれなヒーローエリア
• 画面全体に降り続ける雪アニメーション
• クリスマスカラーに合うナビバー
• スマホ対応済み（レスポンシブ）
• コピペでそのまま動くコード

冬サイトにぴったりのデザインで、とても見栄えの良いトップページです。

コードの解説：BootstrapとCanvasで冬サイトが作れる理由

① Bootstrapでヒーローエリアを中央に配置

<div class="hero d-flex align-items-center justify-content-center text-white text-center">

Bootstrapの d-flex、align-items-center、justify-content-center を使うことで、
テキストを“縦横中央”に美しく配置できます。

CSSを書かなくても、綺麗なレイアウトが完成するのが Bootstrap の強みです。

② 背景画像を全画面に表示

.hero {
  height: 100vh;
  background: url("…") center/cover no-repeat;
}

100vh で画面の高さと同じサイズを確保し、
background-size: cover により画像が美しく引き伸ばされます。

クリスマスツリーなど好きな画像に差し替えるだけでデザインが変わります。

③ Canvas を使った雪アニメーション

<canvas id="snow"></canvas>

このキャンバス上に
雪（＝小さな白い円）を描いて動かしています。

④ ランダムな雪を生成して自然な動きに

function SnowFlake() {
  this.x = Math.random() * canvas.width;
  this.y = Math.random() * canvas.height;
  this.radius = Math.random() * 3 + 1;
}

大きさ・落下スピード・揺れ方をランダムにすることで、
自然な「ふわふわした雪の動き」が再現できます。

⑤ requestAnimationFrameで滑らかなアニメーション

requestAnimationFrame(animate);

ブラウザに最適な速度で描画され、
GPUも効率よく使われるため、非常に軽量です。

スマホでもなめらかに雪が降ります。

まとめ：Bootstrapなら初心者でも冬サイトが作れる

• Bootstrapでレイアウトとデザインを簡潔に
• Canvasで雪アニメーションを軽量実装
• コピペで使える完成コード付き
• クリスマスや冬イベントに最適

この組み合わせは初心者でも扱いやすく、
少ないコードでプロ級のクリスマスデザインが作れます。

ぜひあなたのサイトにも、
“雪が降る冬の演出” を取り入れてみてください❄️✨