かわいい囲み枠デザイン
この囲み枠は無料で使えます。HTMLコードをコピーして、自分のウェブサイトやブログに貼り付けてください。
囲み枠のデザインをカスタマイズする場合は、CSSスタイルを編集してください。
アメブロ記事の使い方
シンプルな囲み枠
ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。
<div style="background: #fceff2; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>
影付き枠
ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。
<div style="background: #fceff2; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 100%; padding: 20px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);">ここに本文を入れます♪</div>
付箋枠
ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。
<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ここに本文を入れます♪</div>
ピンクの波型囲み枠
かわいい囲み枠デザインの例2
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ff99cc; padding: 30px; border-radius: 10px;"> かわいい囲み枠デザインの例2 </div>
ハートの囲み枠
♥ かわいい囲み枠デザインの例3 ♥
♥ かわいい囲み枠デザインの例3 ♥
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ff0000; padding: 20px; border-radius: 50%; position: relative; width: 150px; height: 150px;"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> ♥ かわいい囲み枠デザインの例3 ♥ </div> </div>
ドット柄の囲み枠
かわいい囲み枠デザインの例4
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px dotted #ffb6c1; padding: 20px;"> かわいい囲み枠デザインの例4 </div>
キラキラの星型囲み枠
★ かわいい囲み枠デザインの例5 ★
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ffd700; padding: 20px; border-radius: 10px;"> <span style="color: #ffd700;">★</span> かわいい囲み枠デザインの例5 <span style="color: #ffd700;">★</span> </div>
ゆるい波型囲み枠
かわいい囲み枠デザインの例6
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #00bfff; padding: 20px; border-radius: 20px;"> かわいい囲み枠デザインの例6 </div>
レース模様の囲み枠
かわいい囲み枠デザインの例7
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ffc0cb; padding: 20px; background-color: #fff0f5;"> かわいい囲み枠デザインの例7 </div>
チェック柄の囲み枠
かわいい囲み枠デザインの例8
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #8b4513; padding: 20px; background-image: linear-gradient(45deg, #8b4513 25%, transparent 25%, transparent 75%, #8b4513 75%, #8b4513), linear-gradient(45deg, #8b4513 25%, transparent 25%, transparent 75%, #8b4513 75%, #8b4513); background-size: 20px 20px; background-position: 0 0, 10px 10px;"> かわいい囲み枠デザインの例8 </div>
グラデーション囲み枠
かわいい囲み枠デザインの例10
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid; border-image: linear-gradient(to right, #ff6699, #6699ff); border-image-slice: 1; padding: 20px;"> かわいい囲み枠デザインの例10 </div>
グリッド柄の囲み枠
かわいい囲み枠デザインの例9
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #4682b4; padding: 20px; background-image: linear-gradient(0deg, #4682b4 24.5%, transparent 25%, transparent 75%, #4682b4 75%, #4682b4), linear-gradient(90deg, #4682b4 24.5%, transparent 25%, transparent 75%, #4682b4 75%, #4682b4); background-size: 20px 20px; background-position: 0 0, 10px 10px;"> かわいい囲み枠デザインの例9 </div>
ピンクの実線囲み枠
かわいい囲み枠デザインの例1
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ffcccc; padding: 20px;"> かわいい囲み枠デザインの例1 </div>
ピンクの波型囲み枠
かわいい囲み枠デザインの例2
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ffb6c1; padding: 20px; border-radius: 10px;"> かわいい囲み枠デザインの例2 </div>
ピンクのドット柄囲み枠
かわいい囲み枠デザインの例3
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px dotted #ffc0cb; padding: 20px;"> かわいい囲み枠デザインの例3 </div>
ピンクのリボン柄囲み枠
ピンクのリボン柄囲み枠
ピンクのリボン柄囲み枠
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ffb6c1; padding: 20px; background-image: url('https://example.com/pink-ribbon-pattern.png'); background-repeat: repeat; position: relative;"> <div style="position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background-color: #ffb6c1; padding: 2px 10px; border-radius: 50px; color: white;"> ピンクのリボン柄囲み枠 </div> </div>
ピンクのチェック柄囲み枠
かわいい囲み枠デザインの例5
↓この部分のhtmlをコピペして使ってください。
<div style="border: 2px solid #ffb6c1; padding: 20px; background-image: url('https://example.com/pink-ribbon-pattern.png'); background-repeat: repeat; position: relative;"> <div style="position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background-color: #ffb6c1; padding: 2px 10px; border-radius: 50px; color: white;"> ピンクのリボン柄囲み枠 </div> </div>
タイトル付き囲み枠
＊タイトル ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。
<div style="background: #ffb6c1; border: 1px solid #ffb6c1; padding-left: 20px;"> <span style="color: white;">＊タイトル</span></div> <div style="border: 1px solid #ffb6c1; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
２重囲み枠
ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。
<div style="border: 6px double #ffffff; background: #ffc0cb; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
白枠囲み枠
ここに本文を入れます♪
ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。
<div style=" border: 4px solid #ffe6ee; padding: 2px;"><div style=" background: #ffe6ee; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div></div>
タイトル付き枠
↓この部分のhtmlをコピペして使ってください。
<fieldset style="border: 1px solid #ff6699; font-size: 100%; padding: 20px;"> <legend style="border: 1px solid #ff6699; padding: 5px;">タイトル</legend> ここに本文を入れます♪ </fieldset>
タイトル付き枠
＊タイトル
ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。
<div style="background: #ffb6c1; border: 1px solid #ffb6c1; padding-left: 20px;"> <span style="color: white;">＊タイトル</span> </div> <div style="border: 1px solid #ffb6c1; font-size: 100%; padding: 20px;"> ここに本文を入れます♪ </div>
タイトル付き枠
＊タイトル
ここに本文を入れます♪
↓この部分のhtmlをコピペして使ってください。