今回は横長タイトル付き囲み枠を使ってみたいと思います。
参考にした記事はこちら！
横長タイトル付き囲み枠
<div style="padding: 20px 20px 10px; margin: 2em 0; background: #e4f3ff;"><div style=" margin: -20px -20px 10px; font-size: 1.2em; padding: 4px 10px; text-align: center; background: #3f51b5;font-weight: bold; color: #ffffff;">タイトル</div> <p style=" margin: 0; padding: 0;">内容</p></div>
このコードをHTML編集画面に貼り付けるとこうなります↓
内容
色を変えてバリエーションを作ってみます。
ピンク系
<div style="padding: 20px 20px 10px; margin: 2em 0; background: #fff4f9;"><div style=" margin: -20px -20px 10px; font-size: 1.2em; padding: 4px 10px; text-align: center; background: #f6bfbc;font-weight: bold; color: #ffffff;">タイトル</div> <p style=" margin: 0; padding: 0;">内容</p></div>
このコードをHTML編集画面に貼り付けるとこうなります↓
内容
黄色系
<div style="padding: 20px 20px 10px; margin: 2em 0; background: #ffffea;"><div style=" margin: -20px -20px 10px; font-size: 1.2em; padding: 4px 10px; text-align: center; background: #fdd35c;font-weight: bold; color: #ffffff;">タイトル</div> <p style=" margin: 0; padding: 0;">内容</p></div>
このコードをHTML編集画面に貼り付けるとこうなります↓
内容
緑系
<div style="padding: 20px 20px 10px; margin: 2em 0; background: #efffef;"><div style=" margin: -20px -20px 10px; font-size: 1.2em; padding: 4px 10px; text-align: center; background: #a3d6cc;font-weight: bold; color: #ffffff;">タイトル</div> <p style=" margin: 0; padding: 0;">内容</p></div>
このコードをHTML編集画面に貼り付けるとこうなります↓
内容
紫系
<div style="padding: 20px 20px 10px; margin: 2em 0; background: #f7efff;">
<div style="margin: -20px -20px 10px; font-size: 1.2em; padding: 4px 10px; text-align: center; background: #d1bada; font-weight: bold; color: #ffffff;">タイトル</div>
<p style="margin: 0; padding: 0;">内容</p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
内容
最後に要点をまとめるのに使えそうですね！
横長タイトル付き囲み枠のカラーバリエーション
・ピンク系・黄色系
・緑系
・紫系
