ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

:first-lineの利用

:first-lineの使い方

:first-lineは疑似要素の1つで、「要素の最初の1行目」にスタイルを適用させることができます。

例えば、以下のような文書があるとします。

<p>さきちん絵はがきの紹介<br>
さきちん絵はがきは、無料で各種テンプレートがダウンロードできるWebサイトです。</p>

<p>年賀状や暑中・寒中見舞い、四季の絵はがきなどがあります。<br>特に人気なのが年賀状。多くの方が見てくださってます。感謝♪</p>

この中で<p>は2つ出てきています。

:first-lineはそれぞれの<p>の1行目、つまり<br>以前の行にスタイルを適用します。

:first-lineの説明

具体的な使用例

例として、さきほどの文書に:first-lineを使ってスタイルを適用してみます。

[CSSの記述例]
p:first-line {
color:#F00;  ← 赤色
}
[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>:first-lineの利用</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p>さきちん絵はがきの紹介<br>
さきちん絵はがきは、無料で各種テンプレートがダウンロードできるWebサイトです。</p>

<p>年賀状や暑中・寒中見舞い、四季の絵はがきなどがあります。<br>特に人気なのが年賀状。多くの方が見てくださってます。感謝♪</p>

</body>
</html>

これをブラウザで確認してみると、以下のように表示されます。

:first-lineが適用された図

このように:first-lineを使えば「最初の1行目に表示された箇所」にのみ、スタイルを適用させることができます。

覚えておきたいポイント

要素の一行目に適用される

:first-lineを使えば、1行目の文字だけ大きくしたり、色を変えたりといった表現が可能です。他のスタイルと組み合わせることにより、様々な表現が可能となります。

:first-letterの利用
« 前のページへ :first-childの利用

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。