ピンク系囲み枠を集めました

レッスンで囲み枠を使うとき、最もリクエストの多いピンク系。
いろいろな種類があるかと思いますが、まとめておきますね~

好きな枠がありましたら、こちらをコピーして、HTML表示に貼り付けして使ってくださいね~。

オレンジ系が好きな方はこちらですよ~

 内側:  線:濃いピンク・点    

<div style=”background:#ffffff; padding:10px; border-radius: 10px; border: 2px dotted #ff00ff;”>あいうえお<br>かきくけこ<br></div>
あいうえお
かきくけこ

 内側:薄いピンク  線:濃いピンク・点   四角 

<div style=”background:#ffeeee; padding:10px; border:2px dotted #ff00ff;”>あいうえお<br>かきくけこ<br></div>

あいうえお
かきくけこ

 内側:薄いピンク 線:濃いピンク・点  角: 

<div style=”background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff00ff;”>あいうえお<br>かきくけこ<br></div>

あいうえお
かきくけこ

 内側: 線:濃いピンク 角:四角

<div style=”background:#ffffff; padding:10px; border:2px solid #ff00ff;”>あいうえお<br>かきくけこ<br></div>

あいうえお
かきくけこ

 内側:薄ピンク 線:濃いピンク 角:四角

<div style=”background:#ffeeee; padding:10px; border:2px solid #ff80ff;”>あいうえお<br>かきくけこ<br></div>

あいうえお
かきくけこ

 内側: 線:濃いピンク・二重 角:

<div style=”background:#ffffff; padding:10px;border-radius: 10px; border: 5px double #ff00ff;”>あいうえお<br>かきくけこ<br></div>

あいうえお
かきくけこ

タイトル付きA 内側: 線:濃いピンク 角:四角

<font style=”padding:6px 10px; background:#ff00ff; color:#ffffff; font-weight:bold;”>■タイトルA■</font><div style=”border:1px solid #ff00ff; padding:10px; font-size:0.9em; margin-top:2px;”>あいうえお<br>かきくけこ</div>

■タイトルA■

あいうえお
かきくけこ

タイトル付きB 内側: 線:濃いピンク 角:
<div style=”height:12px;”><span style=”margin-left:8px; padding:6px 10px; background:#ff00ff; color:#ffffff; font-weight:bold;border-radius:5px;”>■タイトルB■</span></div><div style=”border:2px solid #ff00ff; padding:25px 12px 10px; font-size:1em;border-radius:5px;”>あいうえお<br>さしすせそ</div>

■タイトルB■
あいうえお
さしすせそ

なお、掲載にあたり、囲み枠と言えばこの先生の記事を参考にさせていただきました。
いつもありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です