CSS │ ボックスデザイン(囲み枠)を最速で実現する

TECH

2021.04.152022.12.01

当サイトには広告・アフィリエイトリンクが含まれる場合があります。

WordPressで記事を書いていると、

こういうボックスデザイン(囲み枠)

を使いたくなるシーンがあります。これを最速で実現します。

ボックスデザイン用のstyleを定義する

WordPressの場合、[外観]→[カスタマイズ]から[追加CSS]を選択し、下記CSSを追加します。

.box {
  padding: 1em 1em;
  margin: 2em 0;
  color: #d32374;
  background: #FFDFEF;
}

ボックスデザインを適用した箇所で「HTMLで編集」し、p要素のclass属性に”box”という文字列を指定します。

この”box”という文字列は上のCSSで定義した”.box”のドット(.)の後ろと同じ文字列です。

例えば、下記のように編集すると

こうなります。

ボックスデザインの実現方法については、以上になります。

ここからはただのチューニングです。

上記デザインでも良かったのですが、このサイトで使っているテーマに合わせたボックスデザインも作ってみました。

.box {
  padding: 1em 1em;
  margin: 2em 0;
  color: #d32374;
  background: #FFDFEF;
  border-left: solid 5px #d32374;
}

こうすると

こうなります。

左側にこのテーマでよく使われている太い線がキーカラーで入るようになりました。

「ポップでキッチュ」の意味が分かってませんが、キーカラーの波線で囲ったバージョンも作ってみました。

.box {
  padding: 1em 1em;
  margin: 2em 0;
  color: #d32374;
  border: dashed 2px #d32374;
}

こうすると

こうなります。

これはこれでよく見かけるデザインかなと思います。