記事や文書を書いているとき、特定の場合にいくつかの文字が必要になることがよくあります。 Web ページで、テキストを変換する必要がある HTML 要素は、CSS プロパティ「 テキスト変換 」。また、このプロパティは、すべての文字を追加した後、一度に大文字と小文字を変換できるため、時間を節約できます。

この投稿では、CSS を使用してテキストの大文字と小文字を変更する方法について説明します。それでは始めましょう！

CSS を使用してテキストを大文字と小文字にする方法は?

CSS では、「 テキスト変換 」プロパティは、テキストの大文字化を制御します。また、テキストを大文字または小文字に変換するためにも使用されます。

text-transform プロパティ値

CSS の text-transform プロパティの可能な値を以下に示します。

• • 「 大文字 ”: この値は、要素のテキスト内のすべての文字を大文字にします。
  • 「 小文字 ”: この値は、要素のテキストを小文字に変更します。
  • 「 大文字にする ”: この値は、各単語の最初の文字を大文字に変更します。
  • 「 なし ”: この値は、要素のテキストの変更を制限します。
  • 「 イニシャル ”: この値はデフォルト値を設定します。
  • 「 継承する ”: この値は、親要素から値を設定します。

以下の例を分析してください！

例: テキストを大文字と小文字に変換する

まず、クラス名「」の div 要素を追加します。 箱 」。本文内に、3 つの見出しタグ

、

、および

を追加します。

見出しのテキストはすべて大文字、

は小文字、3 つ目も小文字です。

以下は HTML コードです。

< 分周 クラス = '箱' >
< h1 > 小文字: LINUXHINT へようこそ h1 >
< h2 > 大文字: linuxhint へようこそ h2 >
< h3 > 資本化: linuxhint へようこそ h3 >
分周 >

スタイルボックスのdiv

。箱 {
高さ: 200px;
幅： 80 % ;
ボーダー: 4px ソリッド #e4cfcf;
背景色: カデットブルー;
マージン: 1px 自動;
パディング: 10px;
}

上記の HTML ファイルで作成された div は、以下で説明する CSS プロパティでスタイル設定されています。

• • 「 身長 」は、divの高さを設定するために利用されます。
  • 「 幅 」は、divの幅を設定するために利用されます。
  • 「 国境 ” プロパティを使用して、要素の周囲に 4px 幅、実線タイプ、#e4cfcf 色の境界線を適用します。
  • 「 背景色 」は要素の背景色を指定します。
  • 「 マージン 」プロパティは、要素のすべての側面のスペースを調整します。
  • 「 パディング ” プロパティを使用して、div 要素のコンテンツの周囲または要素の境界内にスペースを作成します。

以下のコード ブロックは、すべての見出し要素が text-transform プロパティの異なる値でスタイル設定されていることを示しています。

要素は、値が「」に設定されたプロパティ text-transform で適用されます 小文字 」：

h1 {
テキスト変換: 小文字;
}

要素は、値が「」に設定された text-transform プロパティで適用されます。 大文字 」：

h2 {
テキスト変換: 大文字;
}

要素の場合、text-transform プロパティの値は「 大文字にする 」：

h3 {
テキスト変換: 大文字にする;
}

上記のコードを提供することにより、最初の見出しのテキストはすべて小文字に変換され、2 番目の見出しは大文字に変換されます。各単語の最初の文字は、3 番目の見出しで大文字になっています。

すごい！テキストを大文字、小文字、およびすべて大文字に変換する方法を学習しました。

結論

CSS の text-transform プロパティは、テキストの大文字化を制御し、ドキュメントのテキストの大文字と小文字を変更するために利用されます。このプロパティは、すべての要素に適用されます。このプロパティの値は、大文字、小文字、大文字にする、またはなしにすることができます。このブログでは、CSSの text-transform プロパティを使ってテキストを大文字と小文字に変換する手順を説明しました。