囲み枠も素敵なものがたくさん作られていてどれを使おうか迷うほどです。
まずはシンプルな囲み枠を使ってみます。
シンプルな直線の囲み枠
<div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">本文を入れる</div>
このコードをHTML編集画面に貼り付けるとこうなります。
線の太さは「2」の部分を変えればよさそうです。
「5」にするとこんな感じ。
線の色は#FFC0CBの部分を変えればよさそうです。
たとえば（#2a83a2）を使ってみると、
こんな感じになります。
シンプルなだけに、いろいろと応用がききそうですね！
次にシンプルな２重線の囲み枠を使ってみます。
シンプルな2重線の囲み枠
<div style="padding:10px;border-radius: 10px; border: 5px double #FFCCCC;">本文を入れる</div>
枠内で改行したい場合は「Ｓｈｉｆｔ＋Ｅｎｔｅｒ」を押さないと、枠からはみ出てしまいます。
明日は曇りのち雨。
お出かけには傘を忘れずに。
色を変えたい場合は#のあとを変えることで、自分の好きな色に変更できます。
サンプルをいくつか作ってみます。
1.パステル
赤系（#ffc1c1）
青系（#c1e0ff）
黄色系（#ffffc1）
緑系（#c1ffc1）
紫系（#e0c1ff）
2.ポップ
赤系（#ff0099）
青系（#6600ff）
黄色系（#ffff33）
緑系（#00ff66）
紫系（#9900ff）
3.和風
赤系（#f0908d）
青系（#89c3eb）
黄色系（#f8e58c）
緑系（#a8bf93）
紫系（#a59aca）
4.エレガント
赤系（#ab0f50）
青系（#2a83a2）
黄色系（#d6c299）
緑系（#47885e）
紫系（#6e5064）
5.モノトーン
黒（#262626）
灰色（#868686）
薄い灰色（#c6c6c6）
コードはこちらの記事を参考にさせていただきました。
