サイトやブログを利用してると、文章だけで構成されているのは非常に見づらいものです。
要点や強調したいところなどを、囲み枠を利用したいと思うこともあると思います。
今回はＨＴＭＬとＣＳＳの両方のコードを記載しているので、コピペして活用してください。
使い方
”#●●●●●●”と書かれたカラーコードを変更すると、ボックスや文字色などを変更するとこができます。
ボックス幅の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;
}
曲線と直線を対角線に織り交ぜたかわいい囲み枠
２角だけが丸みを帯びたかわしい感じの囲み枠です。
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;
}
結果：コピペで使える記事ですが、更によくするためには？
コピペでCSSを使ってもらえるように記事を書いてますが、「もう少しここが変われば・・・」と思うところもあると思います。
CSSで囲み枠デザインの基本的な作り方を別記事で書きました。
CSSをどのように変更したらいいのか、プロパティがよく分からない人は参考にしてください。
「コピペで手早く作って、自分にあった囲み枠にカスタマイズする」ことで、よりよいコンテンツが出来上がると思いますよ。
