【html&css】コピペで作る！めくれた付箋デザイン3選

2026年2月25日

本記事では、カスタマイズ可能でめくれた付箋デザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

おしゃれなフリー素材デザイン集

本サイトでは、付箋以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

横長の付箋

ここでは、以下の横長の付箋デザイン例を記載しています。

横長の付箋デザイン

単色＆影あり
先端色あり

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目も付箋ページでは選択式でご用意しました。

調整項目一覧

背景色
文字色
先端の色

ご興味があれば「付箋一覧ページ」を一読ください。

Code Stock

FUSEN | Code Stock Oblong Type 横長の付箋おしゃれな付箋デザイン単色▼ おしゃれな付箋デザイン先端色あり▼ × デザイン調整 HTMLコピペ CSSコピペ完了背景色右先端の色文字色 HTMLを…

単色＆影あり

おしゃれな付箋デザイン

HTMLコード表示

<div class="fusen-1">
  おしゃれな付箋デザイン
</div>

CSSコード表示

.fusen-1 {
  display: inline-block;
  position: relative;
  padding: .5em 1.3em .5em 1em;
  background-color: #a9ceec;
  color: #333333;
}

.fusen-1::before {
  position: absolute;
  bottom: -1px;
  right: 9px;
  z-index: -1;
  transform: rotate(5deg);
  width: 70%;
  height: 50%;
  background-color: #d0d0d0;
  content: "";
  filter: blur(4px);
}

先端色あり

おしゃれな付箋デザイン

HTMLコード表示

<div class="fusen-2">
  おしゃれな付箋デザイン
</div>

CSSコード表示

.fusen-2 {
  display: inline-block;
  position: relative;
  padding: .5em 1em;
  border-right: 27px solid #2589d0;
  background-color: #f5f5f5;
  color: #333333;
}

.fusen-2::before {
  position: absolute;
  bottom: 2px;
  right: -20px;
  z-index: -1;
  transform: rotate(5deg);
  width: 100%;
  height: 50%;
  background-color: #d0d0d0;
  content: "";
  filter: blur(4px);
}

正方形の付箋

ここでは、以下の正方形の付箋デザイン例を記載しています。

正方形の付箋デザイン

単色＆影あり

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目も付箋ページでは選択式でご用意しました。

調整項目一覧

背景色
文字色

ご興味があれば「付箋一覧ページ」を一読ください。

Code Stock

単色＆影あり

おしゃれな付箋デザイン
おしゃれな付箋デザイン
おしゃれな付箋デザイン

HTMLコード表示

<div class="fusen-3">
  おしゃれな付箋デザイン<br>
  おしゃれな付箋デザイン<br>
  おしゃれな付箋デザイン
</div>

CSSコード表示

.fusen-3 {
  display: flex;
  align-items: center;
  position: relative;
  width: 250px;
  height: 250px;
  padding: 2em 2.2em;
  background-color: #a9ceec;
  color: #333333;
}

.fusen-3::before {
  position: absolute;
  bottom: -5px;
  right: 7px;
  z-index: -1;
  transform: rotate(5deg);
  width: 70%;
  height: 50%;
  background-color: #d0d0d0;
  content: "";
  filter: blur(4px);
}