CSSで文字を加工する

1文字目だけ大きくしたい

タイトルなどで1文字目だけフォントのサイズを変えたいときの設定をメモ。
::first-letter擬似要素を使用すると１文字目にCSSの設定ができる。
また::first-line擬似要素を使うと同様に1行目だけCSSで体裁を変えられる。

// 通常サイズを指定
.title {
  font-size: 2.4rem;
}
// 1文字目のスタイルを指定
.title::first-letter {
  font-size: 3rem;
  padding-right:0.025em;
}

アルファベット小文字と大文字の変換

text-transformフロパティを利用すると、アルファベットの小文字や大文字を変換できる。

全て大文字に変換

HTML

<h2 class="title">Exhibition</h2>

CSS

.title {
  font-size: 2.4rem;
  text-transform: uppercase;
}
.title::first-letter {
  font-size: 3rem;
  padding-right:0.025em;
}

表示

全て小文字に変換

text-transform: lowercase;

単語の1文字目を大文字にする

text-transform: capitalize;