VIDEO LESSON

CSSのtext-transformの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:30動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、テキストトランスフォームです。
0:06これは、画面に表示される文字を、大文字にしたり小文字にしたりと、見た目だけを変換するプロパティです。
0:14たとえばハローシーエスエスという英語が、すべて大文字で表示されるようになります。
0:20ここで大切なのは、エイチティーエムエルに書かれた元の文字列自体は変わらないことです。
0:26あくまで表示のされ方を切り替える指定だと覚えてください。
0:30今回はアッパーケースとノーンを中心に比べながら、値の違いと注意点を初心者向けに分かりやすく解説します。
0:38まず基本の書き方です。
0:39セレクターのあとにプロパティ名を書き、コロンを挟んで値を入れ、最後にセミコロンを付けます。
0:46スライドの例ではアッパーケースを指定しています。
0:49これで対象の英語はすべて大文字で表示されます。
0:53エイチティーエムエル側でクラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることが前提です。
1:01まずはこの一行を書き、文字の見え方がどう変わるかを確認してみましょう。
1:06値のつづりを誤ると宣言全体が無効になる点にも注意してください。
1:11値の部分だけを書き換えれば、他の指定はそのままに比較できます。
1:15代表的な値を順に見ていきます。
1:18まずアッパーケースは、英語の小文字をすべて大文字に変えて表示します。
1:23見出しを力強く見せたいときによく使われます。
1:26反対にローワーケースは、大文字を含んだ文字をすべて小文字に変えます。
1:32もともと大文字で書かれた略語なども小文字になるので、使いどころには注意が必要です。
1:38なお、この変換が効くのは主にアルファベットなど大文字と小文字を持つ文字です。
1:44日本語のひらがなや漢字には大文字小文字の区別がないため、見た目は変わりません。
1:50文字の種類によって結果が違う点を押さえておきましょう。
1:54続いて二つの値です。
1:56キャピタライズは、単語ごとに先頭の文字だけを大文字にし、残りはそのまま表示します。
2:02英語のタイトルらしく見せたいときに便利です。
2:05ただし単語の区切り方や言語によって結果が変わることがあります。
2:10もう一つのノーンは、変換を一切行わず、書かれた通りに表示する指定です。
2:15これがこのプロパティの初期値でもあります。
2:18親から変換を引き継いでいる要素で、ここだけ元の見た目に戻したいときにノーンが役立ちます。
2:24変換しない、というのも立派な選択肢だと覚えておきましょう。
2:29もう少し進んだ値と、基本情報を確認します。
2:32フルワイズを指定すると、半角の英数字などが全角に近い幅で表示され、日本語の文章の中でも横幅がそろいやすくなります。
2:41使う場面は限られますが、縦書きなどの組み版で選ばれることがあります。
2:47次に初期値と継承です。
2:49初期値はノーン、つまり変換なしで、このプロパティは親から子へ継承します。
2:55親にアッパーケースを指定すれば、中の子要素もまとめて大文字表示になるということです。
3:01またトルコ語など、言語によって大文字化の規則が異なる場合もあるため、英語以外では結果を確認する習慣を付けましょう。
3:11ここからは記事の実例です。
3:13エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
3:20デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。
3:26英語の部分が大文字に変わるかどうかが、比べるポイントになります。
3:31頭の部分では、スタイルシートをリンクで読み込んでください。
3:36比べるのはテキストトランスフォームだけなので、文章や構造などの土台は変えずに固定します。
3:42先に、この土台の形を頭に入れておきましょう。
3:45日本語が混ざることで、変換される部分とされない部分の違いも観察できます。
3:51土台のシーエスエスです。
3:53ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
4:00ここで最後の行にテキストトランスフォーム、アッパーケースを指定すると、ハローシーエスエスの英字がすべて大文字で表示されます。
4:12日本語の部分はそのままです。
4:15次に最後の行だけをノーンへ換えると、英語も書かれた通りの見た目に戻ります。
4:22変わるのはこの一行だけです。
4:25ファイルを保存して再読み込みし、英語の部分だけに注目して比べてください。
4:31自分の目で確かめることが理解への近道です。
4:35コピーした文字は元の表記のままになる点も、あわせて確認してみましょう。
4:42活用場面を整理します。
4:43ナビゲーションや見出しの英語をすべて大文字にそろえると、デザインに統一感が出ます。
4:49エイチティーエムエルでは読みやすい通常の表記で書いておき、表示だけをシーエスエスで整えられるのが利点です。
4:57小さなラベルやカテゴリー名をキャピタライズで整える使い方もよく見られます。
5:02逆に、本文の長い英語をすべて大文字にすると読みにくくなるため、見出しなどの短い文字に絞るのが無難です。
5:09元の文章の意味や表記はエイチティーエムエル側で正しく保ち、見た目の調整はシーエスエスに任せる、
5:14という役割分担を意識してください。
5:18効かないときと間違えやすい点を確認します。
5:22まず一番の注意点は、変換されるのは表示だけだということです。
5:28固有名詞や識別子、パスワードのように大文字と小文字に意味がある情報を安易に変換すると、
5:34読み手に誤解を与えるおそれがあります。
5:40また日本語だけの文章では、指定しても見た目が変わらず、効いていないように見えます。
5:47そのうえで開発者ツールを使い、ネットワークで取得、エレメンツでクラスの一致、
5:54スタイルズで上書きの有無、コンピューテッドで最終的な値を順に調べます。
6:01最後に狭い画面幅でも読めるか確認しましょう。
6:05原因を一つずつ切り分けると解決が早くなります。
6:09ブラウザー互換性を確認します。
6:12記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
6:18エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、とても古くから対応しています。
6:24アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
6:29今回比べたノーンとアッパーケースについても、同じく古い版から対応していることが記録されています。
6:37ただし本体が使えることと、すべての値が使えることは別です。
6:41フルワイズのような新しい値を使うときは、値ごとの対応も確認しましょう。
6:46基本の値は安心して使えるプロパティです。
6:49最後に練習とまとめです。
6:51まとめます。
6:52テキストトランスフォームは、表示上の大文字と小文字を変換する設定で、初期値はノーン、
6:55継承はしました。
6:59アッパーケースはすべて大文字に、ローワーケースはすべて小文字に、キャピタライズは単語の先頭だけを大文字にし、
7:04ノーンは変換しませんでした。
7:09元の文字列は変わらない点も大切なポイントでした。
7:13練習として、まずアッパーケースとノーンの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
7:22お疲れさまでした。
7:23関連するテキストインデントやホワイトスペースも一緒に学ぶと、文字まわりの理解が深まります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

text-transformの役割と主な指定値を解説。Hello CSSの英字が大文字表示へ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのtext-transformの使い方：指定値・実例・効かない原因とブラウザー互換性 →