今回もおしゃれな囲み枠を探してみました。
参考にした記事はこちら！
囲み枠２重線 文字白
文字を白抜きにして枠を２重線にします。
<div style="background: #696969; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
この囲み枠は見出しっぽく使えそうですね。
#696969の部分を変えていくつかカラーバリエーションを作ってみます。
・赤系#df7163
<div style="background: #df7163; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
文章の大きさに合わせたい場合はdisplay:inline-block;を追加します。
<div style="display:inline-block; background: #df7163; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
・黄色系#e6b422
<div style="background: #e6b422; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
文章の大きさに合わせたい場合はdisplay:inline-block;を追加します。
<div style="display:inline-block; background: #e6b422; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
・緑系#3b7960
<div style="background: #3b7960; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
文章の大きさに合わせたい場合はdisplay:inline-block;を追加します。
<div style="display:inline-block; background: #3b7960; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
・青系#274a78
<div style="background: #274a78; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
文章の大きさに合わせたい場合はdisplay:inline-block;を追加します。
<div style="display:inline-block; background: #274a78; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
・紫系#7058a3
<div style="background: #7058a3; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
文章の大きさに合わせたい場合はdisplay:inline-block;を追加します。
<div style="display:inline-block; background: #7058a3; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
・見出し風に余白を狭める
最後に見出しっぽく上下の余白を小さくしてみます。
paddingの後ろの数字で調整します。
数字が大きくなれば余白が広がり、小さくなれば余白が狭くなります。
15pxから10pxに変更してみます。
<div style="background: #696969; padding: 10px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
変更するとこんな感じ。↓
文章を入れます◯◯◯
文章幅に合わせたい場合はdisplay:inline-block;を追加します。
<div style="display:inline-block; background: #696969; padding: 10px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
文章を入れます◯◯◯
さらに余白を小さくしてみます。
<div style="display:inline-block; background: #696969; padding: 5px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>
余白を5pxに変更するとこんな感じ。↓
文章を入れます◯◯◯
見出しに使うなら余白はこのくらいでもよさそうですね。
