やあ、こんにちは。CSSの世界へようこそ。
コードを書いていると、「新聞の書き出しみたいに、最初の1文字だけ大きくしたいな」とか「段落の最初の行だけ、ちょっと特別感を出したいな」なんて思うこと、あるよね。
今日はそんな、「ちょっとしたこだわり」を魔法のように叶えてくれる`::first-letter`と`::first-line`という二つの擬似要素について、現場の知見を交えながらお話しするよ。難しく考える必要は全くないから、リラックスして聞いてね。
—
1. 擬似要素って「影の出演者」みたいなもの
まず、「擬似要素（ぎじようそ）」という言葉に怯える必要はないよ。
例えば、HTMLで書かれた文章があるとするよね。でも、CSSはHTMLを直接書き換えるわけじゃない。「まるでそこに、もう一つ別の要素があるかのように」スタイルを当てるための「仕掛け」なんだ。
劇団でいえば、台本（HTML）には書かれていないけど、舞台監督（CSS）の指示で急遽スポットライトを浴びる役者さん……そんなイメージで捉えてみて。
—
2. `::first-letter`：物語の始まりを飾る「ドロップキャップ」
絵本や古書で、ページの最初の一文字だけが異常に大きくて、飾り気がついているのを見たことはないかな？ あれを「ドロップキャップ」と呼ぶんだけど、CSSならたった数行で再現できるんだ。
どうやって使うの？
使い方はとってもシンプル。対象となる要素の後ろに`::first-letter`と書くだけ。
/ 段落（pタグ）の最初の1文字だけを特別扱いする /
p::first-letter {
font-size: 3em; / 文字を3倍大きく /
font-weight: bold; / 太字にする /
color: #ff6b6b; / 優しい赤色に /
float: left; / 左側に寄せて、テキストを回り込ませる /
margin-right: 8px; / 右側に少し余白をあける /
}
ここでのコツ：
`::first-letter`を使うときは、`float`と組み合わせるのが現場の鉄板だよ。これをしないと、大きな文字がどーんと居座って、2行目以降が窮屈になってしまうからね。
—
3. `::first-line`：読み手に「リズム」を与えるガイド役
次は`::first-line`。これは、ブラウザの画面幅に合わせて「今、何文字目が1行目の終わりか」を自動で判断してくれる賢い機能だよ。
例えば、スマホで見ているときは「ここまでが1行目」、PCの大きな画面で見ているときは「ここまでが1行目」と、ブラウザが勝手に計算してくれる。人間が手動で改行を入れるなんてナンセンスなことはしなくていいんだ。
こんな使い方がおすすめ
ブログの導入文や、お知らせの冒頭を際立たせたいときに便利だよ。
/ 段落の最初の1行だけを強調する /
p::first-line {
font-weight: bold; / 1行目だけ太字にしてインパクトを出す /
color: #333; / 少し濃いめの色で引き締める /
text-transform: uppercase; / もし英字なら大文字にしてみたり /
}
注意点：
`::first-line`に適用できるCSSのプロパティは、フォントや色、背景といった「文字に関するもの」がメインだよ。要素のサイズを変えたりするような大掛かりな指示は、ブラウザがうまく計算できなくて混乱しちゃうことがあるから、まずは「見た目の装飾」に絞って使ってみてね。
—
4. 現場からのアドバイス：ハマりやすい罠
僕が駆け出しの頃、よく悩んだポイントを共有するね。
- HTMLの構造に注意： `::first-letter`は、その要素の「中にあるテキストの最初の文字」を探すんだ。もし`
あいうえお
`みたいに、段落の先頭に別のタグが入っていると、うまく動かないことがある。「一番外側のタグの、純粋なテキストの先頭」を狙うのが成功のコツだよ。
- 「コロン」の数： 昔はコロンが一つ（`:first-letter`）だったんだけど、今は二つ（`::first-letter`）書くのが現代の標準（CSS3以降）だよ。一つでも動くブラウザがほとんどだけど、今は「二つ」と覚えておくのが、プロのたしなみだね。
—
最後に：小さなこだわりが、サイトを「プロ」にする
どうだい？ 「最初の1文字」や「最初の1行」をいじるだけで、ただのテキストが、まるで雑誌のコラムのような表情を見せてくれるはずだよ。
Web制作において、大きなレイアウトを作るのも大切だけど、こういう「読者が思わず読みたくなるような小さな工夫」こそが、サイトのクオリティを底上げして、見る人の心に届くデザインを作るんだ。
最初はうまくいかなくても大丈夫。コードを書いて、ブラウザで見て、「あれ、思ったのと違うな」と首をかしげる。その繰り返しこそが、君を一人前のフロントエンドエンジニアに育ててくれるからね。
さあ、エディタを開いて、君のサイトの「書き出し」を素敵に飾ってみよう！応援しているよ。
コメント