先頭の行のスタイル設定 - first-line疑似クラス - CSS

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

最初の行のスタイル設定

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

書式

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

特定のタグでの指定

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

特定のクラスでの指定

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

特定のIDでの指定

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

コード例

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

LineSelector.css

p:first-line {
  color:#ff6a00;
}

p {
  color:#808080;
}

LineSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link rel="stylesheet" type="text/css" href="LineSelector.css" />
   <title></title>
</head>
<body>
    <p>
        一行目のテキストです<br />
        二行目のテキストです<br />
        三行目のテキストです<br />
    </p>

    <p>
        ラクダです<br />
        クジラです<br />
        イルカです<br />
    </p>

</body>
</html>

表示結果

上記のHTMLファイルを表示すると下図の画面が表示されます。

著者

とりっち

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

目次