BOXにタイトルを付けるCSSの生成

htmlの「div」などブロック要素に見やすくタイトルを付けるのはCSSだけで可能です。
タイトルの位置は自由でDIV枠線の上や枠線内など指定することが出来ます。

当ページでは、DIVタグの「title」属性に表示するタイトルを設定できるようにしていますので、1つのCSSを各所でタイトルを変更しながら利用できます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

タイトルの位置や枠線の幅・色、文字サイズなど自由に変更できますので、いろいろお試しください。

<div class="box" title="ここにタイトル">
  BOXにタイトルを付ける
</div>

.box {
  margin        : auto;                 /* サンプル用 中央寄せ  */
  box-sizing    : border-box;           /* 罫線も含む長さ       */
  width         : 100%;                 /* BOXの幅              */
  max-width     : 500px;                /* BOXの最大幅          */
  height        : 100px;                /* BOXの高さ            */
  padding       : 23px;                 /* 文字の位置合わせ     */
  font-size     : 30px;                 /* 文字サイズ           */
  text-align    : center;               /* 文字位置             */
  color         : #7f4600;              /* 文字色               */
  background    : #ffcc99;              /* BOXの背景色          */
  border        : 7px dotted #7f4600;   /* 枠線の指定           */
  border-radius : 1px;                  /* 角丸の指定           */
  box-shadow    : 0 0 0 12px #ffcc99;   /* 影を利用した外余白   */
}