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

     
コードをHTMLに貼り付けるだけで簡単に作れる
シンプルで使いやすいBOXデザイン(囲み枠)です。
     

 

 使いかた 
     
サンプルの下にあるHTMLコードをコピーして、自身のHTML編集に貼り付けて下さい。
(WordPressの場合はテキストエディタ(HTML)に貼り付けて下さい。)
     

 

 

 

 

 

 

お知らせ

       2024.01.24 「見出し線」を追加しました。(詳しくはこちらから)

       2024.01.13 「一重線の囲み枠」に追加しました。(詳しくはこちらから)

 

 

 

 

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

 

 

タイトル

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

 

<div style="position: relative; padding: .5em 1em; margin: 2em 0; border: solid 3px #848484; background: #ffffff;"><span style="position: absolute; display: inline-block; bottom: 100%; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #848484; font-weight: bold; border-radius: 5px 5px 0 0; color: #ffffff;">タイトル</span>
<p style="margin: 0; padding: 0;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

 

 

 

 

タイトル

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

 

<div style="position: relative; padding: 1.8em 1em .5em; margin: 2em 0; border: solid 3px #848484; background: #ffffff;"><span style="position: absolute; display: inline-block; top: -1px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #848484; color: #ffffff; font-weight: bold;">タイトル</span>
<p style="margin: 0; padding: 0;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

 

 

 

 

タイトル
ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

 

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

 

 

 

 

タイトル
ここに文章を入れる
ここに文章を入れる
ここに文章を入れる

 

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

 

 

 

 

 

 2.  枠線なしの囲み枠

 

 

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

 

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

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="background: #fff3b8; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="background: #b2cbe4; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

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

 

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

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="background: #8da0b6; color: #fff; 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%, #D8D8D8 25%,#D8D8D8 50%, #fff 50%, #fff 75%, #D8D8D8 75%, #D8D8D8 ); background-size: 5px 5px; font-size: 100%; padding: 25px;">
<p>ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</p>
</div>

 

 

 

 

 

 3.  一重線の囲み枠

 

 

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

 

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

 

 

 

 

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

 

<div style="border: 3px solid #848484; 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: 3px solid #848484; background: #fffff9; color: #333; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="border: 3px solid #2b2b2b; 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: 3px solid #2b2b2b; background: #fffff9; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<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: 0;">
ここに文章を入れる<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(#585858,#585858),linear-gradient(#585858,#585858),linear-gradient(#585858,#585858),linear-gradient(#585858,#585858);">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

ここに文章を入れる

ここに文章を入れる

ここに文章を入れる

 

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

 

 

 

 

 

 4.  二重線の囲み枠

 

 

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

 

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

 

 

 

 

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

 

<div style="border: 5px double #0f2350; 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: #fafdff; border: 4px double #0f2350; font-size: 100%; padding: 20px;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="border: 5px double #0f2350; 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 #0f2350; background: #fafdff; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="border: 11px double #848484; 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: 11px double #848484; background: #f2f2f2; color: #333; margin: 1em auto; padding: 1em;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="border: 11px double #848484; 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: 11px double #848484; background: #f2f2f2; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">
ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</div>

 

 

 

 

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

 

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

 

 

 

 

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

 

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

 

 

 

 

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

 

<div style="background: #aaaab0; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><span style="color: #ffffff;"> ここに文章を入れる<br />
ここに文章を入れる<br />
ここに文章を入れる</span></p>
</div>

 

 

 

 

 

 5.  点線の囲み枠

 

 

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

 

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

 

 

 

 

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

 

<div style="background-color: #f2f2f2; border-radius: 5px; border: 3px dashed #848484; 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>

 

 

 

 

 

 

 

 

 

 

 あとがき 
     
囲み枠があると記事がグンと読みやすくなって、ほんとうに便利ですよね
使い勝手のいいシンプルでおしゃれな囲み枠を これからも随時増やしていく予定です。