テキストの1文字目・1行目だけにスタイルを適用する方法【CSS】

CSS

テキストの1文字目・1行目だけにスタイルを適用する方法【CSS】

2019年09月16日 8:00 

テキストの1文字目・1行目だけにスタイルを適用する方法【CSS】

おはようございます!社員Aです👩

今回はテキストの1文字目・1行目だけにスタイルを適用する方法をご紹介したいと思います。

 



 

テキストの1文字目だけにスタイルを適用できるCSS「:first-letter」

デザイン上、テキストの1文字目だけスタイルを適用させたい場合があります。

そんなときには、CSS「:first-letter」を使うことで対応できます。

 

「:first-letter」基本の使い方

  1. 「:first-letter」は擬似要素になるので、要素名の後ろにつけて使用します。
  2. ブロックレベル要素の最初の文字に適用されます。

 

実装

HTML
CSS
表示

txtクラスを付与したdiv要素の疑似要素として「:first-letter」を使うと、最初の1文字目だけスタイルを適用することができました。

わざわざspanタグなどで囲わなくても実現できるのが便利です。

「first-letter」は最初の文字のすぐ前後にある区切り文字も含まれます。

 



テキストの1行目だけにスタイルを適用できるCSS「:first-line」

先程と同様にデザイン上、テキストの1行目だけスタイルを適用させたい場合があります。

そんなときには、CSS「:first-line」を使うことで対応できます。

 

「:first-line」基本の使い方

  1. 「:first-line」は擬似要素になるので、要素名の後ろにつけて使用します。
  2. ブロックレベル要素の最初の文字に適用されます。

 

実装

HTML
CSS
表示

txtクラスを付与したdiv要素の疑似要素として「:first-line」を使うと、最初の1文字目だけスタイルを適用することができました。

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!