Yugien - 遊戯苑
テーマ

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

A pseudo-element that lets you style only the very first character of a paragraph—perfect for drop caps or highlighting the initial letter using CSS alone.

::first-letter

段落の最初の1文字だけを簡単に装飾でき、雑誌風のドロップキャップや頭文字の色変更をCSSだけで実現できる疑似要素。

::first-letter とは？

段落（<p> など）の「最初の1文字」だけにデザインを当てられる疑似要素です。雑誌の“でっかい一文字（ドロップキャップ）”をつくったり、頭文字の色だけ変えたりできます。HTMLをいじらず、CSSだけでOK。

使い方の基本

Webの世界へようこそ。

HTML

<p>Webの世界へようこそ。</p>

CSS

p::first-letter {
	font-size: 200%;
	font-weight: bold;
}
ポイント
p の最初の1文字だけが大きく太くなります。

ドロップキャップ（雑誌っぽい見た目）

Webサイトの見た目を整えたり、動きをつけたりするためには、HTMLとCSS、そしてJavaScriptが欠かせません。特に最近では、ただページを表示するだけではなく、ユーザーが操作しやすい仕組みや、アプリのように動く動的な仕掛けが求められています。例えば、タブ切り替えやモーダルウィンドウといったUIパーツを作るとき、CSSだけでは足りず、JavaScriptのイベント処理を組み合わせる必要があります。また、サーバーサイドの言語やAPIと通信して、画面に最新の情報を表示する仕組みも一般的になっています。プログラミングを学ぶと、目に見える部分と裏側の仕組みの両方を理解できるようになり、Webの世界が一気に広がっていきます。

HTML

<p>Webサイトの見た目を整えたり、動きをつけたりするためには、HTMLとCSS、そしてJavaScriptが欠かせません。特に最近では、ただページを表示するだけではなく、ユーザーが操作しやすい仕組みや、アプリのように動く動的な仕掛けが求められています。例えば、タブ切り替えやモーダルウィンドウといったUIパーツを作るとき、CSSだけでは足りず、JavaScriptのイベント処理を組み合わせる必要があります。また、サーバーサイドの言語やAPIと通信して、画面に最新の情報を表示する仕組みも一般的になっています。プログラミングを学ぶと、目に見える部分と裏側の仕組みの両方を理解できるようになり、Webの世界が一気に広がっていきます。</p>

CSS

.article p::first-letter {
	float: left;
	font-size: 320%;
	line-height: 1;
	padding: 0 8px 0 0;
	font-weight: 700;
}

よくあるハマりどころ

効く場所
基本は「ブロック要素」の最初の行（例：p, div, article, section）。spanのようなインライン要素単体には通常使いません。
“最初の1文字”の数え方
行頭の引用符や句読点（「“」「(」など）も“最初”として扱われることがあります。つまり、狙った文字に当たらない場合があります。
  • その場合は、先頭の記号をテキストから外す／CSSで::before疑似要素に記号を出す／HTMLで1文字だけ<span>に分ける、など運用で調整。
適用できるプロパティの例
font-*, color, background, margin/padding/border, text-transform, text-shadow, line-height, float など。
レイアウトを大きく動かす指定（例えば複雑な transform）は想定外になりがちです。
マルチカラムや改行の影響
対象は“最初の行”の“最初の字”。改行位置やレイアウトが変わると、対象になる字が変わることがあります（特にレスポンシブ時）。

もう一歩：先頭が記号のときだけ小さくする

CSS

p::first-letter {
    font-size: 240%;
    font-weight: 700;
}

/* 記号が先に来る場合の微調整（雑に例示） */
p::first-letter:is(.,、,。," ,“ ,(,（) {
    font-size: 120%;
    font-weight: 400;
}

実務では、実際の文頭文字を見てクラス分けする、もしくは::beforeで記号を出すほうが安定します。

アクセシビリティのひとこと

文字そのものを大きくするだけなので、スクリーンリーダーの読み上げには基本影響しません。

ただし、コントラスト（色の濃さ）は確保しましょう。背景と文字色の差が小さいと読みにくくなります。