CSSでステッチ風デザインにする

CSSを使ってステッチ（縫い目）のようなデザインにする方法を紹介します。デザインといってもborderプロパティを利用してステッチ風に見せるだけの簡単な表現となっていますので、難しいことはありません。

ステッチの作り方

ステッチ風に見せる際にポイントとなるのは、ボーダーで縫い目を表現し、box-shadowプロパティを使って外枠を作ることです。

.stitch {
  border: 2px dashed #f7d4ec;
  box-shadow: 0 0 0 8px #f298d8;
  padding: 15px;
  background: #f298d8;
  border-radius: 10px;
  color: #fff;
}

縫い目はborderプロパティで「dashed」を指定すれば表現できます。太さはお好みで調整してください。そして、box-shadowプロパティで4番目の値を指定することで外側の四方向に影をつけることができます。これを利用して背景色と同じ色の影を作ることで余白っぽくすることができます。あとはボックスに丸みをつけたりするとかわいい感じのステッチにしたりできます。

以上が、CSSを使ってステッチ風にデザインする方法となります。