今回も見出しに使えそうなおしゃれな囲み枠を使ってみます。
参考にした記事はこちら！
囲み枠２重線 文字黒
枠は２重線、文字は黒です。
<div style="background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;">ここに文章を入力します</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
#F7F7F7が背景色、#A1A1A1が線の色ですね。
box-shadowで枠の外側の色を指定できるんですね。
「0 0 0 10px」は外側の太さかと思います。
これを変更していくつかカラーバリエーションを作ってみます。
・ピンク系
<div style="background: #ffefff; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #ffefff; padding: 10px;">ここに文章を入力します</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
文章の長さに合わせる場合はこちら。
<div style="display: inline-block; background: #ffefff; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #ffefff; padding: 10px;">ここに文章を入力します</div>
・黄色系
<div style="background: #ffffef; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #ffffef; padding: 10px;">ここに文章を入力します</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
枠の色を変えてみたバージョンはこちら。
<div style="background: #ffffef; border: 4px double #ffc489; box-shadow: 0 0 0 10px #ffffef; padding: 10px;">ここに文章を入力します</div>
・緑系
<div style="background: #f4fff9; border: 4px double #99ffcc; box-shadow: 0 0 0 10px #f4fff9; padding: 10px;">ここに文章を入力します</div>
・水色系
<div style="background: #f4ffff; border: 4px double #93ffff; box-shadow: 0 0 0 10px #f4ffff; padding: 10px;">ここに文章を入力します</div>
・紫系
<div style="background: #f9f4ff; border: 4px double #c184ff; box-shadow: 0 0 0 10px #f9f4ff; padding: 10px;">ここに文章を入力します</div>
枠の外にも枠がある感じで、より目立ちそうですね！
borderの線の種類を変えればさらにいろいろ作れそうです！
