HTMLやCSSの知識がなくても、コピペで使える囲み枠デザインをご紹介します。(随時更新しています♪）
ここで紹介する囲み枠は、記事の作成画面にコードをコピペするだけでOKなので、初心者にも簡単です。
CSSとHTMLを別々の場所にコピペする方法が一般的かもしれませんが、最初はこちらの方が分かりやすいと思います。
CSSが反映されない場合でも、HTMLだけで囲み枠が表示されるので便利です。
ぜひ、ご活用ください♪
コードを貼り付ける前には必ず記事の編集画面を「HTML表示」のモードにしてくださいね。
 |
| HTML表示に切り替えてからコードをコピペします。 |
＊こちらでカラーコードを調べることが出来ます♪
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>
↑この部分をコピペして使ってください。ふんわりぼかし囲み枠 ★new
ここに本文を入れます♪
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>
↑この部分をコピペして使ってください。２重囲み枠
ここに本文を入れます♪
HTML
<div style="border: 4px double #ff6699;font-size: 100%; padding: 20px;">
ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。２重囲み枠（角丸）
ここに本文を入れます♪
HTML
<div style="border-radius: 10px; border: 4px double #ff6699; font-size: 100%; padding: 20px;">
ここに本文を入れます♪</div>
↑この部分をコピペして使ってください。２重囲み枠＋背景色
ここに本文を入れます♪
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>
↑この部分をコピペして使ってください。<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のみ＊おしゃれな囲み枠デザイン
背景色＋白枠囲み枠 ★new
ここに本文を入れます♪
HTML
<div style=" border: 4px solid #ffe6ee; padding: 2px;"><div style=" background: #ffe6ee; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div></div>
↑この部分をコピペして使ってください。
背景色＋白枠囲み枠（角丸）★new
ここに本文を入れます♪
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>
↑この部分をコピペして使ってください。ここに本文を入れます♪</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>
↑この部分をコピペして使ってください。吹き出し風囲み枠 ★new
ここに本文を入れます♪
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>
↑この部分をコピペして使ってください。<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="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-left:30px;margin-bottom:20px;"></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>
↑この部分をコピペして使ってください。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>
↑この部分をコピペして使ってください。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>
↑この部分をコピペして使ってください。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>
↑この部分をコピペして使ってください。background-size: 5px 5px;font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
HTMLのみ＊囲み枠デザイン まとめ
HTMLをコピペするだけで使える、かわいい囲み枠デザインをご紹介しました。
＊文字サイズの変更ができます。「font-size: 100%;」の数字を変えると文字の大きさが変わります。（少し小さめにしたい場合は95%に変える等）
＊作成ビューで改行する場合は、shiftキーを押しながらenterを押すと枠内で改行できます。
＊HTMLのみで囲み枠をつける方法は、こちらの記事が参考になります。
枠をつける - HTMLのお勉強
＊もっと多くの囲み枠デザインを見たいときは、こちらのまとめ記事が参考になります。
【HTML・CSS】コピペで簡単！ボックス（囲み枠）デザイン記事まとめ
こちらもおすすめ♪
Follow @moca_simple
➥TOPへ戻る
9 件のコメント:
はじめまして！
メチャ活用させていただいています！
ありがとうございます（＾ω＾）
これからもどんどん可愛いコピペ追加してもらいたいです♡
宜しくお願い致します♡
こちらこそ♡
ありがとうございます(*^-^*)
コメントいただいて、励みになります。
また追加しようと思いますので、見ていただけるとうれしいです♪
はじめまして！
今までcssがうまく反映されず、囲い枠が作れなかったのですが
ようやくこのサイトに出会えて、作ることができました。
感謝感謝です。。。
コメントありがとうございます。
お役に立てたようでうれしいです♪
更新の励みになります(*^-^*)
はじめまして、いきなりのコメント失礼します。
とっても可愛くて、いつもたくさん活用させていただいております＾＾
本当にありがとうございます♡
これからもぜひ活用させてください！
コメントありがとうございます♪
いつも使っていただいて、とてもうれしいです(’-’*)
ぜひご活用ください♡
はじめまして♪
コードの知識がない私にとって、mocaさんはまさに救世主です！
おかげで自分のオンラインショップが華やかになりました。
本当にありがとうございます！！
これからもいろんなバリエーションを作っていただけるとうれしいです♡
コメントありがとうございます♪
お役に立てたようでうれしいです♡
1.3「ふんわりぼかし囲み枠」を追加しましたので、よかったらお使いください♪
はじめまして。
素敵な記事をありがとうございます(*^-^*)
参考にさせていただいています。
是非、吹き出し風囲み枠を教えて下さい。
いつもありがとうございます。
コメントを投稿