コピペでできるキャプションボックスのデザイン一覧[HTML/CSS]
目次
キャプションボックスのデザイン一覧
シンプル
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-1">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-1 {
padding: 1em;
border: solid 3px #0dcaf0;
}
角丸
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-2">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-2 {
padding: 1em;
border: solid 3px #0dcaf0;
border-radius: 20px;
}
点線
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-3">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-3 {
padding: 1em;
border: dotted 3px #0dcaf0;
}
破線
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-4">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-4 {
padding: 1em;
border: dashed 3px #0dcaf0;
}
二重線
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-5">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-5 {
padding: 1em;
border: double 3px #0dcaf0;
}
帯(左右)
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-6">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-6 {
padding: 1em;
border-left: solid 3px #0dcaf0;
border-right: solid 3px #0dcaf0;
background: #313333;
}
帯(上下)
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-7">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-7 {
padding: 1em;
border-top: solid 3px #0dcaf0;
border-bottom: solid 3px #0dcaf0;
background: #313333;
}
塗り潰し
これはサンプルです。
これはサンプルです。
これはサンプルです。
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-8 {
padding: 1em;
background: #313333;
}
シャドウ
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-9">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-9 {
padding: 1em;
border: solid 3px #0dcaf0;
box-shadow: 3px 3px blue;
}
方眼
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-10">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-10 {
padding: 1em;
border: solid 3px #0dcaf0;
box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 3px -2px rgb(0 0 0 / 1%);
background-image: linear-gradient(transparent calc(100% - 1px), #e6edf3 50%, #e6edf3), linear-gradient(90deg, transparent calc(100% - 1px), #e6edf3 50%, #e6edf3);
background-size: 15px 15px;
background-repeat: repeat;
background-color: #ffffff;
}
みずたま
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-11">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-11 {
padding: 1em;
border: solid 3px #0dcaf0;
background-image:
radial-gradient(#313333 30%, transparent 30%);
background-size: 20px 20px;
}
チェック
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-12">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-12 {
padding: 1em;
border: solid 3px #0dcaf0;
background-image: linear-gradient(90deg, #5ba9f712 25%, transparent 25%, transparent 50%, #5ba9f712 50%, #5ba9f712 75%, transparent 75%, transparent), linear-gradient(-180deg, #5ba9f712 25%, transparent 25%, transparent 50%, #5ba9f712 50%, #5ba9f712 75%, transparent 75%, transparent);
background-color: #5ba9f70d;
background-size: 20px 20px;
}
ステッチ
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-13">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-13 {
padding: 1em;
background: #313333;
box-shadow: 0px 0px 0px 5px #313333;
border: dashed 3px #00ffff;
}
ストライプ
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-14">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-14 {
padding: 1em;
background-image: repeating-linear-gradient(-45deg, #313333, #313333 2px, transparent 2px, #fff 6px);
}
グラデーション
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-15">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-15 {
padding: 1em;
background: -webkit-linear-gradient(to right, #0d6efd, transparent);
background: linear-gradient(to right, #0d6efd, transparent);
}
括弧(大)
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-16">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-16 {
padding: 2em;
}
.t8-capbox-16:before, .t8-capbox-16:after{
position: absolute;
top: 0;
content:'';
width: 10px;
height: 100%;
display: inline-block;
box-sizing: border-box;
}
.t8-capbox-16:before{
border-left: solid 5px #15adc1;
border-top: solid 5px #15adc1;
border-bottom: solid 5px #15adc1;
left: 0;
}
.t8-capbox-16:after{
border-top: solid 5px #15adc1;
border-right: solid 5px #15adc1;
border-bottom: solid 5px #15adc1;
right: 0;
}
括弧(かぎ)
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-17">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-17 {
padding: 2em;
}
.t8-capbox-17:before,.t8-capbox-17:after{
content:'';
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}
.t8-capbox-17:before{
border-left: solid 5px #0dcaf0;
border-top: solid 5px #0dcaf0;
top:0;
left: 0;
}
.t8-capbox-17:after{
border-right: solid 5px #0dcaf0;
border-bottom: solid 5px #0dcaf0;
bottom:0;
right: 0;
}
吹き出し(考えごと)
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-18">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-18 {
color: #fff;
font-size:1em;
position: relative;
padding:0.5em;
margin-left: 50px;
background: #0d6efd;
border-radius: 20px;
}
.t8-capbox-18:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
font-weight: 900;
position: absolute;
font-size: 15px;
left: -50px;
bottom: 0;
color: #0d6efd;
}
.t8-capbox-18:after {
font-family: "Font Awesome 5 Free";
content: "\f111";
font-weight: 900;
position: absolute;
font-size: 25px;
left: -30px;
bottom: 0;
color: #0d6efd;
}
吹き出し(コメント)
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-19">
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capbox-19 {
padding: 1em;
border: solid 3px #0dcaf0;
border-radius: 20px;
}
.t8-capbox-19:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e6f4ff;
width: 0;
height: 0;
}
内側タイトル
タイトル
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capboc-20">
<span>タイトル</span>
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capboc-20 {
padding: 2em;
border: solid 3px #0dcaf0;
}
.t8-capboc-20 span {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 10px;
height: 25px;
line-height: 25px;
font-size: 1em;
background: blue;
}
外側タイトル
タイトル
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capboc-21">
<span>タイトル</span>
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capboc-21 {
padding: 1em;
border: solid 3px #0dcaf0;
}
.t8-capboc-21 span{
position: absolute;
display: inline-block;
top: -20px;
left: -3px;
padding: 0 10px;
height: 25px;
line-height: 25px;
font-size: 1em;
background: blue;
border-radius: 5px 5px 0 0;
}
挿入タイトル
タイトル
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capboc-22">
<span>タイトル</span>
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capboc-22 {
padding: 1em;
border: solid 3px #0dcaf0;
}
.t8-capboc-22 span {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 10px;
line-height: 1;
font-size: 1em;
font-weight: bold;
background: #FFF;
}
上部タイトル
タイトル
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capbox-23">
<span>タイトル</span>
<p>これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。</p>
</div>
.t8-capbox-23 {
margin: 0 auto;
border: 2px solid #0dcaf0;
border-radius: 3px;
}
.t8-capbox-23 span {
display: flex;
justify-content: center;
align-items: center;
padding: .5em 0;
background-color: #0dcaf0;
color: #fff;
font-weight: 600;
}
.t8-capbox-23 p {
margin: 0;
padding: 1em 1.5em;
color: #333;
}
側部タイトル
タイトル
これはサンプルです。
これはサンプルです。
これはサンプルです。
<div class="t8-capboc-24">
<span>タイトル</span>
これはサンプルです。</br>
これはサンプルです。</br>
これはサンプルです。
</div>
.t8-capboc-24 {
display: flex;
grid-gap: 1em;
padding: 2em;
border: solid 3px #0dcaf0;
}
.t8-capboc-24 span {
margin: 0;
padding: 0 1em 0 1em;
border-right: 1px solid #0dcaf0;
}