すっきりと見やすいシンプルな見出し付き囲み枠

すっきりと見やすいシンプルな見出し付き囲み枠

2016/03/27 この囲み枠の作成ツール(ジェネレーター)を作ってみました

こんにちは、松本です。

すっきりと見やすいシンプルな見出し(タイトル)付きの囲み枠を作ってみました。

以下、色のバリエーションを幾つかご紹介します(と言っても見出しの上側の枠線の色が違うだけですが^^;)

タグも一緒にご紹介しますので、コピペで使って頂ければと思います。

(【注意】記事エディタによっては直接コピペすると文字化けしておかしくなってしまいます。その場合、一度メモ帳などにコピペしたものを、再度エディタにコピペするとうまくいくようです。)

シンプルな見出し付き囲み枠(赤)

まず、赤です。

本当の真っ赤(#FF0000)ではなく、少し濃い(暗めの)赤になっています。

★タイトル★
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。
<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #cc0000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(緑)

次は、緑です。

こちらも少し濃い緑になっています。

★タイトル★
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。
<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #008800;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(青)

次は、青です。

やはり濃い青にしてあります。

★タイトル★
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。
<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000aa;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(ピンク)

そして、ピンクです。

こちらは、蛍光ピンクのようなハッキリとした色です。

★タイトル★
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。
<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #ff0066;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(その他の色)

最後に、ご自分で好みの色にしたい場合のやり方をご紹介します。

色コードを1か所変えるだけなので簡単だと思います。

★タイトル★
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■
■囲み枠の中に書く内容■

<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #000000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

ご自分で色を決めたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおしていただければOKです。

色コードは、こちらのWEB色見本のサイト様が参考になると思います。

また、400pxの部分を変更すると枠の幅も変更することができますので、こちらも合わせて設定してみてください。

もちろん、★の部分に見出し、■の部分に囲み枠の中の内容を書くのは同じです。

以上、コピペで使える、すっきりと見やすいシンプルな見出し付き囲み枠を紹介をさせて頂きました。

もしよかったら試してみてくださいね。

関連記事

シンプルな見出し付き囲み枠の作成ツール(ジェネレーター)を作ってみました
斜めストライプ模様の囲み枠
ワッペン風(デニム調)の囲み枠
ワッペン風(リネン調)の囲み枠
付箋風の囲み枠
黒板風の囲み枠