CSSの::first-letterと::first-lineを完全ガイド！文章をオシャレにする魔法のデザイン

::first-letterと::first-lineの使い方と効果的なデザイン例

先生と生徒の会話形式で理解しよう

生徒

「雑誌や小説の始まりみたいに、最初の一文字目だけを大きくして目立たせることってできますか？」

先生

「はい、CSSの『::first-letter』を使えば、一文字目だけを狙ってデザインを変えることができますよ。一行目だけを変える『::first-line』という便利なものもあります。」

生徒

「一文字ずつ特別なタグで囲まなくてもいいんですか？」

先生

「その通りです！自動的に最初を見つけてくれる魔法のような設定なんです。さっそく使い方をマスターしましょう！」

1. 擬似要素という便利な仕組みについて

Webサイトのデザインを細かく設定するときに使うCSS（シーエスエス）には、擬似要素（ぎじようそ）という特別な仕組みがあります。これは、HTMLで書いた文章の特定のパーツ、例えば「最初の一文字」や「最初の一行」などを、プログラムが自動的に判断してデザインを適用してくれる機能です。

プログラミング未経験の方にとって、文章の一部だけを変えるのは大変な作業に思えるかもしれません。通常なら、変えたい文字をわざわざ特別な枠（タグ）で囲む必要がありますが、擬似要素を使えばその手間が一切かかりません。パソコンを初めて触る方でも、ルールさえ覚えればプロのようなレイアウトが作れるようになります。まずはこの擬似要素の代表格である二つの設定について深く掘り下げていきましょう。

2. first-letterで一文字目をドラマチックに変える

::first-letter（ファーストレター）は、段落や文章のまさに一番最初の文字だけにスタイルを適用する設定です。よく欧米の古い本やオシャレな雑誌で、物語の最初の文字だけが大きく、色鮮やかに描かれているのを見たことはありませんか？あのデザインをWeb上で再現できるのがこの機能です。

一文字目が大きく強調されるだけで、読者の視線が自然と文章の始まりに誘導されます。これを「ドロップキャップ」と呼ぶこともあります。サイトの第一印象をグッと引き締め、高級感や物語性を演出したいときに非常に効果的です。それでは、具体的な書き方を確認してみましょう。


<style>
    .intro-text::first-letter {
        color: #e63946;
        font-size: 3rem;
        font-weight: bold;
        float: left;
        margin-right: 8px;
    }
</style>

<div class="p-4 border bg-light">
    <p class="intro-text">
        むかしむかし、あるところに大きな山がありました。その山には、不思議な力を持つと言われる美しい花が咲いていました。多くの旅人がその花を探しに訪れましたが、誰も見つけることはできませんでした。
    </p>
</div>

ブラウザ表示

3. first-lineで一行目の重要性を引き立てる

次に紹介するのは、::first-line（ファーストライン）です。これは名前の通り、文章の最初の一行目だけを装飾する機能です。ニュース記事のリード文や、ブログの冒頭で「ここが一番伝えたい一行目です」と強調したいときに役立ちます。

面白いのは、この「一行目」という範囲が、ブラウザの横幅に合わせて自動で変わるという点です。パソコンで見ているときは長めの一行、スマホで見ているときは短めの一行になりますが、CSSがその時々の一行目を正確に判断して、指定したデザインを維持してくれます。文字を太くしたり、背景に色をつけたりして、読み手の興味を惹きつけましょう。


<style>
    .article-body::first-line {
        color: #1d3557;
        font-weight: bold;
        text-decoration: underline;
        background-color: #f1faee;
    }
</style>

<div class="p-4 border">
    <p class="article-body">
        最新のWebデザイン動向についてお伝えします。最近ではシンプルなレイアウトの中に、大胆なタイポグラフィを取り入れる手法が流行しています。特に擬似要素を活用した細かい文字装飾は、ユーザーの視覚的な体験を向上させるために非常に重要です。
    </p>
</div>

ブラウザ表示

4. 初心者がハマりやすい注意点とルール

これらの便利な機能には、いくつか守らなければならないルールがあります。まず、::first-letter や ::first-line が使えるのは、ブロックレベル要素と呼ばれるタグに対してだけです。具体的には p タグ（段落）や div タグ（ひとまとまりの枠）などです。横に並ぶ性質を持つ span タグなどには直接効かないことがあるので注意しましょう。

また、使えるCSSの種類にも制限があります。例えば、::first-line の中で文字の配置（text-align）を無理やり変えようとしてもうまくいかないことがあります。基本的には「色」「フォントの種類」「背景」「太さ」などの、文字そのものの見た目を変える項目がメインだと覚えておくとスムーズです。パソコンの設定でフォントサイズを変えているユーザーがいることも想定し、あまりに極端な設定は避けるのがプロの優しさです。

5. 組み合わせ技でさらにオシャレにする応用例

一文字目と一行目を同時に設定することも可能です。一文字目を巨大にして、さらに一行目全体を別の色にする……といった組み合わせも自由自在です。これにより、まるでプロのデザイナーが一文字ずつ丁寧に配置したかのような美しいページが完成します。

ここでは、ニュースサイトのような少しカッチリとした、しかし目立つデザインを作ってみましょう。見出しの下にある導入文に適用すると、記事の「重み」が増して見えるから不思議です。CSSは、単なる色付けの道具ではなく、情報を伝えるための強力な武器になります。


<style>
    .news-box::first-letter {
        font-size: 2.5rem;
        color: #2a9d8f;
        border: 2px solid #2a9d8f;
        padding: 4px 8px;
        margin-right: 5px;
        border-radius: 4px;
    }
    .news-box::first-line {
        letter-spacing: 2px;
        color: #264653;
    }
</style>

<div class="p-4 shadow-sm border rounded">
    <p class="news-box">
        本日発表された新技術は、私たちの生活を根本から変える可能性を秘めています。多くの専門家が注目しており、今後の展開に期待が寄せられています。まずは基盤となるインフラの整備が急務となっており、官民一体となった取り組みが始まっています。
    </p>
</div>

ブラウザ表示

6. 記号や引用符がある場合の挙動を知っておこう

文章の始まりが文字ではなく、「（かぎかっこ）」や「“（ダブルクォーテーション）」などの記号だった場合、::first-letter はどうなるでしょうか？答えは、「記号とその直後の文字をセット」として扱ってくれます。これは非常に賢い仕様です。

もし記号だけが大きくなって、文字が小さいままだったら、見た目がバラバラになってしまいますよね。CSSは文脈を理解し、記号を含めた「文章の出だし」を一つの塊として大きくしてくれます。これにより、日本語特有の表現である会話文から始まる文章でも、美しさを損なわずにデザインすることができます。細かい点ですが、知っていると一歩リードできる知識です。

7. 背景画像と組み合わせてさらにリッチな表現へ

一文字目の背景に画像を入れることも可能です。たとえば、一文字目の後ろに小さな花の画像を置いたり、模様を敷いたりすることができます。さすがに文字そのものに複雑な画像を当てるのは難しいですが、背景（background）のプロパティを併用することで、視覚的なインパクトは最大級になります。

パソコンのモニター越しに読む文章は、紙の本よりも疲れやすいと言われています。適度な装飾やアクセントは、読者の目の保養になり、最後まで飽きずに読んでもらうための「おもてなし」になります。自分の好きな色や模様を使って、世界に一つだけの文章スタイルを追求してみましょう。


<style>
    .special-p::first-letter {
        background-color: #ffb703;
        color: #fff;
        padding: 5px 15px;
        margin-right: 10px;
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        float: left;
    }
</style>

<div class="p-4 bg-dark text-white">
    <p class="special-p">
        未知の世界を冒険することは、私たちの心を豊かにします。新しい発見、出会い、そして困難を乗り越える勇気。それらすべてが、かけがえのない経験となり、人生という物語を鮮やかに彩ってくれるのです。
    </p>
</div>

ブラウザ表示

8. デザインに正解はない！自分なりのスタイルを見つけよう

ここまで様々な設定方法を解説してきましたが、最も大切なのは「自分のWebサイトをどう見せたいか」という目的です。今回学んだ ::first-letter と ::first-line は、使いすぎると画面がうるさくなってしまいますが、ポイントを絞って使うことで驚くほどの効果を発揮します。

まずはシンプルな色替えから始めて、慣れてきたら文字の大きさや余白を調整してみてください。何度もブラウザで確認しながら、「これだ！」と思えるバランスを見つける工程は、パズルを解くような楽しさがあります。プログラミングの第一歩は、こうした小さな成功体験を積み重ねることです。ぜひ、あなたの手で魅力的な文章ページを作り上げてください！

2026年最新スキルアップ・実践セミナー