HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
ブログ執筆がはかどる*便利なサイト&ツール
旧ブログはこちらから
はてなブログ

HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン

2019/10/25

ブログ


HTMLやCSSの知識がなくても、コピペで使える囲み枠デザインをご紹介します。(随時更新しています♪)

ここで紹介する囲み枠は、記事の作成画面にコードをコピペするだけでOKなので、初心者にも簡単です。 ぜひ、ご活用ください♪


コードを貼り付ける前には必ず記事の編集画面を「HTML表示」のモードにしてくださいね。

HTML表示に切り替えてからコードをコピペします。



※はてなブログの場合は、編集モードを「はてな記法モード」「Markdownモード」にしてください。(編集モードは「基本設定」から変更できます)


*カラーコードを調べて、お好きな色の囲み枠を作ってみてくださいね♪



*文字サイズの変更や、文字の長さにあわせて囲み枠の大きさを調整したいときは、「7 HTMLのみ*囲み枠デザイン 使い方まとめ」を見てください。



*おしらせ* (★2022/9/23更新) 6.1枠線の吹き出し風囲み枠に「文字数に合わせてサイズを変更するコード」を追加しました。
6.3上下向き背景色の吹き出し風囲み枠に「上向きのコード3種類」を追加しました。




HTMLのみ*シンプルな囲み枠デザイン

シンプル囲み枠 

ここに本文を入れます♪

HTML
<div style="border: #ffb6c1 solid 1px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

背景色のみ囲み枠

ここに本文を入れます♪

HTML
<div style="background: #fceff2; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

ふんわりぼかし囲み枠

ここに本文を入れます♪

HTML
<div style="background: #fceff2; box-shadow: #fceff2 0 0 10px 10px; margin:10px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

グレー影付き囲み枠

ここに本文を入れます♪

HTML
<div style="background: #fff; border: 1px #ccc solid; box-shadow: 0 2px 3px 0 #ddd; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

2重囲み枠

ここに本文を入れます♪

HTML
<div style="border: 4px double #ff6699;font-size: 100%; padding: 20px;"> ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

2重囲み枠(角丸)

ここに本文を入れます♪

HTML
<div style="border-radius: 10px; border: 4px double #ff6699; font-size: 100%; padding: 20px;"> ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

2重囲み枠+背景色

ここに本文を入れます♪

HTML
<div style="background-color: #fceff2; border: 4px double #ff6699; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

点線囲み枠

ここに本文を入れます♪

HTML
<div style="border-radius: 1px; border: 4px dotted #ffb6c1; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

破線囲み枠

ここに本文を入れます♪

HTML
<div style="border-radius: 5px; border: 1px dashed #ffb6c1;font-size: 100%; padding: 20px;"> ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

*上記のコードでborder: 1px dashed #ffb6c1;の部分の1pxを3pxに変えるとこうなります。↓
ここに本文を入れます♪

破線+背景色囲み枠


ここに本文を入れます♪

HTML
<div style="background-color: #fceff2; border-radius: 5px; border: 1px dashed #ffb6c1;font-size: 100%; padding: 20px;"> ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

ふせん風囲み枠

ここに本文を入れます♪

HTML
<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

太線囲み枠

ここに本文を入れます♪

HTML
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: #ff6699 solid 3px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。


HTMLのみ*タイトル付き囲み枠デザイン

タイトル付き囲み枠デザイン①

タイトルここに本文を入れます♪

HTML
<fieldset style="border: 1px solid #ff6699; font-size: 100%;padding: 20px;">
<legend>タイトル</legend>ここに本文を入れます♪</fieldset>
↑この部分をコピペして使ってください。

*上記のコードで1pxの数字を 5pxに変えると、このように枠線を太くすることができます。
タイトルここに本文を入れます♪

タイトル付き囲み枠デザイン②

*タイトル
ここに本文を入れます♪

HTML
<div style="background: #ffb6c1; border: 1px solid #ffb6c1; padding-left: 20px;"> <span style="color: white;">*タイトル</span></div> <div style="border: 1px solid #ffb6c1; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

タイトル付き囲み枠デザイン③

*タイトル
ここに本文を入れます♪

HTML
<div style="margin:0em ;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#ffffff;background:#ffc0c0;font-weight:bold;text-align:center;border-radius:5px 5px 0 0;">*タイトル</div><div style="background:rgba(255,255,255,0);border:solid 3px #ffc0c0;border-radius:0 5px 5px;padding:20px;font-size: 100%;">ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

HTMLのみ*おしゃれな囲み枠デザイン

背景色+白枠囲み枠

ここに本文を入れます♪

HTML
<div style=" border: 4px solid #ffe6ee; padding: 2px;"><div style=" background: #ffe6ee; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div></div>
↑この部分をコピペして使ってください。

背景色+白枠囲み枠(角丸)

ここに本文を入れます♪

HTML
<div style=" border: 4px solid #fdeff2; padding: 2px;border-radius:10px "><div style=" background: #fdeff2;border-radius:10px;font-size: 100%; padding: 20px;">ここに本文を入れます♪</div></div>
↑この部分をコピペして使ってください。

カラー+白文字囲み枠

ここに本文をいれます♪

HTML
<fieldset style="background:#f98289; border:4px double #ffffff; border-radius:10px;font-size: 100%; padding: 20px;"><span style="color:#ffffff;">
ここに本文を入れます♪</span></fieldset>
↑この部分をコピペして使ってください。

ステッチ風囲み枠

ここに本文を入れます♪

HTML
<div style=" background: #ffe6e8; padding: 20px; border: 2px dashed #ffb6c1; box-shadow: 0 0 0 5px #ffe6e8; -moz-box-shadow: 0 0 0 5px #ffe6e8; -webkit-box-shadow: 0 0 0 5px #ffe6e8; font-size: 100%;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

ステッチ風(角丸影付き)囲み枠

ここに本文を入れます♪

HTML
<div style=" color: white; background: #f98289; padding: 20px; border: 2px dashed rgba(255 , 255 , 255 , 0.5);-moz-border-radius: 6px; -moz-box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); -webkit-border-radius: 6px; -webkit-box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); border-radius: 6px; box-shadow: 0 0 0 5px #f98289 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); font-size: 100%; "> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

グラデーション+立体風囲み枠

ここに本文を入れます♪

HTML
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

HTMLのみ*背景色+ドット囲み枠デザイン

濃いピンクのドット囲み枠

ここに本文を入れます♪

HTML
<div style="background: #fceff2; background-image: radial-gradient(#ffc0cb 10%, transparent 20%), radial-gradient(#ffc0cb 10%, transparent 20%); background-size: 20px 20px;  background-position: 0 0, 10px 10px;   font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

薄いピンクのドット囲み枠

ここに本文を入れます♪

HTML
<div style="background: #fceff2; background-image: radial-gradient(#fce3e9 10%, transparent 20%), radial-gradient(#fce3e9 10%, transparent 20%); background-size: 20px 20px;  background-position: 0 0, 10px 10px;   font-size: 100%; padding: 20px;"> ここに本文を入れます♪  </div>
↑この部分をコピペして使ってください。

白いドット囲み枠

ここに本文を入れます♪

HTML
<div style="background: #ffe6ea; background-image: radial-gradient(#fff 10%, transparent 20%), radial-gradient(#fff 10%, transparent 20%); background-size: 20px 20px;  background-position: 0 0, 10px 10px;   font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

白いドット囲み枠(小)

ここに本文を入れます♪

HTML
<div style="background: #ffccd5; background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%); background-size: 20px 20px;  background-position: 0 0, 10px 10px;   font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

白いドット囲み枠(大)

ここに本文を入れます♪

HTML
<div style="background: #ffe6ea; background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px;   font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

ふんわりした白いドット囲み枠(大)

ここに本文を入れます♪

HTML
<div style="background: #fceff2; background-image: radial-gradient(#fff 10%, transparent 30%), radial-gradient(#fff 10%, transparent 30%); background-size: 20px 20px;  background-position: 0 0, 10px 10px;   font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

HTMLのみ*斜めストライプ囲み枠デザイン

太目斜めストライプ囲み枠

ここに本文を入れます♪

HTML
<div style="background-image: linear-gradient( -45deg, #fff9fc 25%,  #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 30px 30px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

中太斜めストライプ囲み枠

ここに本文を入れます♪

HTML
<div style="background-image: linear-gradient( -45deg, #fff9fc 25%,  #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 20px 20px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

細目斜めストライプ囲み枠

ここに本文を入れます♪

HTML
<div style="background-image: linear-gradient( -45deg, #fff9fc 25%,  #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 10px 10px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

極細斜めストライプ囲み枠

ここに本文を入れます♪

HTML
<div style="background-image: linear-gradient( -45deg, #fff 25%,  #ffe5f2 25%,#ffe5f2 50%, #fff 50%, #fff 75%, #ffe5f2 75%, #ffe5f2 );
background-size: 5px 5px; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
↑この部分をコピペして使ってください。

吹き出し風囲み枠

*ご注意* (★2022/2/21更新) はてなブログの場合は、編集モードを「はてな記法モード」「Markdownモード」にしてください。
※見たままモードでは上手く表示されません。
(編集モードは「基本設定」から変更できます)

枠線の吹き出し風囲み枠

*左向き
ここに本文を入れます♪
HTML
<div style="position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #ccc; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #ccc; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに本文を入れます♪<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>
↑この部分をコピペして使ってください。

*左向き(文字数に合わせてサイズを変更) ★new
ここに本文を入れます♪

HTML
<div style="display:inline-block; position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #ccc; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #ccc; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに本文を入れます♪<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>
↑この部分をコピペして使ってください。

*右向き
ここに本文を入れます♪

HTML
<div style=" display:inline-block; margin: 1em 0 1em ; position: relative; border-radius: 10px; border: 2px solid #ccc; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; right: -15px; top: 20px; border-left: 15px solid #ccc; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに本文を入れます♪<span style="position: absolute; display: block; right: -12px; top: 20px; border-left: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>
↑この部分をコピペして使ってください。

*右向き中央寄せ
ここに本文を入れます♪
HTML
<div align= "center"> <div style="display:inline-block; margin: 1em 0 1em ; position: relative; border-radius: 10px; border: 2px solid #ccc; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; right: -15px; top: 20px; border-left: 15px solid #ccc; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに本文を入れます♪<span style="position: absolute; display: block; right: -12px; top: 20px; border-left: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div></div>
↑この部分をコピペして使ってください。

*右向き右寄せ
ここに本文を入れます♪
HTML
<div align= "right"> <div style=" display:inline-block; margin: 1em 20px 1em 0; position: relative; border-radius: 10px; border: 2px solid #ccc; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; right: -15px; top: 20px; border-left: 15px solid #ccc; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに本文を入れます♪<span style="position: absolute; display: block; right: -12px; top: 20px; border-left: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div></div>
↑この部分をコピペして使ってください。

左向き背景色の吹き出し風囲み枠

ここに本文を入れます♪
HTML
<div  style="position: relative; margin: 1em 0 1em 20px; border-radius: 10px; background: #eee; font-size: 100%; padding: 20px;">ここに本文を入れます♪<span  style="  position: absolute; top: 50%; left: -30px; margin-top: -15px;  border: 15px solid transparent;  border-right: 20px solid #eee; width: 0;  height: 0;"></span></div>
↑この部分をコピペして使ってください。

*右向き

ここに本文を入れます♪


HTML
<div  style="display:inline-block; position: relative; border-radius:10px; background: #eee; font-size: 100%; padding: 20px;">ここに本文を入れます♪<span  style="  position: absolute; top: 50%; right: -30px; margin-top: -15px;  border: 15px solid transparent;  border-left: 20px solid #eee; width: 0;  height: 0;"></span></div>
↑この部分をコピペして使ってください。

上下向き背景色の吹き出し風囲み枠

ここに本文を入れます♪
HTML
<div style="border-radius:10px; background: #ffebf1; margin-bottom: 0px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #ffebf1 transparent transparent transparent; margin-left: 30px; margin-bottom: 20px;"></div>
↑この部分をコピペして使ってください。

*右下向き

ここに本文を入れます♪
HTML
<div style="border-radius:10px; background: #ffebf1; margin-bottom: 0px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div><div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #ffebf1 transparent transparent transparent; margin-left: 90%; margin-bottom: 20px;"></div>
↑この部分をコピペして使ってください。

*右下向き右寄せ

ここに本文を入れます♪
HTML
<div align= "right"> <div style="display:inline-block; border-radius:10px; background: #ffebf1; margin-bottom: 0px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div><div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #ffebf1 transparent transparent transparent; margin-right: 30px; margin-bottom: 20px;"></div></div>
↑この部分をコピペして使ってください。

*上向き ★new
ここに本文を入れます♪

HTML
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px ; border-color:  transparent transparent #ffebf1 transparent ; margin-left: 80px; margin-top: 20px;"></div><div style="border-radius:10px; background: #ffebf1; margin-bottom: 0px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

*上向き(▲が中央にくるバージョン) ★new
ここに本文を入れます♪

HTML
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px ; border-color:  transparent transparent #ffebf1 transparent ; margin-left: 50%; margin-top: 20px;"></div><div style="border-radius:10px; background: #ffebf1; margin-bottom: 0px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。

*上向き(文字数に合わせてサイズを変更) ★new
ここに本文を入れます♪


HTML
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px ; border-color:  transparent transparent #ffebf1 transparent ; margin-left: 80px; margin-top: 20px;"></div><div style="display:inline-block; border-radius:10px; background: #ffebf1; margin-bottom: 0px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。


かわいい吹き出し風囲み枠

ここに本文を入れます♪
HTML
<div  style="position: relative;  margin: 2em 0 2em 40px; background: #fdeff2; border-radius: 20px; font-size: 100%; padding: 20px;"><span  style="  position: absolute; left: -38px; width: 13px; height: 12px; bottom: 0; background: #fdeff2; border-radius: 50%; "></span>ここに本文を入れます♪<span style=" position: absolute; left: -24px; width: 20px; height: 18px;  bottom: 3px; background: #fdeff2; border-radius: 50%;  margin: 0;  padding: 0;"></span></div>
↑この部分をコピペして使ってください。


▼文字数に合わせて囲み枠の長さを変える場合は・・・

「 display:inline-block; 」のコードを追加します。
ここに本文を入れます♪

HTML
<div  style="display:inline-block; position: relative;  margin: 2em 0 2em 40px; background: #fdeff2; border-radius: 20px; font-size: 100%; padding: 20px;"><span  style="  position: absolute; left: -38px; width: 13px; height: 12px; bottom: 0; background: #fdeff2; border-radius: 50%; "></span>ここに本文を入れます♪<span style=" position: absolute; left: -24px; width: 20px; height: 18px;  bottom: 3px; background: #fdeff2; border-radius: 50%;  margin: 0;  padding: 0;"></span></div>
↑この部分をコピペして使ってください。

HTMLのみ*囲み枠デザイン 使い方まとめ

HTMLをコピペするだけで使える、かわいい囲み枠デザインをご紹介しました。

*色を変えたいときは、#以降の英数字(カラーコード)を変更します。カラーコードはこちらで調べられます。→WEB色見本を見る

*文字数に合わせて囲み枠の長さを変える場合は、「<div  style="」のあとに「 display:inline-block; 」のコードを追加します。(ひとつ前の「かわいい吹き出し風囲み枠」を参考にしてください)

*文字サイズの変更ができます。「font-size: 100%;」の数字を変えると文字の大きさが変わります。(少し小さめにしたい場合は95%に変える等)

*作成ビューで改行する場合は、shiftキーを押しながらenterを押すと枠内で改行できます。

*HTMLのみで囲み枠をつける方法は、こちらの記事が参考になります。
枠をつける - HTMLのお勉強

*もっと多くの囲み枠デザインを見たいときは、こちらのまとめ記事が参考になります。
【HTML・CSS】コピペで簡単!ボックス(囲み枠)デザイン記事まとめ


こちらもおすすめ♪


このエントリーをはてなブックマークに追加



➥TOPへ戻る

QooQ