【入門編】text-transformによるテキストの大文字小文字変換 – HTML実践ガイド

CSSの「魔法の杖」でテキストを操ろう！`text-transform`で文字の印象をガラリと変える方法

こんにちは！Web制作の世界へようこそ。

HTMLとCSSを学び始めると、「デザインをもっと細かく調整したい！」というワクワク感と、「あれ、この見出しだけ全部大文字にしたいんだけど、わざわざ書き直すの？」というちょっとした面倒くささが同時にやってきますよね。

実は、そんな時に頼りになるのがCSSの`text-transform`というプロパティです。これを使えば、HTMLの元の文字を書き換えることなく、画面上の表示だけをパッと変えることができるんです。まさに「魔法の杖」のような機能ですね。

今回は、この`text-transform`を使って、インライン要素（`span`や`a`タグなど）の中のテキストを自由自在に操る方法を、一緒に見ていきましょう！

—

例えば、Webサイトのメニューを作っているとき、「Home」という文字を「HOME」と全部大文字にしたくなるとします。

もちろん、HTML側で `HOME` と打ち直しても良いのですが、もし後から「やっぱり元に戻そう」となったらどうでしょう？またHTMLを修正して……というのは少し手間ですよね。

CSSの`text-transform`を使えば、「HTMLはそのまま（中身は元のテキストのまま）」で、「表示だけをカッコよく変える」ことができます。これなら、後からの修正もCSSを一行変えるだけで済むので、とってもスマートなんです。

—

では、実際にどんなことができるのか見ていきましょう。CSSの書き方はいたってシンプルです。

英単語をすべて大文字にします。見出しやボタンなどで、インパクトを出したい時に最適です。

逆に、すべて小文字にします。あえて小文字にすることで、少し落ち着いた、こなれた雰囲気を演出できます。

名前やタイトルなど、単語の頭文字だけを大文字にしたい時に便利です。

「やっぱり元通りがいいや」という時のために。CSSで指定した変換を打ち消したい時に使います。

—

まずは、練習用のコードを用意しました。お使いのコードエディタに貼り付けて、ブラウザでどう見えるか試してみてくださいね。

hello world! を大文字に。
HELLO WORLD! を小文字に。
hello world! を単語の頭文字だけ大文字に。

どうですか？「hello world!」と書いたはずなのに、画面上ではバッチリ変化していますよね！

—

さて、ここで一つだけ「つまずきポイント」を共有しておきますね。

`text-transform`は、基本的に英語（アルファベット）に対して効果を発揮するものです。日本語（ひらがな、カタカナ、漢字）に使っても、残念ながら変化は起きません。

「あれ、コードは合ってるはずなのに何も変わらない！」と焦ってしまうことがありますが、それは決してあなたのせいではなく、そもそもCSSが日本語の「変換」のルールを持っていないからなんです。安心してくださいね。

—

この機能、実務ではどんな時に使うのでしょうか？僕がよくやるのは、「ユーザーの入力を調整する」時です。

例えば、Webサイトのプロフィール設定で、ユーザーが「名前」を入力する欄があるとします。もしユーザーが全部小文字で入力しても、CSSで `text-transform: capitalize;` をかけておけば、見た目上は「きれいな表記」を保つことができます。

また、「多言語対応」のサイトを作る時にも重宝します。ボタンの文字をCSSで管理しておけば、後から「このボタンはやっぱり大文字で強調しよう」といった変更が、サイト全体で一瞬にして反映されます。

—

Web制作を始めたばかりの頃は、覚えることがたくさんあって大変ですよね。「こんなことわざわざCSSでやる意味あるの？」と思うこともあるかもしれません。

でも、こうした「小さな調整」の積み重ねが、最終的にプロのような洗練されたWebサイトを作り上げるんです。

今日の`text-transform`も、使いこなせばあなたのWeb制作をグッと楽にしてくれるはずです。ぜひ、自分のポートフォリオや練習用のサイトで、いろんな文字を変換して遊んでみてくださいね！

またわからないことがあれば、いつでも聞きに来てください。あなたの素敵なWeb制作ライフを、これからもずっと応援しています！