タグをコピペして使える！囲み枠・ボックスデザイン各種

Mon, 18 Mar 2024 09:22:38 +0000

読者に読んでほしい重要な情報や、注意を促したいポイントなどを囲むことで、視覚的に目立たせることができる、囲み枠（ボックスデザイン）をいろいろ作ってみましたのでご紹介します。

各囲み枠の中にある**【この囲み枠のタグを取得・編集】というリンク**から、HTMLタグをコピペしたり、好みに応じて囲み枠のカスタマイズをしたりもできるページが開きますので、よかったら試してみてください。

シンプルな囲み枠(実線・破線・点線・二重線)

最もシンプルな囲み枠です。

外枠のdivタグと本文のdivタグのみのシンプルな構造で、外枠の方にスタイルを適用することで、色、枠線の種類、角の丸み、影などのバリエーションを実現しています。

構造は同じでも、枠線の太さや色、背景色、角の丸みなどを変えるだけでも、全く違った囲み枠になります。

枠線を無くして、影をつけてみました。

外枠を破線にしたり、

外枠を二重線にすることもできます。

外枠を点線にすると、控えめな感じになりますが、

「点」を大きくして色を変えると、明るく元気な感じにもできます。

こうして見ると、単に目立たせたいだけであれば、実はこの囲み枠だけあれば十分かもしれません。

タイトルが枠線の上

囲み枠の本体に加えて、上部にタイトルを書くことができる囲み枠です。

囲み枠の中で伝えたい内容をタイトル部分で端的に言うことで、より伝わり易くなることが期待できます。

こちらは、fieldsetとlegendというタグを使ったベーシックなタイプのタイトル付き囲み枠です。

このタグを使うと、タイトルの背景を透過しても、タイトルと重なる部分の外枠が自動で消えてくれるのでとても便利です。

ここにタイトル

ほかに、タイトルが囲み枠の枠線の外側にタブのように貼り付くタイプ。