文字のデザインを「魔法」のように変える！CSSの `text-transform` と `font-variant` を使いこなそう
Web制作を始めたばかりの頃、こんなふうに思ったことはありませんか？
「英語の文章を全部大文字でカッコよく見せたい！」
「見出しの一部だけ、小さな大文字で高級感を出したい！」
実は、元のHTMLの文字を書き直さなくても、CSSという魔法の杖を使えば一瞬で見た目を変えることができるんです。今日は、テキストの装飾に欠かせない、ちょっと便利なプロパティをご紹介しますね。
—
1. `text-transform` で、文字の大文字・小文字を操る
まず一つ目は、`text-transform` です。これは「文字のケース（大文字・小文字）」を変換するプロパティです。
例えば、HTMLには `hello world` と小文字で書いているけれど、デザイン上は「HELLO WORLD」と大文字で表示させたいとき。わざわざHTMLを書き直す必要はありません。
よく使う値
- uppercase: すべて大文字にする
- lowercase: すべて小文字にする
- capitalize: 単語の最初の1文字だけを大文字にする
.title-style {
/ すべて大文字にする魔法 /
text-transform: uppercase;
}
.name-style {
/ 単語の頭文字だけ大文字にする（人名などに便利！） /
text-transform: capitalize;
}
ここがポイント！
「HTMLのデータは小文字のまま」にしておくのがコツです。なぜなら、万が一CSSが読み込まれなかったとき、元の意味が伝わりやすいからです。見た目だけをCSSで整える、これがWeb制作の鉄則ですよ。
—
2. `font-variant` で「スモールキャップス」という隠し味を
次に紹介するのは、`font-variant` です。特に知っておいてほしいのが `small-caps` という値。
これは、「大文字はそのままのサイズで、小文字を少し小さめの『大文字の形』にする」という装飾です。高級なレストランのメニューや、雑誌のタイトルのような、少し上品で知的な雰囲気を醸し出したいときに最適です。
.elegant-text {
/ 小文字を小さな大文字に変身させる /
font-variant: small-caps;
}
まるで、高級な洋服のブランドロゴのような佇まいになりますよね。わざわざ画像を加工して文字を作る必要はありません。これだけで、Webサイトの「格」がグッと上がるんです。
—
さあ、実際に試してみましょう！
それでは、HTMLとCSSを組み合わせて、実際にどんなふうに見えるか実験してみましょう。お手元のエディタにコピー＆ペーストして確認してみてくださいね。
hello, web world!
welcome to my blog
—
つまずきやすいポイント：フォントとの相性
ここで一つ、初心者の皆さんが時々悩むポイントをお伝えしますね。
「`small-caps` を使ったのに、なんだか思った通りに見えない……」という場合、それはお使いのフォントが対応していないことがほとんどです。全てのフォントに「小さな大文字」というデザインデータが入っているわけではないからなんです。
「あれ、おかしいな？」と思ったら、まずはフォントを変えてみる。あるいは、「このフォントはこういうスタイルが得意なんだな」と割り切って、別のフォントを探す旅に出るのも、Web制作の醍醐味です。
—
最後に：デザインは「引き算」が大事
今回ご紹介したプロパティは、非常に強力です。だからこそ、使いすぎには注意してくださいね。
どんなに良いスパイスも、かけすぎると味がわからなくなってしまうのと同じです。大切な見出しや、ここぞという強調ポイントにだけ、そっと添えてあげる。そんな「控えめな気遣い」ができるようになると、あなたの作るWebサイトは、驚くほど洗練されたものに変わりますよ。
大丈夫です、少しずつ触っていれば必ず感覚が掴めます。まずは今日、一つだけコードに書き加えてみてください。その小さな変化が、あなたのクリエイティブの第一歩になるはずです！
コメント