2020-06

.box3-green { position: relative; /* 配置に関するもの(ここを基準に) */ max-width:600px; /* ボックスの横幅 */ margin: 2em auto; /* ボックスの外側余白(上下:2em　左右:auto) */ padding: 1.7em 2em; /* ボックスの内側余白(上下:1.7em　左右:2em) */ border: 2px solid #58be89; /* ボックスの線 (太さ　線の種類　線の色)*/ border-radius: 4px; /* ボックスの角丸 */ } .box3-green .box-title { position: absolute; /* 配置に関するもの(ここを動かす) */ top: -10px; /* 上から（-10px）移動*/ left: 30px; /* 左から(30px)移動 */ background: #fff; /* タイトル背景色 */ color: #58be89; /* タイトル文字色 */ padding: 0 10px;/* タイトルの余白 */ line-height: 1;/* タイトルの行の高さ */ font-size: 20px;/* タイトル文字の大きさ */ font-weight: bold;/* タイトル文字の太さ */ } .box3-green p { margin: 0; /* 文字の外側余白リセット*/ padding: 0; /* 文字の内側余白リセット*/ } .box3-green { position: relative; /* 配置に関するもの(ここを基準に) */ max-width:600px; /* ボックスの横幅 */ margin: 2em auto; /* ボックスの外側余白(上下:2em　左右:auto) */ padding: 1.7em 2em; /* ボックスの内側余白(上下:1.7em　左右:2em) */ border: 2px solid #58be89; /* ボックスの線 (太さ　線の種類　線の色)*/ border-radius: 4px; /* ボックスの角丸 */ } .box3-green .box-title { position: absolute; /* 配置に関するもの(ここを動かす) */ top: -10px; /* 上から（-10px）移動*/ left: 30px; /* 左から(30px)移動 */ background: #fff; /* タイトル背景色 */ color: #58be89; /* タイトル文字色 */ padding: 0 10px;/* タイトルの余白 */ line-height: 1;/* タイトルの行の高さ */ font-size: 20px;/* タイトル文字の大きさ */ font-weight: bold;/* タイトル文字の太さ */ } .box3-green p { margin: 0; /* 文字の外側余白リセット*/ padding: 0; /* 文字の内側余白リセット*/ }