グリーングラデーションの囲み枠です。
文字数に合わせてサイズが変わります。
・シンプルな枠線
・角丸枠線
・影付き枠線があります。
文字数に合わせてサイズが変わります。
・シンプルな枠線
・角丸枠線
・影付き枠線があります。
画面幅に合わせてサイズを変えたいときは
display:inline-block;を消してくださいね♪
文字数に合わせてサイズが変わる枠線
実 線:solid
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px solid #d3f2f5; padding: 15px; ">本文はここに入力してください。改行はShift+Enterで!</div>
実 線:solid
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px solid #e8d9bd; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div>
二重線:double
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 4px double #e8d9bd; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div>
点 線:dotted
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px dotted #e8d9bd; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div>
文字数に合わせてサイズが変わる角丸枠線
実 線:solid
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px solid #d3f2f5; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで!</div>
実 線:solid
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px solid #e8d9bd; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで!</div>
二重線:double
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 4px double #e8d9bd; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで!</div>
点 線:dotted
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px dotted #e8d9bd; padding: 15px; border-radius: 10px;">本文はここに入力してください。改行はShift+Enterで!</div>
影付き文字数に合わせてサイズが変わる枠線
実 線:solid
<div style="display:inline-block; background-image:linear-gradient(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px solid #d3f2f5; 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(#d3f2f5,#e8f8fa,#d3f2f5); 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(#d3f2f5,#e8f8fa,#d3f2f5); 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(#d3f2f5,#e8f8fa,#d3f2f5); 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(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px solid #d3f2f5; 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(#d3f2f5,#e8f8fa,#d3f2f5); 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(#d3f2f5,#e8f8fa,#d3f2f5); 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(#d3f2f5,#e8f8fa,#d3f2f5); border: 2px dotted #e8d9bd; padding: 15px; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">本文はここに入力してください。改行はShift+Enterで!</div>
LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!
「マーカー」とメッセージを送ってね
ID検索は @570smkow
୨୧ アメブロで使える囲み枠一覧
୨୧ 囲み枠 週間・月間ランキング
୨୧ 囲み枠の便利な情報
୨୧ アメブロ設定ポイント10選
୨୧ Canvaのおすすめ情報