ウェブデザイナーの毎日のお仕事のメモ

作成日:2021.01.13  最終更新日:2021.06.23

CSS

1文字目だけスタイルをつけるためのcss

1文字目だけ大きくしたい、色をつけたいなど、したい場合のcssのメモです。

書き方

例えば、pの最初の文字だけ大きくして、色を変えたい場合の書き方は以下の通りです。

HTML

pタグにかぎらず、適宜ご自身の必要なタグに書き換えてください。

<p>1文字目が大きい文章</p>

CSS

以下の通り、1文字目だけスタイルを変えたい場合、
【1文字目だけスタイルを変えたいタグ+『:first-letter』】です。

p {
  font-sizde:20px;
  font-weight:bold;
  color:#333;
}

p:first-letter{
  font-size:40px;
  color:#5fa1c7;
}

となります。
見た目は、以下のようになります。

1文字目が大きい文章

今回は、pタグでコードを書きましたが、pをh1やaなどに適宜変えてください。

最新記事