CSSのtext-transformプロパティでテキストを変換する方法
CSSでテキストの大文字・小文字を変換するには、text-transformプロパティを使用します。このプロパティを使うと、HTML側で文字を書き換えることなく、表示上のテキストスタイルだけを簡単に変更できます。
text-transformプロパティの構文
text-transform: none | capitalize | uppercase | lowercase | initial | inherit;
各値の意味
- none：変換を行いません（デフォルト値）
- capitalize：各単語の先頭文字を大文字にします
- uppercase：すべての文字を大文字にします
- lowercase：すべての文字を小文字にします
- initial：初期値（none）に戻します
- inherit：親要素の値を継承します
例1：uppercaseですべて大文字にする
次の例では、div要素内のテキストをすべて大文字で表示しています。あわせてline-heightを指定し、行間も調整しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
line-height: 1.9;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>出力結果
ソースコードでは通常の英字表記ですが、ブラウザ上ではすべて大文字に変換されて表示されていることがわかります。
例2：lowercaseですべて小文字にする
続いて、lowercaseを使った例を見てみましょう。大文字が混在したテキストでも、すべて小文字に統一して表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>THIS is demo text.<br>
This is ANOTHER demo text.
</p>
</div>
</body>
</html>出力結果
まとめ
text-transformプロパティを活用すると、HTMLのマークアップを変更せずに見た目上の大文字・小文字を制御できます。見出しやナビゲーションメニューなどをデザイン上すべて大文字にしたい場合などに便利なので、ぜひ活用してみてください。
-
CSSのz-indexプロパティを使って要素を重ねて表示する方法
CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効
-
CSSのtext-decorationプロパティでテキスト装飾を付ける方法
CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ