文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > BOXのタイトル

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

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

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

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

タイトルを変更してみよう

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

タイトルの位置・大きさ
横余白
縦余白
角丸
枠線
文字
タイトルの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
BOXにタイトルを付ける
使用したhtml
<div class="box" title="ここにタイトル">
  BOXにタイトルを付ける
</div>
生成したCSS
.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;   /* 影を利用した外余白   */
}
「border」の使い方は以下を参照ください。
border 「枠線の設定」の構文
ページTOP
広告
広告

色々なBOXタイトル

いろいろなタイトル位置

タイトルの位置は自由に配置できます。「transform」を利用すると「斜め」のタイトルを付けることもできます。

ワンポイント★
HTML
CSS
表示
枠内POINTマーク
HTML
CSS
表示
タイトルを斜めに
HTML
CSS
表示
ページTOP

動くタイトル

「アニメーション」を利用すると、タイトルを回転させたり、色を変化させたりすることが出来ます。

アニメーション「animation」の使い方は以下を参照ください。
animation 「アニメーション」
タイトルを回転
HTML
CSS
表示
タイトルを点滅
HTML
CSS
表示
タイトル色を変更
HTML
CSS
表示
ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン