今回もおしゃれな囲み枠を使ってみました。
参考にした記事はこちら！
１．ノーマルメモ帳風
メモ帳風囲み枠のコードはこちら。
いったんメモ帳にコピーしてから使ったほうがよいようです。
<div style="display: inline-block; background: #F7F7F7; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;">
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;"><strong>文章</strong></div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
</div>
これをHTML編集画面にはりつけるとこうなります。↓
「文章」と書かれたところに文字を入れていきます。
コードを張り付けたあとは、「みたまま編集」画面で入力できます。
うーん、おもしろい！
書きたい行数に合わせてコードを増やしたり減らしたりして調節できますね！
２．色付きのメモ帳風
つぎに色付きのメモ帳風囲い枠を使ってみます。
<div style="display: inline-block; background: #f6efdb; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 2px #ECE1B9;">文章</div>
</div>
これをHTML編集画面に貼り付けるとこうなります。↓
３．背景白のメモ帳風
次に枠だけ色のついたメモ帳風囲い枠を使ってみます。
<div style="display: inline-block; background: #FFFFF; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #FFF8DC; border: double 3px #ECE1B9;">
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: solid 1px #ECE1B9;">文章</div>
</div>
これをHTML編集画面に貼り付けるとこうなります。↓
「文章」のところに実際文字を入れるとこんな感じ。
シンプルなので使いやすそうですね！
定型文に登録しておけば簡単に使えそうです。
色を変えていくつか作ってみます。
・ピンク系
#FFF8DCの部分を#ffeff7に、
#ECE1B9の部分を#ff93c9に変更してみました。
・緑系
#FFF8DCの部分を#e0ffe0に、
#ECE1B9の部分を#a8ffa8に変更してみました。
・オレンジ系
#FFF8DCの部分を#f8b862に、
#ECE1B9の部分を#db8449に変更してみました。
・青系
#FFF8DCの部分を#bbc8e6に、
#ECE1B9の部分を#8491c3に変更してみました。
ポイントを箇条書きで書きたいときに役立ちそうですね！
