ピンクグラデーションの囲み枠

ピンクグラデーションの囲み枠です。
文字数に合わせてサイズが変わります。
・シンプルな枠線
・角丸枠線があります。

画面幅に合わせてサイズを変えたいときは
display:inline-block;を消してくださいね♪

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

実　線：solid

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 2px solid #FFE3F6; padding: 15px; ">本文はここに入力してください。改行はShift+Enterで！</div>

実　線：solid

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

二重線：double

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

点　線：dotted

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

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

実　線：solid

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

実　線：solid

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

二重線：double

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

点　線：dotted

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

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

実　線：solid

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 2px solid #FFE3F6; padding: 15px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

実　線：solid

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 2px solid #e8d9bd; padding: 15px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

二重線：double

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 4px double #e8d9bd; padding: 15px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

点　線：dotted

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 2px dotted #e8d9bd; padding: 15px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

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

実　線：solid

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 2px solid #FFE3F6; padding: 15px; border-radius: 10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

実　線：solid

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 2px solid #e8d9bd; padding: 15px; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

二重線：double

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 4px double #e8d9bd; padding: 15px; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

点　線：dotted

<div style="display:inline-block; background-image:linear-gradient(#FFE3F6,#FFF7FC,#FFE3F6); border: 2px dotted #e8d9bd; padding: 15px; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで！</div>

『囲み枠のアレンジ方法リンク集』

『アメブロを書くのに便利な情報◆6選』

『アメブロで使える枠線【カラー別リンク集】』

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

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

ID検索は @570smkow 

メニュー

アメブロ囲み枠 / 枠線の便利な情報 /
人気記事 / お客様の声 / よくある質問 / 

提供メニュー / 制作の流れ / ご利用規約