タグをコピペして使える！囲み枠・ボックスデザイン各種

最もシンプルな囲み枠です。

外枠のdivタグと本文のdivタグのみのシンプルな構造で、外枠の方にスタイルを適用することで、色、枠線の種類、角の丸み、影などのバリエーションを実現しています。

構造は同じでも、枠線の太さや色、背景色、角の丸みなどを変えるだけでも、全く違った囲み枠になります。

枠線を無くして、影をつけてみました。

外枠を破線にしたり、

外枠を二重線にすることもできます。

外枠を点線にすると、控えめな感じになりますが、

「点」を大きくして色を変えると、明るく元気な感じにもできます。

画面に単色の付箋紙を貼り付けたような見た目の囲み枠です。

伝えたい言葉を、メモ書きのように貼り付けるのに向いているのではないでしょうか。

付箋が落ちないようテープで貼り付けたような効果や、

傾けて貼る効果も使えます。

昔から学校にあった黒板の雰囲気を意識した囲み枠です（最近は無い学校もあるそうですね）。

文字色を白や明るめの色にすると、より雰囲気が出ると思います。

シンプルな囲み枠との違いは、枠の内側に、囲み枠の影と同じ方向の細い影と影と反対方向に細いハイライトを入れています。

板面が緑ではなく、青っぽい黒板にすることもできます。
　
　

背景色と枠線色を変更すると、ホワイトボード風や、
　
　

コルクボード風にすることも可能です。
　
　

外枠をぼかして、ふんわり柔らかい感じにした囲み枠です。

優しくて柔らかい雰囲気を表現したい時などにいかがですか？

明るめの色を使って背景と枠線を同じ色にすると、より柔らかい感じになりますね。

さらに、文字の色も同系にしても良いかもしれません。

濃いめの背景色に背景よりも明るい枠線にすると、周囲を光らせているようにも見えます。

左上と右下にカギ括弧をつけたような囲み枠です。

「これに注意してください！」と言いたい時などに良いのではないでしょうか。

利用シーンは限られるかもしれませんが、暗い色の背景に派手めの色のかぎ括弧という組み合わせは、非常によく目立ちますね。

囲み枠全体の左右を括弧で囲ったような囲み枠です。

中央揃えでお知らせを書くのに向いているように思います。

括弧の曲がり具合の調整次第で円筒のようにも見えますし、

片側に丸穴を並べたルーズリーフ風の囲み枠です。

穴の位置は、上または左から選べます。

穴が左の場合はこんな感じです。

少し穴を小さくしてみました。

もちろん色を変えることもできます。

このくらい濃い色にすると、プラ板か、インデックス用の厚手の紙のように見える気がします。