HTMLのみ＊コピペで簡単♪かわいい囲み枠デザイン-moca＊Bloggerメモ＊2nd

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

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

CSSとHTMLを別々の場所にコピペする方法が一般的かもしれませんが、最初はこちらの方が分かりやすいと思います。

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

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

シンプルな囲み枠

シンプル枠

ここに本文を入れます♪

<div style="border: #ffb6c1 solid 1px; font-size: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

背景色のみ枠

ここに本文を入れます♪

<div style="background: #fceff2; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

グレー影付き枠

ここに本文を入れます♪

<div style="background: #fff; border: 1px #ccc solid; box-shadow: 0 2px 3px 0 #ddd; font-size: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

２重枠

ここに本文を入れます♪

<div style="border: 4px double #ff6699;font-size: 90%; padding: 20px;">
ここに本文を入れます♪</div>

↑この部分をコピペして使ってください。

２重枠（角丸）

ここに本文を入れます♪

<div style="border-radius: 10px; border: 4px double #ff6699; font-size: 90%; padding: 20px;">
ここに本文を入れます♪</div>

↑この部分をコピペして使ってください。

２重枠＋背景色

ここに本文を入れます♪

<div style="background-color: #fceff2; border: 4px double #ff6699; font-size: 90%; padding: 20px;">
ここに本文を入れます♪</div>

↑この部分をコピペして使ってください。

点線枠

ここに本文を入れます♪

<div style="border-radius: 5px; border: 1px dashed #ffb6c1; margin-bottom: 10px;font-size: 90%; padding: 20px;">
ここに本文を入れます♪</div>

↑この部分をコピペして使ってください。

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

ここに本文を入れます♪

点線＋背景色枠

　ここに本文を入れます♪

<div style="background-color: #fceff2; border-radius: 5px; border: 1px dashed #ffb6c1; margin-bottom: 10px;font-size: 90%; padding: 20px;">
　ここに本文を入れます♪</div>

↑この部分をコピペして使ってください。

ふせん風枠

ここに本文を入れます♪

<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 90%;">
ここに本文を入れます♪</div>

↑この部分をコピペして使ってください。

太枠

ここに本文を入れます♪

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: #ff6699 solid 3px; font-size: 90%; padding: 20px;">
ここに本文を入れます♪</div>

↑この部分をコピペして使ってください。

タイトル付き囲み枠①

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

<fieldset style="border: 1px solid #ff6699; font-size: 90%;padding: 20px;">
<legend>タイトル</legend>ここに本文を入れます♪</fieldset>

↑この部分をコピペして使ってください。

＊上記のコードで1pxの数字を 5pxに変えると、このように枠線を太くすることができます。

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

タイトル付き囲み枠②

＊タイトル

ここに本文を入れます♪

<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: 90%; padding: 20px;"> ここに本文を入れます♪ </div>

↑この部分をコピペして使ってください。

タイトル付き囲み枠③

＊タイトル

ここに本文を入れます♪

↑この部分をコピペして使ってください。

おしゃれな囲み枠

カラー＋白文字枠

ここに本文をいれます♪

<fieldset style="background:#f98289; border:4px double #ffffff; border-radius:10px;font-size: 90%; padding: 20px;"><span style="color:#ffffff;">
ここに本文を入れます♪</span></fieldset>

↑この部分をコピペして使ってください。

ステッチ風囲み枠

ここに本文を入れます♪

<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: 90%;　">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

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

ここに本文を入れます♪

<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: 90%; ">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

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

ここに本文を入れます♪

<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: 90%;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

背景色＋ドット

濃いピンクのドット枠

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

薄いピンクのドット枠

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

白いドット枠

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

白いドット枠（小）

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

白いドット枠（大）

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

ふんわりした白いドット枠（大）

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

斜めストライプ

太目斜めストライプ枠

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

中太斜めストライプ枠

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

細目斜めストライプ枠

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

極細斜めストライプ枠

ここに本文を入れます♪

<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: 90%; padding: 20px;">
ここに本文を入れます♪
</div>

↑この部分をコピペして使ってください。

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

※文字が少し小さめに表示されるようにしています。「font-size: 90%;」の数字を変えると文字の大きさを変更できます。（100%が標準の文字サイズです）

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

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

こちらもおすすめ♪

Follow @moca_hatena

➥TOPへ戻る

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