ブログやHPに使いやすい コピペで簡単に使える囲み枠

ブログやWordPress等のホームページで、目立たせたい内容や、見やすくまとめるために、囲み枠はとても便利なものです。
HTML記述のみで簡単に利用できる、コピペで使える囲み枠をご紹介いたします。コピペでご利用ください。

1.自分色を決めよう

まずは、囲み枠や背景の色を決めましょう!

囲み枠や背景の色は、#000000など「#英数字6文字」になっています。
自分の好きな色をカラーコード表から選んで、自分らしい色彩でカスタマイズしていきましょう。

自分好みの色のコードをいくつかチョイスしてメモっておくと良いですね。

2.HTMLタグの説明

例:<div style="background:#fff; padding:10px; border:2px dashed #AFEEEE;">ここに本文を入れる</div>

a. 背景:background(バックグラウンド)
b. 枠と文字の間隔:padding (パディング)
c. 線の太さ:border(ボーダー)
d. 線の種類
 ・実線 ⇒ solid
 ・点線 ⇒ dotted 
 ・破線 ⇒ dashed
 ・二重線 ⇒ double
 ・立体的に窪んだ線⇒groove
 ・立体的に隆起した線⇒ridge
 ・線無し ⇒ none

#000000;←最後は、必ず [;] で閉じましょう。

3.囲み枠

・直線(黒)

ここに文章
※改行はShift+Enter
・線の太さ:1px
・枠線のカラーコード:#000000


使用するタグ

<div style="border: 1px solid #000000; padding: 10px;">ここに文章<br>※改行はShift+Enter</div><br><br>

・角丸(ディープピンク)

ここに文章
※改行はShift+Enter
・枠線のカラーコード:#ff1493
・直径10pxの角丸枠
・線の太さ:2px


使用するタグ

<div style="padding:10px; border-radius: 10px; border:2px solid #ff1493;">ここに文章<br>※改行はShift+Enter</div>

・直線枠と背景色(ブルー系)

こここに文章
※改行はShift+Enter
・枠内背景カラーコード:#e0ffff
・線の太さ:2px
・枠線のカラーコード:#afeeee


使用するタグ

<div style="background: #e0ffff; padding: 10px; border: 2px solid #afeeee;">ここに文章<br>※改行はShift+Enter</div>

・小さなドット枠(ディープスカイブルー)

ここに文章
※改行はShift+Enter
・線の太さ:1px
・ドット枠線のカラーコード:#00bfff


使用するタグ

<div style="border: 1px dotted #00bfff; padding: 10px;">ここに文章<br>※改行はShift+Enter<br></div>

・大きなドット枠(スカイブルー)

ここに文章
※改行はShift+Enter


使用するタグ

<div style="padding: 10px; border: 2px dotted #87ceeb<img name="kl_1539582852919" width="12" height="12" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAB3ElEQVQ4jY2TPWhTURTH/+e8l7QNJg0qCJpCSdEnONTFDk5udfILs9mS6iJYpI4VnURXUcRJrFG3gm3tXLpIxaUUIVA/iLRJayQ2Nk1q7cu99zjUF/JhQv7jOff/O+fcwyERAQAQEaoVjsdOirgP93L+W5svJpeq8xVfPWD/yPkepekBWbjETl8nM0h9XtkRV72xLbmdn5hJ/xdw4OaVkC6U7oBwg6MRH0d7fGTbQDoLIYKUXa2/rO5C6SdWOHh/4/HrLQCwvZZUoZi2Dh/ysdPbRZ0dNeOQCMj2WXTiaMCUtsdUKn0dQHcNAEZCVr+DViJjYAW6/NqI34txS0eVIqEwRgfONMTbApyORDE3PIbF9dX2AKPHTyESCFbMExeGMTL9EguZVHuAxY3vmBscwtkjfS3NTQELuQzi72bwaGAQ8elEUzNQtQUiLsmf3X3eCt/n1uBMPQUy2bqSDCIuNXQgjHnJ5kzTUt47rUQY8w0AG2ZcLX/bkc2t5m5mlJdTv22Y8QZAPjGbBPHl8oePRb2yruu9BjBu8msRGrF8YjZZGb3+mA5ePee4ip9xoKOfj/UGSRuYtR/b+ldxyW/paz+fv/0EtLhGT91DF2NgubtXnu4VXk1N1vzFP99f037PUFbu4yIAAAAASUVORK5CYII=" style="width: 12px; height: 12px;"/>;">ここに文章<br>※改行はShift+Enter</div>

・ ドット枠と背景(ピンク系)

ここに文章
※改行はShift+Enter


使用するタグ

<div style="background:#fff0f5; padding:10px; border:2px dotted #ffb6c1;">ここに文章<br>※改行はShift+Enter</div>

・二重線(ペールターコイズ)

ここに文章
※改行はShift+Enter
・枠線のカラーコード:#afeeee
・線の太さ:3px
拡大表示にすると、細い二重線が見えますよ。


使用するタグ

<div style="padding:10px; border:3px double #afeeee;">ここに本文を入れる</div>

・二重線角丸(ターコイズ)

ここに文章
※改行はShift+Enter
・枠線のカラーコード:#40e0d0
・直径10pxの角丸枠
・線の太さ:5px


使用するタグ

<div style="padding: 10px; border-radius: 10px; border: 5px double #40e0d0;">ここに文章<br></div>

・破線(ターコイズ)

ここに文章
※改行はShift+Enter
・枠線のカラーコード:#40e0d0
・破線の太さ:2px


使用するタグ

<div style="padding:10px; border:2px dashed #40e0d0;">ここに文章</div>

・グラデーション背景色(ブルー系)

ここに文章


使用するタグ

<div style="padding: 20px; background:-webkit-gradient(linear, left top, left bottom, from(#f0f8ff), to(#7fbfff)); background:-webkit-linear-gradient(top, #f0f8ff, #7fbfff); background:-moz-linear-gradient(top, #f0f8ff, #7fbfff); background:-o-linear-gradient(top, #f0f8ff, #7fbfff);   background:linear-gradient(to bottom, #f0f8ff, #7fbfff);">ここに文章</div>

・付箋風デザイン囲み枠(ディープピンク)

ここに文章


使用するタグ

<div style="border: #ff1493 solid 1px; border-left: #ff1493 solid 10px; padding: 20px;">ここに文章</div>

・見出し付き囲み枠

1.ディープピンク

ここにタイトル
ここに文章


使用するタグ

<div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div><br/><div style="border: 1px solid #ff1493; padding: 10px;">ここに文章</div>

2.ブルー

ここにタイトル
ここに文章


使用するタグ

<div style="background: #a0d8ef; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;"> ■ ここにタイトル</span></div><br/><div style="border: 1px solid #a0d8ef; padding: 10px;">ここに文章</div>

3.見出しタイトルを小さく別枠

■ ここにタイトル
ここに文章


使用するタグ

<div style="height:12px;">
<span style="margin-left:8px; padding:6px 10px; background:#40e0d0; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">■ ここにタイトル</span>
</div>
<div style="border:2px solid #40e0d0; padding:25px 12px 10px; font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">ここに文章</div>

4.見出しタイトル部分は枠無し

■ ここにタイトル
ここに文章


使用するタグ

<div style="height:12px;"><span style="margin-left:8px; padding:6px 5px; background:white; font-weight:bold;border-radius:5px;"> ■ ここにタイトル</span></div>
<div style="border:2px solid #a0d8ef; padding:25px 12px 10px; font-size:1em;border-radius:5px;">ここに文章</div>