【CSS】布地風ボックスをCSSで作ってみる！

今回は、布地風ボックスをCSSで作る方法を紹介したいと思います。

まずはベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきたいと思います。

目次

ベースコード

早速ですが、布地風のボックスは以下のようなCSSで実現することができます。

.box.cloth {
  padding: 0.3rem 0.6rem;
  margin: 1.5rem 0;
  background: #a6c3e5;
  box-shadow: 0 0 0 8px #a6c3e5;
  border: 1.8px dashed #f1f1f1;
}
.box.cloth p {
  margin: 0;
  padding: 0;
}

使い方

以下のようにスタイルを適用したいHTMLタグにboxとclothクラスを設定すると、布地風のボックスデザインが適用されます。

<div class="box cloth"><p>sample text</p></div>

実際に適用されると、以下のような感じに表示されます。

sample text

カスタムパターン

背景を赤系にしてみる

まずは、背景を赤系統の色にカスタムしてみます。

ベースコードに、以下のようなCSSコードを追加します。

.box.cloth.red {
  background: #e5a6a6;
  box-shadow: 0 0 0 8px #e5a6a6;
}

backgroundとbox-shadowの色指定部分を赤系統の色に変更しています。

先ほどのdivタグも調整して、redクラスを追加します。

<div class="box cloth red"><p>sample text</p></div>

表示は以下のような感じになります。

sample text

角丸表示にしてみる

角丸表示にする場合は、以下のようなCSSを追加してください。

.box.cloth.rounded {
  border-radius: 5px;
}

border-radiusの設定を追加しています。

青バージョン

角丸表示を適用するために、roundedクラスを追加します。

<div class="box cloth rounded"><p>sample text</p></div>

表示は以下のような感じになります。

sample text

赤バージョン

roundedとredクラスの両方を指定すれば、角丸表示と赤系背景が両方適用されます。

<div class="box cloth rounded red"><p>sample text</p></div>

表示は、以下の通りです。

sample text

丸みマシマシバージョン

最後に、border-radiusを調整して、丸みマシマシバージョンを作ってみます。

以下のような、CSSコードを追加してください。

.box.cloth.rounded-2 {
  border-radius: 20px;
}

divタグにrounded-2クラスを追加します。

<div class="box cloth rounded-2"><p>sample text</p></div>

丸みマシマシバージョンの表示は以下のような感じになります。

sample text

まとめ

シンプルなコードなので、カスタムも簡単です。

色や角丸以外にも簡単にカスタムできるので、いろいろいじって遊んでみてください。