＼コピペで簡単／シンプルな線の囲み枠（クリムソン）

　囲み枠の使い方　

記事投稿には、「通常表示」と「ＨＴＭＬ表示」の2種類があります。

こちらのコードは「HTML表示」に貼り付けて使ってください。

囲み枠を貼り付ける前に・・・
入れる箇所の前後に改行を入れておくと良いです。

改行ができない💦と思ったら・・・
「HTML表示」で貼った囲み枠のコードの前後どちらか、入れたい箇所に
<p>文字を入れるスペース</p>
↑コードをいれていただくと、文字の入力ができるようになります。

シンプルな枠線

実線：solid

--こちらのコードをコピペ--
<div style="display:inline-block; border: 2px solid #dc143c; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！ </div>

二重線：double

--こちらのコードをコピペ--
<div style="display:inline-block; border: 4px double #dc143c; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

点線：dotted

--こちらのコードをコピペ--
<div style="display:inline-block; border: 2px dotted #dc143c; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

破線：dashed

--こちらのコードをコピペ--
<div style="display:inline-block; border: 2px dashed #dc143c; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

背景塗りつぶし：background

--こちらのコードをコピペ--
<div style="display:inline-block; background: #dc143c; padding: 15px;color:white;">本文はここに入力してください。改行はShift+Enterで！</div>

上下線：top bottom border

--こちらのコードをコピペ--
<div style="display:inline-block; border-top:solid 4px #dc143c;border-bottom: solid 4px #dc143c;background: #fddce3; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

左右線：LR border

--こちらのコードをコピペ--
<div style="display:inline-block; border-right:solid 4px #dc143c;border-left: solid 4px #dc143c;background: #fddce3; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

上下二重線：top bottom double border

--こちらのコードをコピペ--
<div style="display:inline-block; border-top:double 4px #dc143c;border-bottom: double 4px #dc143c;background: #fddce3; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

左右二重線：LR doubleborder

--こちらのコードをコピペ--
<div style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;background: #fddce3; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

左太線（付箋風）：left border

--こちらのコードをコピペ--
<div style="display:inline-block; border-left: solid 10px #dc143c;background: #fddce3; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

上太線：top border

--こちらのコードをコピペ--
<div style="display:inline-block; border-top: solid 10px #dc143c;background: #fddce3; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div>

上線影付き：top shadow border

--こちらのコードをコピペ--
<div style="padding:4px 8px; margin: 10 0; background: white;border-top: solid 5px #dc143c;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);">本文はここに入力してください。改行はShift+Enterで！</div>

シンプルな角丸枠線

実　線：solid

--こちらのコードをコピペ--
<div style="display:inline-block; border: 2px solid #dc143c; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

二重線：double

--こちらのコードをコピペ--
<div style="display:inline-block; border: 4px double #dc143c; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

点　線：dotted

--こちらのコードをコピペ--
<div style="display:inline-block; border: 2px dotted #dc143c; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

破　線：dashed

--こちらのコードをコピペ--
<div style="display:inline-block; border: 2px dashed #dc143c; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

背景塗りつぶし：background

--こちらのコードをコピペ--
<div style="display:inline-block; background: #dc143c; padding: 15px;color:white;border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

上下線：top bottom border

--こちらのコードをコピペ--
<div style="display:inline-block; border-top:solid 4px #dc143c;border-bottom: solid 4px #dc143c;background: #fddce3; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

左右線：LR border

--こちらのコードをコピペ--
<div style="display:inline-block; border-right:solid 4px #dc143c;border-left: solid 4px #dc143c;background: #fddce3; padding: 15px;border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

上下二重線：top bottom double border

--こちらのコードをコピペ--
<div style="display:inline-block; border-top:double 4px #dc143c;border-bottom: double 4px #dc143c;background: #fddce3; padding: 15px;border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

左右二重線：LR doubleborder

--こちらのコードをコピペ--
<div style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;background: #fddce3; padding: 15px;border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

左太線（付箋風）：left border

--こちらのコードをコピペ--
<div style="display:inline-block; border-left: solid 20px #dc143c;background: #fddce3; padding: 15px;border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

上太線：top border

--こちらのコードをコピペ--
<div style="display:inline-block; border-top: solid 10px #dc143c;background: #fddce3; padding: 15px;border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div>

上線影付き：top shadow border

--こちらのコードをコピペ--
<div style="padding:4px 8px; margin: 10 0; background: white;border-top: solid 5px #dc143c;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);">本文はここに入力してください。改行はShift+Enterで！</div>

タイトル付の枠線

　タイトル　

実　線：solid

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border: 2px solid #dc143c; padding: 15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

二重線：double

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border:4px double #dc143c; padding:15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

点　線：dotted

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border:2px dotted #dc143c; padding:15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

破　線：dashed

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border:2px dotted #dc143c; padding:15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

破　線：dashed

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border:2px dashed #dc143c; padding:15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

背景塗りつぶし：background

--こちらのコードをコピペ--
<fieldset style="display:inline-block; background: #dc143c; padding: 15px;color:white;border: 1px solid #dc143c;"><legend style="display:inline-block; background: #dc143c; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

上下線：top bottom border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-top:solid 4px #dc143c;border-bottom: solid 4px #dc143c;border-left:1px solid #fddce3;border-right:1px solid #fddce3;padding: 15px;background: #fddce3;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

左右線：LR border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:solid 4px #dc143c;border-left: solid 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

上下二重線：top bottom double border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-top:double 4px #dc143c;border-bottom: double 4px #dc143c;border-right:1px solid #fddce3;border-left:1px solid #fddce3;background: #fddce3; padding: 15px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

左右二重線：LR doubleborder

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

右太線（付箋風）：right border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

下太線：top border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-bottom: solid 10px #dc143c;border-right: solid 1px #fddce3;border-left: solid 1px #fddce3;border-top:1px solid #fddce3;background: #fddce3; padding: 15px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

上線影付き：top shadow border

--こちらのコードをコピペ--
<fieldset style="padding:4px 8px; margin: 10 0; background: white;border-top: solid 5px #dc143c;border-bottom: solid 10px white;border-right: solid 1px white;border-left: solid 1px white;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);"><legend style="display:inline-block; border: solid 3px #dc143c;border-radius: 10px ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

タイトル付の角丸枠線

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

実　線：solid

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border: 2px solid #dc143c; padding: 15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

二重線：double

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border:4px double #dc143c; padding:15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

点　線：dotted

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border:2px dotted #dc143c; padding:15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

破線：dashed

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border:2px dashed #dc143c; padding:15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

背景塗りつぶし：background

--こちらのコードをコピペ--
<fieldset style="display:inline-block; background: #dc143c; padding: 15px;color:white;border: 1px solid #dc143c;border-radius: 10px;"><legend style="display:inline-block; background: #dc143c; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

上下線：top bottom border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-top:solid 4px #dc143c;border-bottom: solid 4px #dc143c;border-left:1px solid #fddce3;border-right:1px solid #fddce3;padding: 15px;background: #fddce3;border-radius: 10px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

左右線：LR border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:solid 4px #dc143c;border-left: solid 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;border-radius: 10px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

上下二重線：top bottom double border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-top:double 4px #dc143c;border-bottom: double 4px #dc143c;border-right:1px solid #fddce3;border-left:1px solid #fddce3;background: #fddce3; padding: 15px;border-radius: 10px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

左右二重線：LR doubleborder

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;border-radius: 10px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

右太線（付箋風）：right border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;border-radius: 10px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

下太線：top border

--こちらのコードをコピペ--
<fieldset style="display:inline-block; border-right:double 4px #dc143c;border-left: double 4px #dc143c;border-top:1px solid #fddce3;border-bottom:1px solid #fddce3;background: #fddce3; padding: 15px;border-radius: 10px;"><legend style="display:inline-block; background: #fddce3; border-radius: 10px; ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

　タイトル　

上線影付き：top shadow border

--こちらのコードをコピペ--
<fieldset style="padding:4px 8px; margin: 10 0; background: white;border-top: solid 5px #dc143c;border-bottom: solid 10px white;border-right: solid 1px white;border-left: solid 1px white;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);border-radius: 10px;"><legend style="display:inline-block; border: solid 3px #dc143c;border-radius: 10px ">　タイトル　</legend>本文はここに入力してください。改行はShift+Enterで！</fieldset>

Tシャツ作っています。ﾁﾗｯと覗いていただけたら、うれしいです

ココナラでヘッダーやSNS用の画像各種、承っています。

アメブロカスタマイズを承っています。

公式ラインはじめました。
質問でもご注文でも、ご連絡お待ちしています。