文字数に合わせてサイズが変わるゴールド枠線つき囲み枠

 

淡いピンク×ゴールドの囲み枠です。

文字数に合わせてサイズが変わります。

  • シンプルな枠線
  • 角丸枠線があります。
     
画面幅いっぱいにするときは
display:inline-block;
を削除してくださいね。
 

 

文字数に合わせてサイズが変わる枠線

 

実　線：solid

 

<div style="display:inline-block; background:#FEF8FB;padding:8px;"><div style="display:inline-block; border: 2px solid #e8d9bd; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div></div>

 

 

二重線：double

 

<div style="display:inline-block; background:#FEF8FB;padding:8px;"><div style="display:inline-block; border: 4px double #e8d9bd; padding: 15px; ">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

点　線：dotted

 

<div style="display:inline-block; background:#FEF8FB;padding:8px;">
<div style="display:inline-block; border: 2px dotted #e8d9bd; padding: 15px; ">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

破　線：dashed

 

<div style="display:inline-block; background:#FEF8FB;padding:8px;">
<div style="display:inline-block; border: 2px dashed #e8d9bd; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

文字数に合わせてサイズが変わる角丸枠線

 

実　線：solid

 

<div style="display:inline-block; background:#FEF8FB;padding:8px; border-radius: 10px;"><div style="display:inline-block; border: 2px solid #e8d9bd; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

二重線：double

 

<div style="display:inline-block; background:#FEF8FB;padding:8px;border-radius: 10px;"><div style="display:inline-block; border: 4px double #e8d9bd; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

点　線：dotted

 

<div style="display:inline-block; background:#FEF8FB;padding:8px; border-radius: 10px;"><div style="display:inline-block; border: 2px dotted #e8d9bd; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

破　線：dashed

 

<div style="display:inline-block; background:#FEF8FB;padding:8px; border-radius: 10px;"><div style="display:inline-block; border: 2px dashed #e8d9bd; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています！

「マーカー」とメッセージを送ってねドキドキ

友だち追加

ID検索は @570smkow