CSSのtext-transformで文頭大文字：使い方と注意点

CSSで最初の文字を大文字にする方法

text-transform プロパティは、テキストの変換方法を指定するプロパティです。このプロパティの capitalize 値を使うと、最初の文字のみ大文字に変換できます。

p {
  text-transform: capitalize;
}

利点:

• シンプルで使いやすい
• すべてのブラウザでサポートされている

• 単語の最初の文字のみ大文字に変換される
• 全ての文字を大文字に変換したい場合は使えない

::first-letter 擬似クラスは、要素の最初の文字にのみスタイルを適用する擬似クラスです。この擬似クラスを使うと、最初の文字のみ大文字に変換できます。

p::first-letter {
  text-transform: uppercase;
}

• 文字サイズやフォントファミリーなどの他のスタイルも適用できる

• text-transform プロパティよりも複雑

JavaScriptを使うと、より柔軟に最初の文字を大文字に変換できます。例えば、以下のコードは、すべての単語の最初の文字を大文字に変換します。

const text = document.querySelector('p').textContent;
const words = text.split(' ');
const capitalizedWords = words.map(word => word[0].toUpperCase() + word.slice(1));
document.querySelector('p').textContent = capitalizedWords.join(' ');

• 最も柔軟な方法
• 複雑な要件にも対応できる

• JavaScriptの知識が必要
• 他の方法よりも複雑

CSSで最初の文字を大文字にする方法はいくつかあります。どの方法を使うかは、要件とブラウザのサポート状況によって異なります。

HTML

<p>これはサンプルテキストです。</p>
<p>This is another sample text.</p>

CSS

/* `text-transform` プロパティを使う */
p {
  text-transform: capitalize;
}

/* `::first-letter` 擬似クラスを使う */
p::first-letter {
  text-transform: uppercase;
}

/* JavaScriptを使う */
const text = document.querySelector('p').textContent;
const words = text.split(' ');
const capitalizedWords = words.map(word => word[0].toUpperCase() + word.slice(1));
document.querySelector('p').textContent = capitalizedWords.join(' ');

出力結果

これはサンプルテキストです。
This Is Another Sample Text.

説明

このサンプルコードでは、3つの方法で最初の文字を大文字に変換しています。

最初の <p> タグは、text-transform プロパティの capitalize 値を使って、すべての単語の最初の文字のみ大文字に変換しています。

::first-letter 擬似クラスを使う

2番目の <p> タグは、::first-letter 擬似クラスを使って、文の最初の文字のみ大文字に変換しています。

JavaScriptコードは、すべての単語の最初の文字を大文字に変換しています。

このサンプルコードはあくまでも参考です。要件に合わせてコードを変更してください。

CSSで最初の文字を大文字にするその他の方法

@keyframes ルールを使って、アニメーションで最初の文字を大文字に変換できます。

@keyframes capitalize {
  from {
    text-transform: none;
  }
  to {
    text-transform: uppercase;
  }
}

p {
  animation: capitalize 1s ease-in-out;
}

• アニメーションで最初の文字を大文字に変換できる

::before 擬似要素を使って、最初の文字の前に大文字の文字を挿入できます。

p::before {
  content: upperCase(substr(content, 1, 1));
}

• 文字の幅が変わる

Unicode文字には、大文字と小文字の区別がない文字があります。これらの文字を使うと、最初の文字を大文字のように表示できます。

<p>&#x2161;これはサンプルテキストです。</p>

• すべてのフォントでサポートされているわけではない
• アクセシビリティの観点から問題がある場合がある