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

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

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

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

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

ボックスデザインを適用したいp要素にclassを設定する

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

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

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

こうなります。

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

チューニング

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

お試し1 │ テーマに合わせたデザインにしてみる

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

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

こうすると

こうなります。

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

お試し2 │ ポップでキッチュなデザインにしてみる

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

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

こうすると

こうなります。

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