【CSS JS】季節に合わせたページデザイン：お正月

css

SHARE

目次

はじめに

みなさん、こんにちは！
12月も下旬、年末ムードがより濃くなってきました。

前回クリスマス用のページ作成パーツをCSSメインで作成する方法を紹介しました。

クリスマスがやって来るということは、お正月も合わせてやって来ます。
ということで、今回はお正月用のページ作成パーツをCSSメインで作成する方法を紹介します！

前回のクリスマス用のパーツに関する記事は以下を参照ください！

css【CSS JS】季節に合わせたページデザイン：クリスマス

お正月用のデザインパーツ・背景

鏡餅

お正月といえばで連想するトップの一つは鏡餅ではないでしょうか？
HTMLとCSSのみでも立体的で本格的な鏡餅を作成できるので、ぜひお試しください！
以下にコードを示します。

<div class="kagami-mochi">
  <!-- 鏡餅の台座 -->
  <div class="base"></div>
  <!-- 鏡餅 下段 -->
  <div class="mochi mochi-bottom"></div>
  <!-- 鏡餅 中段 -->
  <div class="mochi mochi-middle"></div>
  <!-- 鏡餅 みかん -->
  <div class="mikan">
    <div class="leaf"></div>
  </div>
</div>
/* 鏡餅全体 */
.kagami-mochi {
  position: relative;
  width: 200px;
}

/* 鏡餅の台座 */
.base {
  width: 220px;
  height: 20px;
  background-color: #8b4513;
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* 鏡餅の各段 */
.mochi {
  position: absolute;
  background-color: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.mochi-bottom {
  width: 160px;
  height: 90px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.mochi-middle {
  width: 120px;
  height: 70px;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
}

/* 鏡餅のミカン */
.mikan {
  width: 50px;
  height: 50px;
  background-color: #ff8c00;
  border-radius: 50%;
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* ミカンの葉 */
.leaf {
  width: 30px;
  height: 15px;
  background-color: #228b22;
  border-radius: 10px 50px 50px 10px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
}
  1. 鏡餅の構造
    下段と中段の餅を2つの白い円形（楕円形）で表現しています。
    .mochi-bottom（下段）と.mochi-middle（中段）にそれぞれ異なるサイズを設定して階層感を出しています。
  2. ミカン
    ミカン部分は .mikan クラスを使用してオレンジ色の円形で表現。
    葉っぱは .leaf クラスで緑色の半楕円形を作成し、ミカンの上に配置しています。
  3. 台座
    .base を使用して茶色の長方形に角を丸めた形状で台座を再現。
  4. スタイリング
    各要素にbox-shadowを追加して立体感を出しています。

門松

鏡餅と共にお正月の代名詞ともいえる門松も作成します。

<div class="kadomatsu">
  <!-- 竹 -->
  <div class="bamboo bamboo-left">
    <div class="cut"></div>
  </div>
  <div class="bamboo bamboo-center">
    <div class="cut"></div>
  </div>
  <div class="bamboo bamboo-right">
    <div class="cut"></div>
  </div>
  <!-- 松 -->
  <div class="pine">
    <div class="pine-branch"></div>
    <div class="pine-branch"></div>
    <div class="pine-branch"></div>
  </div>
  <!-- 装飾 -->
  <div class="decoration">
    <div class="fan"></div>
    <div class="flower"></div>
  </div>
  <!-- 台座 -->
  <div class="base"></div>
</div>
/* 門松全体 */
.kadomatsu {
  position: relative;
  width: 200px;
  height: 400px;
}

/* 竹 */
.bamboo {
  position: absolute;
  width: 40px;
  height: 200px;
  background-color: #228b22;
  border-radius: 20px;
  overflow: hidden;
}

.bamboo-left {
  left: 10px;
  bottom: 80px;
  height: 140px;
}

.bamboo-center {
  left: 80px;
  bottom: 80px;
  height: 180px;
}

.bamboo-right {
  left: 150px;
  bottom: 80px;
  height: 120px;
}

/* 竹の切り口 */
.cut {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #e0e0a8;
  clip-path: ellipse(50% 30% at 50% 0%);
}

/* 松 */
.pine {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pine-branch {
  width: 150px;
  height: 20px;
  background-color: #006400;
  border-radius: 10px;
}

/* 台座 */
.base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #8b4513;
  border-radius: 10px 10px 0 0;
}

/* 装飾（扇子） */
.decoration {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fan {
  width: 80px;
  height: 40px;
  background: linear-gradient(90deg, #ffcc00, #ff9900, #ffcc00);
  border-radius: 0 0 50% 50%;
  transform: rotate(180deg);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 装飾（花） */
.flower {
  width: 30px;
  height: 30px;
  background-color: #ff0000;
  border-radius: 50%;
  position: relative;
}

.flower::before,
.flower::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  border-radius: 50%;
}

.flower::before {
  top: -10px;
  left: 5px;
}

.flower::after {
  top: 5px;
  left: -10px;
}
  1. 竹の再現:
    • 竹は3本用意し、高さを異なるようにして配置。
    • clip-pathを使用して切り口の丸みを表現しました。
  2. 松の葉:
    • 松の葉は複数の緑色の長方形を配置して表現しました。
  3. 装飾（扇子と花）:
    • 扇子は半円形をグラデーションで表現。
    • 花は赤い円形とその周囲に小さな円形を配置して再現。
  4. 台座:
    • 台座は茶色の長方形で作成し、角を丸めて安定感を出しました。
  5. 全体のレイアウト:
    • 各要素をabsoluteで配置し、門松全体のバランスを調整。

富士山

初日の出でもおなじみの富士山も作りましょう。

<div class="mount-fuji">
  <!-- 富士山本体 -->
  <div class="mountain"></div>
  <!-- 雪の部分 -->
  <div class="snow"></div>
</div>
/* 富士山全体 */
.mount-fuji {
  position: relative;
  width: 200px;
  height: 200px;
}

/* 富士山の本体 */
.mountain {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid #2e8b57; /* 山の緑色 */
}

/* 雪の部分 */
.snow {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 50px solid #ffffff;
  clip-path: polygon(0 100%, 25% 50%, 50% 100%, 75% 50%, 100% 100%);
}
  1. 富士山本体
    .mountain はborder-left、border-right を透明にし、border-bottom に色を設定することで三角形を表現しています。
  2. 雪の部分
    .snow は三角形を作成し、clip-path を使ってギザギザした雪の形を作成しています。
    雪の形状を細かく変更する場合は、clip-path: polygon の数値を調整してください。

富士山の上部に潜らせる形でオレンジ色の円形を差し込み、富士山にかかる太陽を表現しても良いかと思います。

紅白の背景

背景に紅白の垂れ幕をイメージしたストライプを作成しましょう。
こちらはコード量も少なく簡単に再現できます。

<div class="red-white-background"></div>
/* 紅白背景 */
.red-white-background {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    #ff0000 0%,
    #ff0000 10%,
    #ffffff 10%,
    #ffffff 20%
  );
}
  1. 背景のデザイン
    repeating-linear-gradient を使用して、紅白のストライプを作成しています。
    90deg は横方向のストライプを指定しています。
    #ff0000 が赤、#ffffff が白を表します。
    0%から10%までが赤、10%から20%までが白、これを繰り返して背景全体を埋めます。
  2. ストライプの幅を調整
    10% や 20% を変更することで、ストライプの幅を調整できます。
    例: #ff0000 0%, #ff0000 15%, #ffffff 15%, #ffffff 30% とすると、幅が広がります。

おわりに

いかがでしたでしょうか。
お正月のパーツもCSSのみで簡単に作成することができます。

また、色使いとしては赤色・金色・白色を組み合わせることでお正月らしさを表現できます。
赤色に関してはシンプルな赤色の他に朱色や紅色など、よりお正月らしさをイメージできる色があるので、そちらを使用するのもおすすめです！

金色は例として下記の色にグラデーションを付けて高級感を出すのもおすすめです。

CSSでのグラデーションのかけ方やその他、高級感のあるカラーなどは以下の記事でも紹介していますので、
気になる方はぜひご参照ください！

cssCSSで高級感あるグラデーションを表現


どれも簡単に再現できるので、ぜひお試しください！

前の記事

css
【CSS JS】季節に合わせたページデザイン：クリスマス