first-letter疑似要素
アセンブラの魔女 ⧫ CSS ⧫ 疑似要素 ⧫ first-letter疑似要素

　first-letter擬似要素は、ブロック・コンテナ要素（block container element）の最初の行の最初の文字にスタイルを適用します。

　この「最初の文字」は、float属性がnoneの時はインラインレベルと同様、それ以外の時はfloat要素と同様です。

　first-letter擬似要素では、次のような属性やスタイルを設定することができます。

  • font
  • text-decoration
  • text-transform
  • letter-spacing
  • word-spacing(when appropriate)
  • line-height
  • float
  • vertical-align (float属性がnoneの時)
  • margin
  • padding
  • border
  • color
  • background
E:first-letter

　イニシャルキャップ（initial caps）は、ブロック・コンテンツ要素のパラグラフの最初の文字を大きく表示する装飾法です。first-letter疑似要素を使えば、イニシャルキャップを作ることができます。

p:first-letter { font-size: 3em; font-weight: normal }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>first-line疑似要素の使用例</title>
<meta name="description" content="first-line疑似要素の使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="first_letter_sample.css" type="text/css">
</head>
<body>
<p>
first-letter擬似要素は、ブロック・コンテナ要素（block container element）の最初の行の最初の文字にスタイルを適用します。
この「最初の文字」は、float属性がnoneの時はインラインレベルと同様、それ以外の時はfloat要素と同様です。
</p>
</body>
</html>
HTML表示

first-letter擬似要素は、ブロック・コンテナ要素（block container element）の最初の行の最初の文字にスタイルを適用します。 この「最初の文字」は、float属性がnoneの時はインラインレベルと同様、それ以外の時はfloat要素と同様です。

　イニシャルキャップ（drop caps）は、イニシャルキャップと同じようにパラグラフの最初の文字を大きく表示しますが、2行目（以降）を最初の文字の横に配置します。そのためには、first-letterを適用する要素のレイアウトとfirst-letterで適用するレイアウトの間でフォントサイズや行間などのバランスを取る必要があります。

P              { font-size: 13pt; line-height: 1 }
P:first-letter {
    font-size: 200%; 
    font-weight: bold; 
	float: left 
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>first-line疑似要素の使用例</title>
<meta name="description" content="first-line疑似要素の使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="first_letter_sample2.css" type="text/css">
</head>
<body>
<p>
擬似要素 first-letterは、ブロック・コンテナ要素（block container element）の最初の行の最初の文字にスタイルを適用します。
この「最初の文字」は、float属性がnoneの時はインラインレベルと同様、それ以外の時はfloat要素と同様です。
</p>
</body>
</html>
HTML表示

擬似要素 first-letterは、ブロック・コンテナ要素（block container element）の最初の行の最初の文字にスタイルを適用します。 この「最初の文字」は、float属性がnoneの時はインラインレベルと同様、それ以外の時はfloat要素と同様です。

▼ Property