CSSで単語の先頭文字を大文字に変換！「text-transform: capitalize」の使い方

CSSにおける「text-transform」プロパティと「capitalize」の動作

• uppercase: 全ての文字を大文字に変換します。
• capitalize: 各単語の最初の文字のみを大文字に変換します。

「capitalize」は、単語の最初の文字のみを大文字に変換する値です。しかし、既に全て大文字で記述されている単語に対しては影響を与えません。つまり、「text-transform: capitalize;」 で設定しても、「CSS」「HTML」のような単語は全て大文字のまま表示されます。

全ての文字を大文字に変換したい場合は、**「uppercase」**を使用する必要があります。

例

p {
  text-transform: capitalize;
}

/* 結果:
  * Hello, world! -> Hello, World!
  * CSS and HTML -> CSS and HTML
  */

p {
  text-transform: uppercase;
}

/* 結果:
  * Hello, world! -> HELLO, WORLD!
  * CSS and HTML -> CSS AND HTML
  */

補足

• 「text-transform」プロパティは、疑似要素や要素内の子要素にも適用されます。
• 大文字と小文字の変換は、ロケールによって影響を受ける場合があります。
• 「text-transform」プロパティは、アクセシビリティに影響を与える可能性があります。例えば、全て大文字に変換すると、スクリーンリーダーで読み上げにくくなる場合があります。

サンプルコード：CSS text-transform を使って見出しを大文字に変換

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}

結果

• 見出しが全て大文字で表示されます。
• 例：
  • 見出し 1 -> 見出し 1

• このコードは、全ての見出しに適用されます。特定の見出しだけに適用したい場合は、セレクターを変更する必要があります。
• 例えば、**「h1」と「h2」**のみを大文字に変換したい場合は、以下のようになります。

h1, h2 {
  text-transform: uppercase;
}

• 「text-transform」プロパティは、疑似要素や要素内の子要素にも適用されます。例えば、**「h1::first-letter」を使用して、「h1」**要素の最初の文字のみを大文字に変換することもできます。

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

このサンプルコード以外にも、**「text-transform」**プロパティを使って様々なテキスト変換を行うことができます。ぜひ色々試してみてください。

CSS以外の方法でテキストを大文字に変換する方法

JavaScriptを使用して、要素内のテキストをプログラムで変換することができます。

const elements = document.querySelectorAll('p');

for (const element of elements) {
  element.textContent = element.textContent.toUpperCase();
}

サーバーサイドで処理する

サーバーサイドで処理を行う場合は、PHPなどの言語で文字列を大文字に変換してからHTMLに出力することができます。

PHP

<?php
$text = 'hello, world!';
$uppercaseText = strtoupper($text);
echo $uppercaseText; // HELLO, WORLD!
?>

ライブラリを使用する

Lodashなどのライブラリを使用すると、**「capitalize」**以外にも様々な文字変換関数を利用することができます。

Lodash

const text = 'hello, world!';
const uppercaseText = _.capitalize(text); // Hello, World!
console.log(uppercaseText);

それぞれの方法のメリットとデメリット

• CSS:
  • メリット: 簡単に行える。
• JavaScript:
  • メリット: 動的にテキストを変換できる。
  • デメリット: CSSに比べて記述量が多くなる。
• サーバーサイド処理:
  • メリット: 処理速度が速い。
  • デメリット: サーバー側の設定が必要になる。
• ライブラリ:
  • メリット: 様々な文字変換関数を利用できる。

• シンプルな変換であれば、CSSがおすすめです。
• 動的な変換や処理速度が重要な場合は、JavaScriptやサーバーサイド処理がおすすめです。
• 様々な文字変換関数を利用したい場合は、ライブラリを使用するのがおすすめです。