HTMLのみで作れる＊シンプルで使いやすい BOXデザイン

コードをHTMLに貼り付けるだけで簡単に作れる

シンプルで使いやすいBOXデザイン（囲み枠）です。

　使いかた　

サンプルの下にあるHTMLコードをコピーして、自身のHTML編集に貼り付けて下さい。

（WordPressの場合はテキストエディタ(HTML)に貼り付けて下さい。）

HTMLのみで作れる＊シンプルで使いやすい見出しデザイン

見出し線や枠を入れるだけでページがぐっと読みやすくなりますよね。ここではCSSは使わずにHTMLだけで簡単に作れるシンプルで使いやすい【見出しデザイン】をご紹介します。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

1. タイトル付きの囲み枠
2. 枠線なしの囲み枠
3. 一重線の囲み枠
4. 二重線の囲み枠
5. 点線の囲み枠
6. ステッチつきの囲み枠
7. メモ帳みたいな囲み枠
8. 吹き出しみたいな囲み枠
9. 付箋紙みたいな囲み枠
10. 見出し線

お知らせ

　 2024.04.28 「タイトル付きの囲み枠」に追加しました。（詳しくはこちらからどうぞ。）
　 2024.04.08 「一重線の囲み枠」に追加しました。（詳しくはこちらからどうぞ。）
　 2024.03.23 「二重線の囲み枠」をリニューアルしました。（詳しくはこちらからどうぞ。）

1. タイトル付きの囲み枠

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="display: inline-block; background: #e0e0e0; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #808080; padding: 3px 15px 1px 15px; margin-bottom: 0;">タイトル</div>
<div style="border: 2px solid #e0e0e0; padding: 15px;">
<p style="margin: 0;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="display: inline-block; background: #e0e0e0; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #808080; padding: 3px 15px 1px 15px; margin-bottom: 0;">タイトル</div>
<div style="border: 2px solid #e0e0e0; padding: 15px; box-shadow: 4px 4px 4px rgba(0,0,0,0.25);">
<p style="margin: 0;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 2px solid #e0e0e0;">
<div style="display: inline-block; background: #e0e0e0; color: #808080; padding: 1px 15px 3px 17px;">タイトル</div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 2px solid #e0e0e0; box-shadow: 4px 4px 4px rgba(0,0,0,0.25);">
<div style="display: inline-block; background: #e0e0e0; color: #808080; padding: 1px 15px 3px 17px;">タイトル</div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: #ececec 2px solid; border-top: #ececec 3px solid; padding: 0; margin: 1em auto; width: auto; color: #333; background: #fff;">
<div style="padding: 6px 9px; background: #ececec; border-bottom: 2px dotted #ececec; color: #808080;">タイトル</div>
<div style="padding: 15px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: #ececec 2px solid; border-top: #ececec 3px solid; padding: 0; margin: 1em auto; width: auto; color: #333; background: #fff; box-shadow: 4px 4px 4px rgba(0,0,0,0.25);">
<div style="padding: 6px 9px; background: #ececec; border-bottom: 2px dotted #ececec; color: #808080;">タイトル</div>
<div style="padding: 15px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>
</div>

new

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="position: relative; border: 2px solid #aaaab0; padding: 20px 15px 15px 15px;">
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #aaaab0; padding: 0 0.5em;">タイトル</div>
<p style="margin: 0; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="position: relative; border: 2px solid #aaaab0; padding: 20px 15px 15px 15px; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);">
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #aaaab0; padding: 0 0.5em;">タイトル</div>
<p style="margin: 0; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="position: relative; border: 2px solid #aaaab0; border-radius: 7px; padding: 20px 15px 15px 15px;">
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #aaaab0; padding: 0 0.5em;">タイトル</div>
<p style="margin: 0; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

タイトル

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="position: relative; border: 2px solid #aaaab0; border-radius: 7px; padding: 20px 15px 15px 15px; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);">
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #aaaab0; padding: 0 0.5em;">タイトル</div>
<p style="margin: 0; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

2. 枠線なしの囲み枠

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #333; border: 1px solid #f7f7f7; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #333; border: 1px solid #f7f7f7; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #333; border: 1px solid #f7f7f7; box-shadow: 5px 5px 0 0 #d3d6dd; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #333; border: 1px solid #f7f7f7; box-shadow: 5px 5px 0 0 #f5ecf4; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #333; border: 1px solid #f7f7f7; border-radius: 10px; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #333; border: 1px solid #f7f7f7; border-radius: 10px; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #778899; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #778899; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #778899; border-radius: 10px; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fafafa; color: #778899; border-radius: 10px; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background-image: linear-gradient( -45deg, #fff 25%, #f0f0f0 25%,#f0f0f0 50%, #fff 50%, #fff 75%, #f0f0f0 75%, #f0f0f0 ); background-size: 5px 5px; font-size: 100%; padding: 25px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background-image: linear-gradient( -45deg, #fff 25%, #f0f0f0 25%,#f0f0f0 50%, #fff 50%, #fff 75%, #f0f0f0 75%, #f0f0f0 ); background-size: 5px 5px; font-size: 100%; padding: 25px; box-shadow: 4px 4px 4px rgba(0,0,0,0.25);">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background-image: linear-gradient( -45deg, #fff 25%, #f0f0f0 25%,#f0f0f0 50%, #fff 50%, #fff 75%, #f0f0f0 75%, #f0f0f0 ); background-size: 5px 5px; font-size: 100%; padding: 25px; border-radius: 15px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background-image: linear-gradient( -45deg, #fff 25%, #f0f0f0 25%,#f0f0f0 50%, #fff 50%, #fff 75%, #f0f0f0 75%, #f0f0f0 ); background-size: 5px 5px; font-size: 100%; padding: 25px; border-radius: 15px; box-shadow: 4px 4px 4px rgba(0,0,0,0.25);">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

3. 一重線の囲み枠

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 1px solid #aaaab0; background: #fff; color: #333; margin: 1em auto; padding: 1em;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 1px solid #aaaab0; background: #fff; color: #333; box-shadow: 4px 4px 4px rgba
(0,0,0,0.25); margin: 1em auto; padding: 1em;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fffffc; border: 1px solid #e9e4d4; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

new

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fffffc; border: 1px solid #e9e4d4; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 1px solid #aaaab0; background: #fff; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 1px solid #aaaab0; background: #fff; color: #333; border-radius: 1em; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 1px solid #e9e4d4; background: #fffffc; color: #333; border-radius: 1em; margin: 1em auto; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 1px solid #e9e4d4; background: #fffffc; color: #333; border-radius: 1em; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="padding: .5em 1em; margin: 2em 0; background: #ffffff; box-shadow: 0px 0px 10px 0px #cacaca;">
<p style="margin: 0; padding: 1em;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="margin: 1em auto; padding: 20px; background-size: 2px 2px; background-position: 9px 0,0 9px,right 9px top 0,left 0 bottom 9px; background-repeat: repeat-y,repeat-x,repeat-y,repeat-x; background-image: linear-gradient(#eaeaea,#eaeaea),linear-gradient(#eaeaea,#eaeaea),linear-gradient(#eaeaea,#eaeaea),linear-gradient(#eaeaea,#eaeaea);">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="margin: 2em auto; padding: 1em 1.5em; width: 90%; color: #000; background-color: #fff; border: 4px solid #eaeaea; border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる

<div style="position: relative; padding: 1rem 2rem calc(1rem + 10px); color: #606060; background: #eeeaec; font-size: 16px;"><span style="position: absolute; top: -7px; left: -7px; width: 100%; height: 100%; border: 1px solid #aaaab0;"></span>
<p>ここに文章を入れる</p>
<p>ここに文章を入れる</p>
<p>ここに文章を入れる</p>
</div>

4. 二重線の囲み枠

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 5px double #bfbec5; background: #fff; color: #333; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 5px double #bfbec5; background: #fff; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background-color: #fcfcfc; border: 5px double #bfbec5; font-size: 100%; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background-color: #fcfcfc; color: #000; border: 5px double #bfbec5; font-size: 100%; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 5px double #bfbec5; background: #fff; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 5px double #bfbec5; background: #fff; color: #333; border-radius: 1em; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 5px double #bfbec5; background: #fcfcfc; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fcfcfc; color: #000; border: 5px double #bfbec5; border-radius: 1em; margin: 1em auto; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 8px double #efefef; background: #fff; color: #333; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 8px double #efefef; background: #fff; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 8px double #efefef; background: #fcfcfc; color: #333; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fcfcfc; color: #000; border: 8px double #efefef; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 8px double #efefef; background: #fff; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 8px double #efefef; background: #fff; color: #333; border-radius: 1em; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: 8px double #efefef; background: #fcfcfc; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #fcfcfc; color: #000; border: 8px double #efefef; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #efefef; border: 4px double #FFFFFF; color: #000; box-shadow: 0 0 0 10px #efefef; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #efefef; border: 4px double #FFFFFF; color: #000; border-radius: 7px; box-shadow: 0 0 0 10px #efefef; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

renewal

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #d3d6dd; border: 4px double #eeeaec; color: #7d7b83; box-shadow: 0 0 0 10px #d3d6dd; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #d3d6dd; border: 4px double #eeeaec; color: #7d7b83; border-radius: 7px; box-shadow: 0 0 0 10px #d3d6dd; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #eeeaec; padding: 20px; color: #7d7b83; border: double 10px #fff; border-radius: 10px; word-break: break-all;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

5. 点線の囲み枠

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border-radius: 5px; border: 1px dashed #b0c4de; font-size: 100%; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border-radius: 5px; border: 2px dotted #8da0b6; font-size: 100%; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border-radius: 5px; border: 3px dashed #efefef; font-size: 100%; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background-color: #fcfcfc; border-radius: 5px; border: 3px dashed #efefef; font-size: 100%; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

6. ステッチつきの囲み枠

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #bdbdbd; border: 2px dashed #f2f2f2; box-shadow: 0 0 0 10px #bdbdbd; padding: 10px;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #f2f2f2; border: 2px dashed #bdbdbd; border-radius: 5px; box-shadow: 0 0 0 10px #f2f2f2; padding: 10px;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="color: white; background: #848484; padding: 20px; border: 2px dashed rgba(255 , 255 ,
 255 , 0.5); -moz-border-radius: 6px; -moz-box-shadow: 0 0 0 5px #848484 , 0 2px 3px 5px rgba(0 ,
 0 , 0 , 0.5); -webkit-border-radius: 6px; -webkit-box-shadow: 0 0 0 5px #848484 , 0 2px 3px 5px
 rgba(0 , 0 , 0 , 0.5); border-radius: 6px; box-shadow: 0 0 0 5px #848484 , 0 2px 3px 5px rgba(0 ,
 0 , 0 , 0.5)
; font-size: 100%;">
<p>ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

7. メモ帳みたいな囲み枠

【メモ帳みたいな囲み枠】の注意点

♦ 文章の末尾で改行すると罫線が消えます。消したくない時は文章の途中で改行します。

♦ 一行以上の長文になると罫線無しの二行表示になります。

♦ 一行開けたい時は文章の代わりにスペースを入れます。

<div style="background: #fffff9; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;">
<div style="border-bottom: dashed 1px #a1a1a1; margin-bottom: 5px;">ここに文章をいれる</div>
<div style="border-bottom: dashed 1px #a1a1a1; margin-bottom: 5px;">ここに文章をいれる</div>
<div style="border-bottom: dashed 1px #a1a1a1; margin-bottom: 5px;">ここに文章をいれる</div>
</div>

文字数に合わせて横幅が変わります。

ここに文章をいれる

<div style="display: inline-block; background: #fffff9; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;">
<div style="border-bottom: dashed 1px #a1a1a1; margin-bottom: 5px;">ここに文章をいれる</div>
<div style="border-bottom: dashed 1px #a1a1a1; margin-bottom: 5px;">ここに文章をいれる</div>
<div style="border-bottom: dashed 1px #a1a1a1; margin-bottom: 5px;">ここに文章をいれる</div>
</div>

ここに文章を入れる

<div style="background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #ECE1B9;">ここに文章を入れる</div>
</div>

文字数に合わせて横幅が変わります。

ここに文章を入れる

<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #ECE1B9;">ここに文章を入れる</div>
</div>

ここに文章を入れる

<div style="background: #f3f3f3; padding: 15px 15px 25px 15px;"> <div style="border-bottom: dashed 2px #fffffc; margin-bottom: 5px;">ここに文章を入れる</div> <div style="border-bottom: dashed 2px #fffffc; margin-bottom: 5px;">ここに文章を入れる</div> <div style="border-bottom: dashed 2px #fffffc;">ここに文章を入れる</div> </div>

文字数に合わせて横幅が変わります。

ここに文章を入れる

<div style="display: inline-block; background: #f3f3f3; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #fffffc; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #fffffc; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #fffffc;">ここに文章を入れる</div>
</div>

ここに文章を入れる

<div style="background: #FFFFF; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #bdbdbd; border: double 3px #585858;">
<div style="border-bottom: solid 1px #848484; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 1px #848484; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 1px #848484;">ここに文章を入れる</div>
</div>

文字数に合わせて横幅が変わります。

ここに文章を入れる

<div style="display: inline-block; background: #FFFFF; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #bdbdbd; border: double 3px #585858;">
<div style="border-bottom: solid 1px #848484; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 1px #848484; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 1px #848484;">ここに文章を入れる</div>
</div>

ここに文章を入れる

<div style="padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #d8d8d8;">ここに文章を入れる</div>
</div>

文字数に合わせて罫線の長さが変わります。

ここに文章を入れる

<div style="display: inline-block; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: dashed 2px #d8d8d8;">ここに文章を入れる</div>
</div>

ここに文章を入れる

<div style="padding: 15px 15px 25px 15px;">
<div style="border-bottom: solid 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 2px #d8d8d8;">ここに文章を入れる</div>
</div>

文字数に合わせて罫線の長さが変わります。

ここに文章を入れる

<div style="display: inline-block; padding: 15px 15px 25px 15px;">
<div style="border-bottom: solid 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 2px #d8d8d8; margin-bottom: 5px;">ここに文章を入れる</div>
<div style="border-bottom: solid 2px #d8d8d8;">ここに文章を入れる</div>
</div>

8. 吹き出しみたいな囲み枠

横幅80％

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="width: 80%; padding: 30px; border: 2px solid #000000; border-radius: 12px; background: #fff; color: #000000; margin-bottom: 0px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>
<div style="width: 80%; margin-bottom: 20px;">
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #000000 transparent transparent transparent; float: left; margin-left: 31px; margin-bottom: 0px;"> </div>
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #fff transparent transparent transparent; float: left; margin-left: -30px; margin-top: -2px;"> </div>
</div>

横幅100％

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="width: 100%; padding: 30px; border: 2px solid #000000; border-radius: 12px; background: #fff; color: #000000; margin-bottom: 0px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>
<div style="width: 80%; margin-bottom: 20px;">
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #000000 transparent transparent transparent; float: left; margin-left: 31px; margin-bottom: 0px;"> </div>
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #fff transparent transparent transparent; float: left; margin-left: -30px; margin-top: -2px;"> </div>
</div>

文字数に合わせて横幅が変わります。

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="display: inline-block; padding: 30px; border-radius: 12px; background: #2b2b2b; color: #fff; margin-bottom: 0px;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #2b2b2b transparent transparent transparent; margin-left: 30px; margin-bottom: 20px;"> </div>

9. 付箋紙みたいな囲み枠

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #ffffff; padding: 8px 19px; margin: 2em 0; border-top: solid 10px #474a4d; solid 5px #474a4d; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="background: #ffffff; padding: 8px 19px; margin: 2em 0; border-top: solid 10px #f5a9bc;
 solid 5px #f5a9bc; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border: #e6e6e6 solid 1px; background: #ffffff; padding: 8px 19px; margin: 2em 0; border-left: solid 10px #474a4d; solid 5px #474a4d; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="border-left: #474a4d solid 10px; padding: 20px; background: #f1f1f1; font-size: 100%; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="margin: 2em auto 1em; padding: 15px; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.05); width: 300px; transform: rotate(2deg); background: #ffc;">
<div style="width: 45%; height: 35px; opacity: 0.15; margin: -35px auto 10px 25%; background: #ccb; transform: rotate(-5deg);"></div>
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="margin: 2em auto 1em; padding: 15px; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.05); width: 300px; transform: rotate(2deg); background: #fdd;">
<div style="width: 45%; height: 35px; opacity: 0.15; margin: -35px auto 10px 25%; background: #ccb; transform: rotate(-5deg);"></div>
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

<div style="margin: 2em auto 1em; padding: 15px; color: white; box-shadow: 4px 4px 4px rgba(0,0,0,0.05); width: 300px; transform: rotate(2deg); background: #848484;">
<div style="width: 45%; height: 35px; opacity: 0.15; margin: -35px auto 10px 25%; background: #ccb; transform: rotate(-5deg);"></div>
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

10. 見出し線

見出し線は全て文字数に合わせて横幅が変わるようになっています。

ここに見出しを入れる

<div style="display: inline-block; border-bottom: 3px solid #0f2350; font-size: 16px;">ここに見出しを入れる</div>

ここに見出しを入れる

<div style="display: inline-block; border-bottom: 6px double #0f2350; font-size: 16px;">ここに見出しを入れる</div>

ここに見出しを入れる

<div style="display: inline-block; border-bottom: 3px dashed #0f2350; font-size: 16px;">ここに見出しを入れる</div>

ここに見出しを入れる

<div style="display: inline-block; border-left: 7px solid #0f2350; border-bottom: 3px solid #263f1f; padding-left: 12px; font-size: 16px;">ここに見出しを入れる</div>

ここに見出しを入れる

<div style="display: inline-block; border: 3px solid #0f2350; background: #fff; color: #333; margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

ここに見出しを入れる

<div style="display: inline-block; margin: 1em auto; padding: 20px; background-size: 2px 2px; background-position: 9px 0,0 9px,right 9px top 0,left 0 bottom 9px; background-repeat: repeat-y,repeat-x,repeat-y,repeat-x; background-image: linear-gradient(#0f2350,#0f2350),linear-gradient(#0f2350,#0f2350),linear-gradient(#0f2350,#0f2350),linear-gradient(#0f2350,#0f2350);">ここに見出しを入れる</div>