CSS擬似要素のfirst-letter。

first-letterは、最初の一文字という意味。

::first-letter

「first-letter」を日本語にすると、そのまま「最初の一文字」となる。

Webデザインをしているとき、その「最初の一文字」だけのデザインを変えたいときがある。

最初の一文字だけデザインを変えたい。

例えば見出しの最初の一文字の色を変えたい、段落の最初の一文字を大きくしたい、英文の最初の一文字を大文字にしたいときがある。

そんなときに便利なのが、CSSの擬似要素「::first-letter」。

first-letterの使い方。

::first-letterの指定は簡単。

HTML

<blockquote>
<p class="example">わたくしといふ現象は<br>
仮定された有機交流電燈の<br>
ひとつの青い照明です<br>
（あらゆる透明な幽霊の複合体）<br>
風景やみんなといつしよに<br>
せはしくせはしく明滅しながら<br>
いかにもたしかにともりつづける<br>
因果交流電燈の<br>
ひとつの青い照明です<br>
（ひかりはたもち　その電燈は失はれ）
...</p>
</blockquote>

CSS

blockquote {
 position: relative;
 display: inline-block;
}
blockquote::before,
blockquote::after {
 content: """;
}
.example::first-letter {
 font-size: 150%;
}

結果。

わたくしといふ現象は
仮定された有機交流電燈の
ひとつの青い照明です
（あらゆる透明な幽霊の複合体）
風景やみんなといつしよに
せはしくせはしく明滅しながら
いかにもたしかにともりつづける
因果交流電燈の
ひとつの青い照明です
（ひかりはたもち　その電燈は失はれ）
…

宮沢賢治「春と修羅」より抜粋。

first-letterが効かないとき。

::first-letterを指定しているのに、効かない。

効かなときに想定される原因。

基本的に「::first-letter」は、対象がブロックレベル要素でなければ効かない。

• 対象の要素に「display: flex」を指定している。
• 対象の要素に「display: grid」を指定している。
• 「span」タグや「a」タグなど、インライン要素に指定している。
• 「table」や、table関連の「tr」「th」「td」に指定している。

など。

「table」は、ブロックレベル要素だが、主に表形式のデータの構造とレイアウトを維持するために、一般的なブロックレベルの要素とは異なる方法で処理される。

::first-letterは、「::before」にも適用される。

「::first-letter」は、同じく擬似要素の「::before」にも適用される。そのため、例えば「数字」や「引用符」などが「::before」によって指定されていた場合、最初の「文字」ではなく、「数字」や「引用符」が「::first-letter」の対象となる。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

CSS 関連メモ。

• CSSの一部が効かないときは、キャッシュやダークモードが原因かも。
• first-letterが効かないとき。覚えると便利なCSS擬似要素。
• rgb()で透明度も。CSSの新しい色指定と使い方の例。
• CSSでダークモード。prefers-color-schemeの使い方と効かないとき。
• CSSで縦書き。writing-modeの使い方。効かないときは？
• scroll-snap-typeの使い方。CSSでカルーセル。効かないときは？

• CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？
• CSS gapの使い方？Flexboxでレスポンシブ？効かないときは？
• CSSの変数と関数。覚えておくと便利なCSSプログラミング。
• CSS aspect-ratioの使い方。効かないときはどうする？
• text-overflowの使い方。CSSで文字数を制御。効かないときは？
• detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
• CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。
• counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
• CSS フォントサイズはどうする？ remの基本かつ効果的な使い方。
• line-clampの使い方。CSSで複数行指定。効かないときは？

• CSSの@whenと@else。新しいブレイクポイントの設定方法？
• 縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。）
• CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。
• CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。
• CSS カラーコードで透明度を指定したいとき。（16進数6つ+2つで。）
• CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。
• CSSのobject-fitの使い方。トリミングやサイズの実装例。
• backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。）
• CSS filterで色変更。色相・彩度・明度？ filterプロパティでできること。
• CSS position: stickyの使い方。効かない！ときはここをチェック。