first-letterが効かないとき。覚えると便利なCSS擬似要素。
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のフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
井川 宜久 / Norihisa Igawa
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の使い方。効かない！ときはここをチェック。