今回は見出しにも使える囲み枠を使ってみたいと思います。
参考にした記事はこちら!
ふせん風囲み枠
<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ここに本文を入れます♪</div>
文章幅に合わせたいときはdisplay:inline-block;を追加。
<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;">ここに本文を入れます♪</div>
みだしっぽく上下の余白をへらしてみます。
<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #fff; font-size: 100%;">ここに本文を入れます♪</div>
いくつか色を変えてバリエーションを作ってみます。
ピンク系
<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
黄色系
<div style="display:inline-block; border: #e9bc00 solid 1px; border-left: #e9bc00 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
緑系
<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
紫系
<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
水色系
<div style="display:inline-block; border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 10px; background: #efefef; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
背景を白にしたい場合はbackground:#fffにする