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

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

１．自分色を決めよう

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

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

• 原色大辞典
• 和色大辞典
• 洋色大辞典
• パステルカラー

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

２．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;←最後は、必ず [;] で閉じましょう。

３．囲み枠

・直線（黒）

使用するタグ

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

・角丸（ディープピンク）

使用するタグ

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

・直線枠と背景色（ブルー系）

使用するタグ

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

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

使用するタグ

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

・大きなドット枠（スカイブルー）

使用するタグ

<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>

・ ドット枠と背景（ピンク系）

使用するタグ

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

・二重線（ペールターコイズ）

使用するタグ

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

・二重線角丸（ターコイズ）

使用するタグ

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

・破線（ターコイズ）

使用するタグ

<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>

・見出し付き囲み枠

１．ディープピンク

使用するタグ

<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>

２．ブルー

使用するタグ

<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>

３．見出しタイトルを小さく別枠

使用するタグ

<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>

４．見出しタイトル部分は枠無し

使用するタグ

<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>