【css】簡単コピペでできるボックスデザイン！

2020/07/01

css（スタイルシート）でボックスデザインのサンプルを作成しました。
そのまま、コピペすることで同じデザインを作成できます。デザインパターンを作成することで制作時間の短縮にも繋がります。

シンプルデザイン

パターン.１

枠が線・点線のパターンと背景を変更したパターンのボックスデザインです。

点線・背景色（グレー）

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p01{
  border: 1px dashed #c5c5c5;
  background: #f7f7f7;
  margin:20px 0;
  padding:2% 3%;
  line-height:1.8em;
  font-size:14px;
}

点線・背景色（オレンジ）

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p02{
  border: 1px dashed #e9c05f;
  background: #fcf6cc;
  margin:20px 0;
  padding:3% 3% 2% 3%;
  line-height:1.8em;
}

線・背景色（グレー）＋角丸

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p03{
  border: 2px solid #c5c5c5;
  background: #f7f7f7;
  margin:20px 0;
  padding:2% 3%;
  line-height:1.8em;
  font-size:14px;
  border-radius: 10px;
}

パターン.2

上下線・背景色（赤色）

上下の線の”solid”を”dashed”に変更すると、点線に変わります。
カラー以外にもパターンを増やすことができます。

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p04{
	border-top: solid 3px #ce7575;
	border-bottom: solid 3px #ce7575;
	background: #ffdddd;
	margin:20px 0;
	padding:2% 3%;
	color: #2c2c2f;
}

左右線・背景色（赤色）

左右の線の”solid”を”dashed”や、”double”に変更すると、点線や二重線に変わります。
カラー以外にもパターンを増やすことができます。

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p05{
	border-top: solid 3px #ce7575;
	border-bottom: solid 3px #ce7575;
	background: #ffdddd;
	margin:20px 0;
	padding:2% 3%;
	color: #2c2c2f;
}

シンプル + 文字デザイン

パターン.１

”POINT”とボックスデザイン

POINTの文字で線を囲んだデザインです。

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p10{
  border: 1px dashed #bb9a4c;
  background: #fdf7c6;
  margin:20px 0;
  padding:3% 3% 2% 3%;
  line-height:1.8em;
  position:relative;
}
.design_box_p10:before, .design_box_p10:after{
	color: #bb9a4c;
	content: "POINT";
	font-weight: bold;
	left: 1em;
	padding: 0 .4em;
	position: absolute;
	top: -12px;
	font-size: 15px;
}
.design_box_p10:before{
	text-stroke: 5px #FFF;
	-webkit-text-stroke: 5px #FFF;
}

”POINT”とボックスデザイン（パターン2）

POINTの文字で点線を囲んだデザインです。

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p11{
  border: 2px dashed #5fb3f5;
  background: #fff;
  margin:20px 0;
  padding:3% 3% 2% 3%;
  line-height:1.8em;
  position:relative;
}
.design_box_p11:before{
    color: #FFF;
	content: "POINT";
	font-weight: bold;
	left: 1em;
	padding: 0 .4em;
	position: absolute;
	top: -15px;
    background: #5fb3f5;
    text-align: center;
    letter-spacing: 0.2em;
}

”POINT”とボックスデザイン（パターン3）

ここに文字が入ります。ああああああああああああああああああああああああ

.design_box_p12{
  border: 7px double #ff68af;
  background: #fff;
  margin:20px 0;
  padding:3% 3% 2% 3%;
  line-height:1.8em;
  position:relative;
}
.design_box_p12:before{
  color: #FFF;
  content: "POINT";
  font-weight: bold;
  left: 1em;
  padding: 0 .4em;
  position: absolute;
  top: -18px;
  background: #ff68af;
  text-align: center;
  letter-spacing: 0.1em;
  border-radius: 5px;
}