[2文字目にも適用される?] CSSの「::first-letter」で要素の1文字目にのみスタイルを適用!

この記事は上記のような疑問を解消するものとなっています。

疑似セレクタ「::first-letter」は、選択した要素の最初の文字にスタイルを指定するために使うものです。

そこでこの記事では疑似セレクタ(::first-letter)について解説していきます。

よく使用するものなのでしっかりと理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

1.疑似セレクタ「::first-letter」とは?

疑似セレクタ「::first-letter」は指定した要素の1文字目にのみスタイルを適用します。

指定できるのはブロックボックスに分類される要素のみで適用できないプロパティも存在します。

1文字目が引用符やカッコの場合、2文字目までスタイルを適用します。

2.疑似セレクタ「::first-letter」の使い方

それでは疑似セレクタ「::first-letter」の使い方をみていきましょう。

p::first-line {
 font-size: 20px;
 color: blue;
}

上記の例では段落の先頭の文字にのみスタイルを適用し、フォントサイズを20px、文字色を青色で表示しています。

疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。

疑似セレクタ「::first-letter」を使っていると2文字目にも適用されてしまうという声もあります。

先頭文字に記号を使った場合、疑似セレクタ「::first-letter」の設定が2文字目まで適応されるのは仕様です。

そのため、しっかりと注意して使うようにしましょう。

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?