JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSでテキストを大文字に変換する方法｜text-transformプロパティの使い方

CSSを使ってテキストを大文字に変換するには、text-transformプロパティにuppercaseという値を指定します。この方法の大きなメリットは、HTMLソース上のテキストを書き換えることなく、ブラウザでの表示だけを大文字に変更できる点です。見出しやボタンラベルなどのデザイン調整に幅広く活用できます。

text-transformプロパティの基本構文

大文字に変換したい要素に対して、以下のようにtext-transform: uppercase;を指定します。

selector {
  text-transform: uppercase;
}

サンプルコード

次のコードを実行すると、通常のテキストと大文字に変換されたテキストの違いを確認できます。

<html>
   <head>
   </head>
   <body>
      <p>通常のテキスト</p>
      <p style="text-transform:uppercase;">
         通常のテキスト！これは大文字で表示されます！
      </p>
   </body>
</html>

インラインスタイルではなく、外部CSSや<style>タグ内にクラスとして定義しておけば、複数の要素にまとめて適用でき、管理もしやすくなります。

text-transformで使えるその他の値

text-transformプロパティには、大文字変換以外にも便利な値が用意されています。

  • capitalize：各単語の先頭文字のみを大文字にします
  • lowercase：すべての文字を小文字に変換します
  • none：変換を行いません（デフォルト値）

なお、text-transformはあくまで「表示」を変換するプロパティのため、HTMLのソースコードやコピーしたテキスト自体は元のまま変化しない点に注意しましょう。検索エンジン向けのSEOやスクリーンリーダーへの影響も抑えられるため、安全に利用できる方法です。

  1. CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説

    テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange

  2. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {