ラベル付き囲み枠・ボックス１０選
今回はラベル付き囲み枠に絞って１０種類紹介したいと思います。それでは１つ１つ見ていきましょう！
ここに文章
ここに文章
ここに文章
ここに文章
ここに文章
ここに文章
ここに文章
ここに文章
ここに文章
囲み枠の作り方
今回ご紹介した囲み枠の作り方について説明します。HTMLのテキストだけ変更すればいいものと、HTMLに加えてCSSの変更が必要なものがありますので、それぞれ説明していきます。
CSSの変更不要！HTML変更のみで作れる囲み枠
ここに文章
<div style="background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;">
<strong>サンプル</strong>
</div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px;">
<p>ここに文章</p>
</div>
ここに文章
<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;">
<strong>サンプル</strong>
</div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #3399ff;">
<p>ここに文章</p>
</div>
<div style="height: 0px;">
<span style="background: #ffa500; padding: 6px 10px; color: #ffffff; font-weight: bold;">サンプル</span>
</div>
<div style="padding: 30px 15px 10px; border: 2px solid #ffa500;">ここに文章</div>
CSS+HTML変更で作れる囲み枠
ここに文章
.box1 {
position: relative;
margin: 2em auto;
width:100%;
padding: 25px 10px 7px;
border: 2px solid #00419e;
}
.box1 .box-title {
position: absolute;
display: inline-block;
top: -2px; left: -2px; font-size:14px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
background: #00419e;
color: #ffffff; font-weight: bold;
}
.box1 p {
padding: 1px 5px;
margin: 0;
}
<div class="box1">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>
ここに文章
.box2 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box2 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box2 p {
margin: 0;
padding: 0;
}
<div class="box2">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>
ここに文章
.box3 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #95ccff;
border-radius: 8px;
}
.box3 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.box3 p {
margin: 0;
padding: 0;
}
<div class="box3">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>
ここに文章
.box4 {
position: relative;
margin: 2em auto;
padding: 1.2em;
width: 100%;
color: #555555;
background-color: #fff;
border: 2px solid #8FBC8F;
box-shadow: 2px 2px 1px #ccc;
}
.box4 .box-title{
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #8FBC8F;
}
.box4 p {
padding: 0px 2px;
margin: 0;
}
<div class="box4">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>
ここに文章
.box5 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #686868;
background-color: #fff;
border: 4px double #ef8b00;
box-shadow: 2px 2px 2px #ccc;
}
.box5 .box-title {
position: absolute;
padding: 0 1em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #ef8b00;
}
.box5 p {
padding: 1px 5px;
margin: 0;
}
<div class="box5">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>
ここに文章
.box6 {
margin: 2em 0;
background: #dcefff;
}
.box6 .box-title {
font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box6 p {
padding: 15px 20px;
margin: 0;
}
<div class="box6">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>
ここに文章
.box7 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box7 .box-title {
font-size: 1.2em;
background: #5fc2f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box7 p {
padding: 15px 20px;
margin: 0;
}
<div class="box7">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>
最後に
Follow me!
