【css】簡単コピペでできるボックスデザイン!
2020/07/01

css(スタイルシート)でボックスデザインのサンプルを作成しました。
そのまま、コピペすることで同じデザインを作成できます。デザインパターンを作成することで制作時間の短縮にも繋がります。
シンプルデザイン
パターン.1
枠が線・点線のパターンと背景を変更したパターンのボックスデザインです。
点線・背景色(グレー)
ここに文字が入ります。ああああああああああああああああああああああああ
.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; }
シンプル + 文字デザイン
パターン.1
”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; }
おさらい
デザインパターンをいくつか作成していると制作時間の短縮になり気持ちに余裕ができます。いろんなパターンを作成してみてください。