cman.jp > パーツ作成メニュー > 文字のデザイン > 先頭文字のデザイン

先頭文字の大きさ・色を指定するCSS生成

cssの疑似要素セレクタ「::first-letter」を使用すれば、文書の先頭文字のみだけ文字サイズの変更や色の変更などの装飾することが出来ます。
当ページでは簡単操作でCSS作成することが出来ます。

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

文書の先頭1文字をデザインしてみよう

先頭文字サイズ

先頭文字の余白

上		下
左		右

2文字目以降の開始位置

上合わせ下合わせ

先頭文字の色

他▶

透明度

あいうえおかきくけこさしすせそたちすてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

使用したhtml

<span class="firstStr">あいうえおかきくけこさしすせそたちすてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</span>

生成したCSS

 /*--- サンプル表示の枠 ---------------------------- */
.firstStr {
  display      : inline-block;
  width        : 200px;              /* 枠のサイズ   */
  background   : #ffffff;            /* 背景色       */
  border       : 1px solid #999;     /* 枠線         */
  font-size    : 12pt;               /* 文字のサイズ */
  text-align   : left;               /* 文字位置     */
  padding      : 5px;                /* 枠の余白     */
  line-height  : 1.2;                /* 1行の高さ    */
}
 /*--- 先頭文字の定義 ------------------------------ */
.firstStr:first-letter {
  font-size    : 3em;                /* 文字サイズ   */
  padding      : 0px;                /* 余白         */
  color        : #ff0000;            /* 文字の色    */
  float        : left;               /* 2文字目の位置合わせ */
}

疑似要素セレクタ「::first-letter」は以下でご確認ください。
疑似要素セレクタ

ページTOP

色々な先頭文字デザイン

先頭文字のみ影付け

先頭文字のみ影付き

<span class="sample1">先頭文字のみ影付き</span>

<style type="text/css">
.sample1 {
  display       : inline-block;
  font-size     : 20pt;
}
.sample1:first-letter {
  font-size     : 30pt;
  text-shadow   : 3px 3px 1px #666;
  padding-right : 5px;
}
</style>

ページTOP

先頭文字のみ背景色を付ける

先頭文字のみ背景色

<span class="sample2">先頭文字のみ背景色</span>

<style type="text/css">
.sample2 {
  display: inline-block;
  font-size     : 20pt;
  line-height   : 1;
}
.sample2:first-letter {
  font-size     : 30pt;
  color         : #fff;
  background    : red;
  padding       : 0 8px;
}
</style>

ページTOP

注意事項

疑似要素セレクタ「::first-letter」には、「font」「color」「background」「margin」「padding」「border」「text-decoration」「text-transform」「line-height」「float」「clear」のプロパティが指定可能です。

ページTOP

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？