タイトルの付いた囲み枠のサンプル

2022年3月17日 2022年3月19日 5分32秒

1 タイトルの付いた囲み枠のサンプル
2 CDN
3 インフォメーション用の囲み枠
4 警告用の囲み枠
5 ポイント用の囲み枠

タイトルの付いた囲み枠のサンプル

よく見るタイトルの付いた囲み枠のサンプルです。

必要になるときに、CSSを考えるのと、Font Awesome アイコンを探すのが面倒なのでメモとして残します。

今回は、インフォメーション、警告、ポイントの３種類ですが、基本的には、タイトル部分のアイコンと文言違い、色違いしか代わりはありませんので、自由に変更して使用が可能です。

CSSの位置は、各環境で異なってくると思うので調整が必要です。

CDN

Font Awesome アイコンフォントを使用しているので、CDNでCSSを読み込むようにしてください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">

インフォメーション用の囲み枠

サンプル

インフォメーションの内容をここに書きます

HTML

<div class="box infomation">
  <p>インフォメーションの内容をここに書きます</p>
</div>

CSS

div.box {
  margin-top: 35px;
  padding: 10px;
}

div.box p {
  margin: 0;
}

div.infomation {
  position: relative;
  border: 1px solid rgba(81, 182, 255);
  background-color: rgba(81, 182, 255, .08);
}

div.infomation:before {
  position: absolute;
  top: -29px;
  left: -1px;
  content: "\f05a  インフォメーション";
  font-family: FontAwesome;
  font-size: 15px;
  padding: 0 10px;
  background-color: rgba(81, 182, 255);
  color: #fff;
}

警告用の囲み枠

サンプル

警告の内容をここに書きます

HTML

<div class="box attention">
  <p>警告の内容をここに書きます</p>
</div>

CSS

div.box {
  margin-top: 35px;
  padding: 10px;
}

div.box p {
  margin: 0;
}

div.attention {
  position: relative;
  border: 1px solid rgba(255, 77, 77);
  background-color: rgba(255, 77, 77, .08);
}

div.attention:before {
  position: absolute;
  top: -29px;
  left: -1px;
  content: "\f071  注意";
  font-family: FontAwesome;
  font-size: 15px;
  padding: 0 10px;
  background-color: rgba(255, 77, 77);
  color: #fff;
}

ポイント用の囲み枠

サンプル

ポイントの内容をここに書きます

HTML

<div class="box point">
  <p>ポイントの内容をここに書きます</p>
</div>

CSS

div.box {
  margin-top: 35px;
  padding: 10px;
}

div.box p {
  margin: 0;
}

div.point {
  position: relative;
  border: 1px solid rgba(234, 221, 54);
  background-color: rgba(234, 221, 54, .08);
}

div.point:before {
  position: absolute;
  top: -28px;
  left: -1px;
  content: "\f0a6  ポイント";
  font-family: FontAwesome;
  font-size: 15px;
  padding: 0 10px;
  background-color: rgba(234, 221, 54);
  color: #fff;
}