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

CSSでテキストをすべて大文字にする方法：text-transformの使い方ステップバイステップガイド

CSSの「text-transform: uppercase」プロパティを使うと、テキスト要素の内容をすべて大文字（オールキャップス）に設定できます。このプロパティは、小文字やタイトルケース（各単語の先頭のみ大文字）への変換にも利用可能です。段落や見出しなど、あらゆるテキスト要素に適用できます。

Webサイトの作成や開発を行う際、CSSプロパティを使えばテキストの大文字・小文字を自由に調整できます。本記事では、代表的な2つの方法である「text-transform」と「font-variant」について、それぞれの構文とともに詳しく解説します。

CSSでオールキャップス（すべて大文字）にする方法

テキスト要素の内容をすべて大文字に変更するには、CSSのtext-transformプロパティを使用します。このプロパティは、Webページ上でテキストがどのように大文字化されるかを制御するものです。逆に、すべて小文字へ変換することもできます。

テキストブロックをすべて大文字にするには、CSSセレクター内で次のように指定します。

text-transform: uppercase;

text-transformプロパティには、主に以下の3つの値を指定できます。

  • uppercase：テキスト要素内のすべての単語を大文字にします。
  • lowercase：テキストをすべて小文字にします。
  • capitalize：各単語の先頭文字を大文字にします（タイトルケースとも呼ばれます）。

それでは、text-transformメソッドの実際の使用例を見ていきましょう。

オールキャップスのCSS実装例

ここでは、「This page does not exist.（このページは存在しません）」というテキストを、すべて大文字で表示するWebページを作成してみます。

これを実現する方法として、真っ先に思いつくのは、テキスト自体をあらかじめ大文字で入力しておくことでしょう。しかし、この方法には欠点があります。テキストを手動で書き直す必要があるためです。短い文であれば問題ありませんが、長いテキストになると、手作業での変換は非常に手間がかかり、入力ミスも発生しやすくなります。

そこで今回は、安全かつ効率的なtext-transformメソッドを使うことにします。

HTMLドキュメントにテキストとtext-transformルールを定義した例がこちらです。

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

このコードでは、選択したテキスト内のすべての文字が大文字で表示されます。

まず、<head>タグを定義し、その中に<style>タグを配置しています。このstyleタグを使って、ページにtext-transformルールを追加します。外部CSSスタイルシートを読み込むこともできますが、この例のように短いコードであれば、必ずしも必要ありません。

<body>タグ内では、段落を1つ定義しています。ここで記述した文は通常の文頭だけ大文字の形式ですが、ブラウザ上ではすべて大文字で表示されます。これは、text-transformプロパティがWebページ上のすべてのHTMLの<p>タグに適用されているためです。

font-variant: small-caps; について

タイトルケースの特徴を保ちながら小文字も活用したい場合には、「font-variant: small-caps;」を使用できます。タイトルケースとは、各単語の最初の文字が大文字になる表記形式のことです。

font-variantルールの使用例は以下の通りです。

<head>
  <style>
    p {
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <p>this is in all caps</p>
</body>
</html>

まとめ

text-transformプロパティを使えば、要素内のすべてのテキストを簡単に大文字にできます。一方、font-variantプロパティを使うと、小文字の高さを保ったまま大文字の字形（スモールキャップス）でテキストを表示できます。

この2つのルールは、HTMLでテキストを整形する際に役立つ強力なツールです。用途に応じて使い分けることで、より洗練されたタイポグラフィを実現できるでしょう。

HTMLのコーディングについてさらに学びたい方は、ぜひ「HTMLの学習方法ガイド」もご覧ください。おすすめの講座、書籍、学習リソースの情報に加えて、学習を継続するためのコツも紹介しています。

  1. CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

    CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行

  2. CSSのtext-transformプロパティでテキストの大文字・小文字を変換する方法

    CSSのtext-transformプロパティを使うと、要素内のテキストの大文字・小文字の表示形式を簡単に制御できます。指定できる値は、capitalize、lowercase、uppercase、full-width、full-size-kana、noneの6種類です。 構文 CSSのtext-transformプロパティの構文は以下のとおりです。 Selector {    text-transform: /*value*/ } 指定できる値の一覧 capitalize … 各単語の先頭文字を大文字にします uppercase … すべての文字を大文字にします lo