ポップな付箋風リスト

  • ToDoを管理しやすい
  • デザインに馴染む
  • カジュアルな印象に
HTML
<ul class="list-sticky-note">
  <li>ToDoを管理しやすい</li>
  <li>デザインに馴染む</li>
  <li>カジュアルな印象に</li>
</ul>
CSS
.list-sticky-note {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.list-sticky-note li {
  background: #fef08a;
  padding: 14px 20px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #78350f;
  position: relative;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  transform: rotate(-1deg);
  width: fit-content;
}

.list-sticky-note li:nth-child(even) {
  transform: rotate(1.5deg);
}

🌟 有料会員限定素材を配布中!

ここでしか手に入らない特別デザイン素材を今すぐチェック!

有料会員ページを見る
目次