CSSで利用できる囲み枠・ボックスサンプル33選!コピペだけで利用可能!

CSS

サイトやブログを利用してると、文章だけで構成されているのは非常に見づらいものです。

要点や強調したいところなどを、ボックスを利用したいと思うこともあると思います。

今回はHTMLとCSSの両方のコードを記載しているので、コピペして活用してください。

目次

使い方

「コードの表示はこちらをクリック」をクリックすると、コードが表示されるので、コピペして利用することが可能です。

”#●●●●●●”と書かれたカラーコードを変更すると、ボックスや文字色などを変更するとこができます。

ボックス幅のwidthを100%にすると、カラムいっぱいに広がりますが、お好みのボックス幅にしたい場合はパーセントを変更してください。

シンプルなボックス

黒ラインのシンプルでオーソドックスなボックス

 

黒のラインのシンプルな枠線ですが、基本中の基本です。わざわざ使うまでもないかもしれません。

 

html

<div class="flame01">
<p>ここに文章</p>
</div>

 

CSS

.flame01 {
border: 1px solid #000;
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #fff;
}

 

背景色のあるシンプルでオーソドックスなボックス

 

  背景色のあるシンプルでオーソドックスなボックスです。

 

 html

<div class="flame02">
<p>ここに文章</p>
</div>

 

CSS

.flame02 {
margin: 2em auto;
padding: 1em;
width: 100%;
color: #000;
background-color: #f5f5f5;
border: 1px solid #ccc;
}

 

背景色だけのシンプルなボックス

 

背景色だけのシンプルなボックス。背景色は好みで変えてください

 

html

<div class="flame03">
<p>ここに文章</p>
</div>

 

CSS

.flame03 {
padding: 1em;
margin: 2em auto;
width: 100%;
color: #808080;
background: #f08080;
}

 

影が付いた立体感のあるシンプルなボックス

 

影が付いた立体感のあるシンプルなボックスです。

 

html

<div class="flame04">
<p>ここに文章</p>
</div>

 

CSS

.flame04 {
margin: 2em auto;
padding: 1em;
width: 100%;
border: 1px solid #a9a9a9;
background-color: #fff;
box-shadow: 1.5px 1.5px 2px #696969;
}

 

上下にだけ線があるボックス

 

上下にだけ線があるボックスです。反対色でまとめても可愛いかもです。

 

html

<div class="flame05">
<p>ここに文章</p>
</div>

 

CSS

.flame05 {
padding: 10px 20px;
margin: 2em auto;
color: #000;
width: 100%;
background: #f0e68c;
border-top: solid 5px #ffa500;
border-bottom: solid 5px #ffa500;
}

 
 

左右にだけ線があるボックス

 

上下にだけ線があるボックスです。こちらも反対色でまとめても可愛いかもです。

html

<div class="flame06">
<p>ここに文章</p>
</div>

 

CSS

.flame06 {
padding: 10px 20px;
margin: 2em auto;
color: #000;
width: 100%;
background: #f0e68c;
border-left: solid 8px #ffa500;
border-right: solid 8px #ffa500;
}

 

ボックスの線二重線のボックス

 

ボックスの線二重線のボックスです。

 

html

<div class="flame07">
<p>ここに文章</p>
</div>

 

CSS

.flame07 {
padding: 1em;
margin: 2em auto;
width:100%;
border: double 5px #dc143c;
}

 

左右だけ二重線のボックス

 

左右だけ二重線のボックスです。

 

html

<div class="flame08">
<p>ここに文章</p>
</div>

 

CSS

.flame08 {
padding: 1em;
margin: 2em auto;
color: #696969;
width:100%;
background: #fffafa;
border-left: double 8px #20b2aa;
border-right: double 8px #20b2aa;
}

 

全体的に淡い感じの影があるボックス

 

全体的に淡い感じの影があるボックスです。

 

html

<div class="flame09">
<p>ここに文章</p>
</div>

 

CSS

.flame09 {
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #ffefd5;
box-shadow: 0 0 5px 1.5px #a9a9a9;
}

 

付箋風のボックス

 

付箋風のボックスです。背景色やラインの色を変えるとポップな感じにもなります。

 

html

<div class="flame10">
<p>ここに文章</p>
</div>

 

CSS

.flame10 {
padding: 1em;
margin: 2em auto;
width:100%;
color: #696969;
background: #ffffe0;
border-left: solid 15px #ff8c00;
}

 
 

メモ風のかわいいボックス

 

メモ風のボックスです。背景色やラインの色を変えるとポップな感じにもなります。

 

html

<div class="flame11">
<p>ここに文章</p>
</div>

 

CSS

.flame11 {
padding: 1em;
margin: 2em auto;
width:100%;
color: #696969;
background: #f0ffff;
border-top: solid 15px #191970;
}

 

影をつけたメモ風のボックス

 

影をつけたメモ風のボックスです。背景色やラインの色を変えるとポップな感じにもなります。

 

html

<div class="flame12">
<p>ここに文章</p>
</div>

 

CSS

.flame12{
padding: 1em;
margin: 2em auto;
width:100%;
color: #696969;
background: #ffffe0;
border-top: solid 15px #ff8c00;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}

 

スマートでシンプルな陰のあるボックス

 

スマートでシンプルな陰のあるボックスです。背景色やラインの色を変えるとポップな感じにもなります。

 

html

<div class="flame13">
<p>ここに文章</p>
</div>

 

CSS

.flame13{
padding: 1em;
margin: 2em auto;
color: #60688c;
width:100%;
background: #fff;
border-top: solid 5px #4682b4;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}

 

丸角でシンプルなボックス

 

丸角でシンプルなボックスです。

 

html

<div class="flame14">
<p>ここに文章</p>
</div>

 

CSS

.flame14{
margin: 2em auto;
padding: 1em;
width: 100%;
color: #606060;
background-color: #faf0e6;
border: 2px solid #deb887;
border-radius: 10px;
}

 

丸角に影がある立体的なボックス

 

丸角に影がある立体的なボックスです。

 

html

<div class="flame15">
<p>ここに文章</p>
</div>

 

CSS

.flame15{
margin: 2em auto;
padding: 1em;
width: 100%;
color: #606060;
border: 2px solid #a3703e;
background-color: #fff;
box-shadow: -2px 5px 5px #ceb4a5;
border-radius: 15px;
}

 

全体的に淡い感じのふわっとした丸角ボックス

 

全体的に淡い感じのふわっとした丸角ボックスです。

 

html

<div class="flame16">
<p>ここに文章</p>
</div>

 

CSS

.flame16{
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #ffceb2;
color: #606060;
box-shadow: 0 0 5px 1px #b2b2b2;
border-radius: 10px;
}

 

曲線と直線を対角線に織り交ぜたかわいいボックス

 

2角だけが丸みを帯びたかわしい感じのボックスです。

 

html

<div class="flame32">
<p>ここに文章</p>
</div>

 

CSS

.flame32{
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #ffc0cb;
color: #606060;
box-shadow: 0 0 5px 1px #b2b2b2;
border-left:10px solid #fffacd;
border-radius: 0 50px 0 50px;
}
.flame32 p {
padding: 15px 20px;
margin: 0;
text-align:center;
}

 

立体的なボックス

 

立体的でシンプルなボックス

 

立体的でシンプルなボックスです。

 

html

<div class="flame17">
<p>ここに文章</p>
</div>

 

CSS

.flame17{
padding: 1em;
margin: 2em auto;
width:100%;
color: #606060;
background: #ffbcbc;
border-bottom: solid 5px #ce3d3d;
border-radius: 10px;
}

 

影でボックスを浮かせる立体的なボックス

 

影でボックスを浮かせる立体的なボックスです。

 

html

<div class="flame18">
<p>ここに文章</p>
</div>

 

CSS

.flame18 {
padding: 1em;
margin: 2em auto;
width:100%;
color: #595959;
background: #fff;
border-bottom: solid 5px #9b0000;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

 

影がついて内側に凹んだようにみえるボックス

 

タイトル帯が上部いっぱいに広がった影がついたボックスです。

 

html

<div class="flame31">
<p>ここに文章</p>
</div>

 

CSS

.flame31 {
margin: 2em auto;
background: #ffbaba;
border:3px solid #ff004c;
width:100%;
box-shadow:6px 5px 8px -1px #db1c1c inset;
}
.flame31 p {
padding: 15px 20px;
margin: 0;
}

 

破線で囲んだボックス

破線で囲んだシンプルなボックス

 

破線で囲んだシンプルなボックスです。

 

html

<div class="flame19">
<p>ここに文章</p>
</div>

 

CSS

.flame19 {
margin: 2em auto;
padding: 1em;
width: 100%;
border: 3px dashed #000000;
color: #000000;
background-color: #fff;
border-radius: 1px;
}

 

ポップに見えるドット線のボックス

 

ポップに見えるドット線のボックスです。

 

html

<div class="flame20">
<p>ここに文章</p>
</div>

 

CSS

.flame20 {
margin: 2em auto;
padding: 1em;
width: 100%;
border: 5px dotted #0161af;
background-color: #fff;
border-radius: 1px;
}

 

布の縫製風のかわいいボックス

 

布の縫製風のかわいいボックスです。

 

html

<div class="flame21">
<p>ここに文章</p>
</div>

 

CSS

.flame21{
padding: 1em;
margin: 2em auto;
width: 100%;
background: #ffae4c;
box-shadow: 0px 0px 0px 10px #ffae4c;
border: 2px dashed #fff;
}

 
 

丸角の布の縫製風のかわいいボックス

 

丸角の布の縫製風のかわいいボックスです。

 

html

<div class="flame22">
<p>ここに文章</p>
</div>

 

CSS

.flame22{
padding: 1em;
margin: 2em auto;
width: 100%;
color: #565656;
background: #99ffca;
box-shadow: 0px 0px 0px 10px #99ffca;
border: 2px dashed #009e4b;
border-radius: 5px;
}

 

見出しやタイトルがついたボックス

枠の線上にタイトルをつけたボックス

 

お知らせ枠の線上にタイトルをつけたボックスです。

 

html

<div class="flame23">
<span class="flame23-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

CSS

.flame23 {
position: relative;
margin: 2em auto;
width: 100%;
padding: 1em;
border: 3px solid #b20023;
border-radius: 8px;
}
.flame23 .flame23-title {
position: absolute;
display: inline-block;
top: -13px;
left: 15px;
padding: 0 10px;
line-height: 1;
font-size: 18px;
background: #FFF;
color: #b20023;
font-weight: bold;
}
.flame23 p {
padding: 15px 20px;
margin: 0;
}

 

タグタイトルをつけたボックス

 

お知らせタグタイトルをつけたボックスです。

 

html

<div class="flame24">
<span class="flame24-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

CSS

.flame24 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
border: solid 3px #4a41ad;
}
.flame24 .flame24-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #4a41ad;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.flame24 p {
padding: 15px 20px;
margin: 0;
}

 

タイトルをつけた影があるボックス

 

お知らせタイトルをつけた影があるボックスです。

 

html

<div class="flame25">
<span class="flame25-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

CSS

.flame25 {
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;
}
.flame25 .flame25-title{
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #8FBC8F;
}
.flame25 p {
padding: 15px 20px;
margin: 0;
}

 
 

タイトルをつけて線だけに影があるボックス

 

お知らせタイトルをつけて線だけに影があるボックスです。

 

html

<div class="flame26">
<span class="flame26-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

CSS

.flame26 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #555555;
background-color: #fff;
border: 3px solid #dc143c;
box-shadow: 0 0 5px 2px #ffcccc inset;
}
.flame26 .flame26-title {
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #dc143c;
}
.flame26 p {
padding: 15px 20px;
margin: 0;
}

 

タイトルを二重線があるボックス

 

お知らせタイトルを二重線があるボックスです。

 

html

<div class="flame27">
<span class="flame27-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

CSS

.flame27 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #686868;
background-color: #fff;
border: 4px double #ef8b00;
box-shadow: 2px 2px 2px #ccc;
}
.flame27 .flame27-title {
position: absolute;
padding: 0 1em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #ef8b00;
}
.flame27 p {
padding: 15px 20px;
margin: 0;
}

 

タイトルがボックス内にあるボックス

 

お知らせタイトルがボックス内にあるボックスです。

 

html

<div class="flame28">
<span class="flame28-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

CSS

.flame28 {
position: relative;
margin: 2em auto;
width:100%;
padding: 25px 10px 7px;
border: 2px solid #00419e;
}
.flame28 .flame28-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;
}
.flame28 p {
padding: 15px 20px;
margin: 0;
}

 

タイトル帯が上部いっぱいに広がったボックス

 

お知らせ

タイトル帯が上部いっぱいに広がったボックスです。

 

html

<div class="flame29">
<div class="flame29-title">ここにタイトル</div>
<p>ここに文章</p>
</div>

 

CSS

.flame29 {
margin: 2em 0;
background: #ffdddd;
}
.flame29 .flame29-title {
font-size: 1.2em;
background: #a80000;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.flame29 p {
padding: 15px 20px;
margin: 0;
}

 

タイトル帯が上部いっぱいに広がった影がついたボックス

 

お知らせ

タイトル帯が上部いっぱいに広がった影がついたボックスです。

 

html

<div class="flame30">
<div class="flame30-title">ここにタイトル</div>
<p>ここに文章</p>
</div>

 

CSS

.flame30 {
margin: 2em auto;
background: #e5f8ff;
width:100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.flame30 .flame30-title {
font-size: 1.2em;
background: #5e5e5e;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.1em;
}
.flame30 p {
padding: 15px 20px;
margin: 0;
}

 

タイトル表記の幅が広くてポップなボックス

 

お知らせタイトル表記の幅が広くてポップなボックスです。

 

html

<div class="flame33">
<span class="flame33-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

CSS

.flame33 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #686868;
background-color: #fff;
border: 4px double #20b297;
box-shadow: 2px 2px 2px #ccc;
}
.flame33 .flame33-title {
position: absolute;
display: block;
text-align:center;
top: -15px;
font-weight: bold;
width: 50%;
background-color: #20b297;
color: #fff;
}
.flame33 p {
margin: 0;
}

 

最新情報をチェック‼