【HTML/CSS】コピペで作る！めくれた付箋デザイン3選

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

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

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

また、付箋を作成するにはdivタグに対してCSSデザインを施します。

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

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

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

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

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

横長の付箋

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

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

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

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

単色＆影あり

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

.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);
}

先端色あり

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

.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コードを記載しています。

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

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

単色＆影あり

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

.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);
}

よくある質問（FAQ）

HTMLとCSSのコードはどこにコピペすればいいですか？

HTMLコードは、付箋を表示させたい記事の本文中（カスタムHTMLブロックなど）に貼り付け、中の文章を書き換えます。

CSSコードは、WordPressテーマの「追加CSS」や子テーマのスタイルシートに貼り付けてください。

付箋の紙の色（背景色）を自分のサイトに合わせて変更できますか？

はい、簡単に変更可能です。

CSSコード内にあるメインのbackground-color（背景色）のカラーコード（例：#fdfd96 などの黄色）をお好みの色に書き換えるだけで反映されます。

付箋の「めくれている部分（影や折れ曲がり）」の角度や大きさを調整するには？

はい、簡単に変更可能です。

CSSコード内にあるメインのbackground-color（背景色）のカラーコード（例：#fdfd96 などの黄色）をお好みの色に書き換えるだけで反映されます。

付箋の上についている「画鋲（ピン）」や「マスキングテープ」を消すことはできますか？

可能です。

画鋲やテープの装飾は主に擬似要素で作られています。

不要な場合は、CSSコード内から該当する装飾部分（テープやピンを形作っているコードブロック）を削除するか、display: none;を追記することで飾りのないシンプルな付箋になります。

付箋の中の文章が長くなると、枠から下にはみ出してしまいます。

付箋の高さ（height）が固定されていることが原因です。

CSSのheightを特定の数値（例：200px）からautoまたはmin-heightに変更し、内側の余白（padding）を適切に設定することで、文字量に合わせて自動的に付箋が縦に伸びるようになります。