タイトルからは可愛らしさの微塵も感じられませんが。
女の子ならでは誰しも好きなはず・・・なドット柄。
CSSだけで水玉模様の背景できますよ！という記事を発見しまして
例のごとく「じゃー、HTMLもいけるはず？」と、素人アイデアで作る、可愛いだけの囲み枠シリーズ第？弾です。
お好きな方がいらっしゃいましたら、ご自由にお持ち帰りください。
各色のドット柄囲み枠の作り方
ブルー系#bfbfffのドット柄囲み枠はこちらです。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div style="border: 1px solid #bfbfff;"><div style="margin: 5px; padding: 10px; background-color: #ffffff; background-image: radial-gradient(#bfbfff 10%, transparent 20%), radial-gradient(#bfbfff 10%, transparent 20%); background-size: 16px 16px; background-position: 0 0, 8px 8px;"><div style="background-color: rgba(255,255,255,0.5);">%TEXT%</div></div></div>
＊AmeCareをご利用の場合は、このままコピペして登録してご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
イエロー系#fff3c3の囲み枠はこちらです。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div style="border: 1px solid #fff3c3;"><div style="margin: 5px; padding: 10px; background-color: #ffffff; background-image: radial-gradient(#fff3c3 10%, transparent 20%), radial-gradient(#fff3c3 10%, transparent 20%); background-size: 16px 16px; background-position: 0 0, 8px 8px;"><div style="background-color: rgba(255,255,255,0.5);">%TEXT%</div></div></div>
＊AmeCareをご利用の場合は、このままコピペして登録してご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
ピンク系#ffbfdeの囲み枠はこちらです。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div style="border: 1px solid #ffbfde;"><div style="margin: 5px; padding: 10px; background-color: #ffffff; background-image: radial-gradient(#ffbfde 10%, transparent 20%), radial-gradient(#ffbfde 10%, transparent 20%); background-size: 16px 16px; background-position: 0 0, 8px 8px;"><div style="background-color: rgba(255,255,255,0.5);">%TEXT%</div></div></div>
＊AmeCareをご利用の場合は、このままコピペして登録してご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
緑系#bfe5d0の囲み枠はこちらです。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div style="border: 1px solid #bfe5d0;"><div style="margin: 5px; padding: 10px; background-color: #ffffff; background-image: radial-gradient(#bfe5d0 10%, transparent 20%), radial-gradient(#bfe5d0 10%, transparent 20%); background-size: 16px 16px; background-position: 0 0, 8px 8px;"><div style="background-color: rgba(255,255,255,0.5);">%TEXT%</div></div></div>
＊AmeCareをご利用の場合は、このままコピペして登録してご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
オリジナルの色で囲み枠を作りたい時
色指定は下図の3箇所で行なっています。
お好みの色コード（6桁）と差し替えて使ってみてくださいね。
【図】
文字のあたりに白の半透明の背景が入ってるので、若干濃い色を使っても大丈夫かも？とは思います。
やってみたい方はトライしてみて。
地味にご好評いただいている、可愛いだけの囲み枠シリーズ第一弾（だったのか？）ストライプ柄の囲み枠はこちらです。
最初、ストライプ柄に使った色で作ろうとしたら、すんごい薄くて老眼の私には辛かった・・・のがタイトルに反映されました。
目がダメになったら、パソコン作業はアウトですね。
大事にします。
ちなみに、今回囲み枠内のテキスト例として「あのイーハトーヴォの〜」というのを使わせてもらいました。
これはMacユーザーにはお馴染みの、フォントの書体例なんかで使われているもので、出典は宮沢賢治の『ポラーノの広場』という作品です。
ひらがな、漢字、カタカナがバランスよく使われている、というのが書体例として使われる理由じゃないか、と読みました。
これは囲み枠の紹介なので、テキストは「テスト」とかでよかったんですが、味気ないので使わせてもらいましたm(_ _)m
最後に、参考にしたサイトはこちら。アイデアお借りしました。ありがとうございました。
