CSSオールキャップス：ステップバイステップガイド

text-transform：大文字のCSSプロパティは、テキスト要素の内容をすべて大文字に設定します。このプロパティを使用して、テキスト要素の内容を小文字または大文字小文字に設定することもできます。 text-transformは、段落、見出し、またはその他のテキスト要素に適用できます。

Webサイトを作成および開発する場合、開発者はCSSプロパティを使用して、必要に応じてテキストフォントの大文字と小文字を調整できます。この記事で説明する2つの方法は、text-transformを使用する方法とfont-variantを使用する方法です。両方の構文を見てみましょう。

CSSオールキャップス

CSS text-transformプロパティを使用して、テキスト要素の内容をすべて大文字に変更できます。このプロパティは、Webページでテキストを大文字にする方法を設定します。このプロパティを使用して、テキスト要素の内容を小文字に設定することもできます。

テキストのブロックにすべて大文字を使用するには、 text-transform：uppercaseを使用します CSSセレクターで：

text-transform：大文字;

text-transformプロパティは、次の3つの値を受け入れます。

大文字：テキスト要素の各単語を大文字に設定します。
小文字：テキストを小文字に設定します。
キャピタライズ：各単語をキャピタライズします。タイトルケースとも呼ばれます。

実際のtext-transformメソッドの例を見てみましょう。

オールキャップスCSSの例

「このページは存在しません」と表示されるWebページを作成します。すべて大文字で。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

これを行うには、すべての文字を大文字で入力します。このアプローチの欠点は、テキストを手動で書き直さなければならないことです。これは、このような短い文では問題になりません。ただし、長い文字列の大文字と小文字を変更する場合、手動で文字を変更するのはますます面倒になります。

安全のために、text-transformメソッドを使用します。

テキストとテキスト変換ルールを使用してHTMLドキュメントを定義しましょう：

<html>
 
 <head>
   <style>
     p {
       text-transform: uppercase;
     }
   </style>
 </head>
 <body>
 
   <p>this is in all caps</p>
 </body>
</html>

選択したテキストのすべての文字が大文字で表示されます。

まず、タグを定義します。このタグには