【入門編】::first-line擬似要素によるテキスト装飾 – HTML実践ガイド

こんにちは！Web制作の楽しさに目覚めたばかりの皆さん、日々の学習お疲れ様です。

HTMLで文章を書いているとき、「段落の最初の1行だけ、ちょっと特別に目立たせたいな」と思ったことはありませんか？新聞や雑誌の冒頭で見かけるような、あのお洒落な雰囲気です。

実はそれ、CSSの`::first-line`という魔法のツールを使うと、びっくりするほど簡単に実現できちゃうんです。今日は、この「ちょっとしたこだわり」を叶えるためのコツを、一緒に紐解いていきましょう。

—

`::first-line`（ファーストライン）擬似要素は、その名前の通り、ブロックレベル要素（`

`タグなど）の最初の1行だけにスタイルを適用するものです。

想像してみてください。分厚い小説を開いたとき、最初の1行だけ太字だったり、色が変わっていたりすると、なんだか「ここから物語が始まるんだ！」というワクワク感がありますよね。そんな「演出」を、プログラムに自動でやらせてしまうイメージです。

使い方はとてもシンプルです。いつものCSSに、コロンを2つ並べて書くだけ。

/ pタグの最初の1行だけをターゲットにする /
p::first-line {
font-weight: bold; / 太字にする /
color: #ff6b6b; / 少し温かみのある赤色にする /
text-transform: uppercase; / 英語なら大文字にするなど /
}

たったこれだけで、どんなに長い文章でも、ブラウザの幅に合わせて「その時表示されている最初の1行」が自動的にスタイルアップされます！

—

さて、ここで一つだけ「知っておくべき現実」をお話ししますね。実はこの`::first-line`、すべてのCSSプロパティが使えるわけではないんです。

「あれ？色を変えようと思ったのに効かない！」「背景を変えたいのに！」とつまずくポイントは、実はここにあります。

使えるプロパティのルールは、一言で言うと「文字の見た目に関わるもの」に限定されています。

これは「最初の1行」という存在が、ブラウザの画面幅によって刻々と変化する「流動的なもの」だからです。もし最初の1行にだけ「大きな余白」をつけてしまったら、画面幅が変わるたびに余白がガタガタと動いてしまい、Webサイトのレイアウトが崩れてしまいますよね。

ブラウザくんも、あまり複雑な計算をさせられるとパニックになってしまうので、「文字の見た目くらいなら一緒に頑張るよ！」という控えめなルールになっているんです。

—

現場のプロたちは、この`::first-line`をどう使っているかというと……。「ブログの導入文を際立たせる」ときによく活用しています。

例えば、こんなコードを試してみてください。

ようこそ、私たちのWebサイトへ。
今日はCSSの不思議な力についてお話しします。
この最初の1行が、読者の心を掴む大切な入り口になるんですよ。

.intro::first-line {
font-size: 1.2em; / 少し大きくして強調 /
font-weight: bold; / 太字で重厚感を /
color: #333; / 読みやすい濃いグレー /
}

このように設定するだけで、手動で``タグを挟んだりしなくても、CSSだけで綺麗に「導入文の強調」が完了します。コードがスッキリして、後からの管理も楽になりますよね。

—

Web制作を始めたばかりの頃は、「なんでCSSが効かないんだろう？」と悩むことがたくさんあると思います。でも、それは皆さんがちゃんと細部までこだわろうとしている証拠です。

もし`::first-line`で思うような装飾ができないときは、「これは文字の見た目に関係するプロパティかな？」と一度立ち止まって考えてみてください。その「なぜ？」を繰り返すことが、一番の近道です。

まずは今日、ご自身の書いたブログ記事やテスト用のHTMLファイルで、`::first-line`を使って最初の1行を少しだけお洒落に飾ってみてくださいね。きっと、画面の中のテキストが少しだけ「物語」を語り始めるはずですよ。

それでは、また次回の記事でお会いしましょう！Happy Coding!