CSSで利用できる囲み枠・ボックスサンプル33選!コピペだけで利用可能!【2019年・随時更新】

CSSで利用できる囲み枠・ボックスサンプル33選!コピペだけで利用可能!【2019年・随時更新】
交互に見ながら作業をするのは意外と面倒です。モバイルで見ながら、パソコンで操作できるようにこのページのQRコードを張っています。QRリーダーで読み込んで活用してください。モバイル用URL QRコード

ここの目次

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

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

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

使い方

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

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

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

シンプルなボックス

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

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

html

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

.flame01 {
border: 1px solid #000;
margin: 2em auto;
padding: 1em;
width: 90%;/* ボックス幅 */
background-color: #fff;
}

 

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

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

 

 html

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

 
CSS

.flame02 {
margin: 2em auto;
padding: 1em;
width: 90%;/* ボックス幅 */
color: #000; /* 文字色 */
background-color: #f5f5f5; /* 背景の色 */
border: 1px solid #ccc; /* 枠線 */
}

 

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

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

html

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

.flame03 {
padding: 1em;
margin: 2em auto;
width: 90%;/* ボックス幅 */
color: #808080;
background: #f08080;/*背景色*/
}

 

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

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

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

.flame04 {
margin: 2em auto;
padding: 1em;
width: 90%;/* ボックス幅 */
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: 90%;/* ボックス幅 */
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: 90%;/* ボックス幅 */
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:90%;/* ボックス幅 */
border: double 5px #dc143c;
}

 

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

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

html

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

.flame08 {
padding: 1em;
margin: 2em auto;
color: #696969;
width:90%;/* ボックス幅 */
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: 90%;/* ボックス幅 */
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:90%;/* ボックス幅 */
color: #696969;
background: #ffffe0;
border-left: solid 15px #ff8c00;
}

 

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

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

html

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

.flame11 {
padding: 1em;
margin: 2em auto;
width:90%;/* ボックス幅 */
color: #696969;
background: #f0ffff;
border-top: solid 15px #191970;
}

 

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

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

html

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

.flame12{
padding: 1em;
margin: 2em auto;
width:90%;/* ボックス幅 */
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:90%;/* ボックス幅 */
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: 90%; /*幅の調節*/
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: 90%;/* ボックス幅 */
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: 90%; /* ボックス幅 */
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: 90%; /* ボックス幅 */
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:90%;/* ボックス幅 */
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:90%;/* ボックス幅 */
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:90%;
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: 90%;/* ボックス幅 */
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: 90%;/* ボックス幅 */
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: 90%;/* ボックス幅 */
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: 90%;/* ボックス幅 */
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: 90%;
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: 90%;
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: 90%;
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: 90%;
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: 90%;
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:90%;
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:90%;
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: 90%;
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;
}