先頭の文字のスタイルを設定する - first-letter疑似クラスの利用 - CSS

スタイルシートで最初の文字のスタイルを設定するコードを紹介します。

最初の文字のスタイル設定

最初の文字のスタイルを設定する場合は"first-letter"疑似クラスを利用します。

書式

:first-letter{
  (スタイル記述)
}

特定のタグでの指定

(タグ名):first-letter{
  (スタイル記述)
}

特定のクラスでの指定

.(クラス名):first-letter{
  (スタイル記述)
}

特定のIDでの指定

#(ID名):first-letter{
  (スタイル記述)
}

例

コード

下記のコードを記述します。

LetterSelector.css

p {
  font-size:14px;
}

p:first-letter {
  font-size:22px;
}

解説

p:first-letter の記述によりpタグの最初の一文字は22pixelの大きな文字を表示します。

LetterSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="LetterSelector.css" />
</head>
<body>
    <p>ペンギンは空を飛べないが、巧みに海の中を泳ぎ回ることができる。</p>
    <p>ラクダの背中のこぶの中には脂肪が入っており、エネルギーを蓄えるだけでなく、
        断熱材として働いている。</p>

</body>
</html>

表示結果

上記のHTMLファイルを表示すると下図の画面が表示されます。先頭の文字だけサイズが大きく表示されます。

このページのキーワード

先頭の文字のスタイルを指定する - first-letter疑似クラスの利用
先頭の文字のスタイルを適用する - first-letter疑似クラスの利用

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次