WEBVTT

1
00:00:00.000 --> 00:00:00.884
こんにちは。

2
00:00:00.884 --> 00:00:03.537
シーエスエス、リファレンス解説です。

3
00:00:03.537 --> 00:00:06.926
今回のテーマは、テキストトランスフォームです。

4
00:00:06.926 --> 00:00:14.294
これは、画面に表示される文字を、大文字にしたり小文字にしたりと、見た目だけを変換するプロパティです。

5
00:00:14.294 --> 00:00:20.189
たとえばハローシーエスエスという英語が、すべて大文字で表示されるようになります。

6
00:00:20.189 --> 00:00:26.378
ここで大切なのは、エイチティーエムエルに書かれた元の文字列自体は変わらないことです。

7
00:00:26.378 --> 00:00:30.504
あくまで表示のされ方を切り替える指定だと覚えてください。

8
00:00:30.504 --> 00:00:38.020
今回はアッパーケースとノーンを中心に比べながら、値の違いと注意点を初心者向けに分かりやすく解説します。

9
00:00:38.020 --> 00:00:39.651
まず基本の書き方です。

10
00:00:39.651 --> 00:00:46.321
セレクターのあとにプロパティ名を書き、コロンを挟んで値を入れ、最後にセミコロンを付けます。

11
00:00:46.321 --> 00:00:49.879
スライドの例ではアッパーケースを指定しています。

12
00:00:49.879 --> 00:00:53.288
これで対象の英語はすべて大文字で表示されます。

13
00:00:53.288 --> 00:01:01.589
エイチティーエムエル側でクラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることが前提です。

14
00:01:01.589 --> 00:01:06.777
まずはこの一行を書き、文字の見え方がどう変わるかを確認してみましょう。

15
00:01:06.777 --> 00:01:11.373
値のつづりを誤ると宣言全体が無効になる点にも注意してください。

16
00:01:11.373 --> 00:01:15.968
値の部分だけを書き換えれば、他の指定はそのままに比較できます。

17
00:01:15.968 --> 00:01:18.282
代表的な値を順に見ていきます。

18
00:01:18.282 --> 00:01:23.528
まずアッパーケースは、英語の小文字をすべて大文字に変えて表示します。

19
00:01:23.528 --> 00:01:26.922
見出しを力強く見せたいときによく使われます。

20
00:01:26.922 --> 00:01:32.168
反対にローワーケースは、大文字を含んだ文字をすべて小文字に変えます。

21
00:01:32.168 --> 00:01:38.494
もともと大文字で書かれた略語なども小文字になるので、使いどころには注意が必要です。

22
00:01:38.494 --> 00:01:44.357
なお、この変換が効くのは主にアルファベットなど大文字と小文字を持つ文字です。

23
00:01:44.357 --> 00:01:50.374
日本語のひらがなや漢字には大文字小文字の区別がないため、見た目は変わりません。

24
00:01:50.374 --> 00:01:54.540
文字の種類によって結果が違う点を押さえておきましょう。

25
00:01:54.540 --> 00:01:56.033
続いて二つの値です。

26
00:01:56.033 --> 00:02:02.153
キャピタライズは、単語ごとに先頭の文字だけを大文字にし、残りはそのまま表示します。

27
00:02:02.153 --> 00:02:05.437
英語のタイトルらしく見せたいときに便利です。

28
00:02:05.437 --> 00:02:10.064
ただし単語の区切り方や言語によって結果が変わることがあります。

29
00:02:10.064 --> 00:02:15.289
もう一つのノーンは、変換を一切行わず、書かれた通りに表示する指定です。

30
00:02:15.289 --> 00:02:18.423
これがこのプロパティの初期値でもあります。

31
00:02:18.423 --> 00:02:24.991
親から変換を引き継いでいる要素で、ここだけ元の見た目に戻したいときにノーンが役立ちます。

32
00:02:24.991 --> 00:02:29.320
変換しない、というのも立派な選択肢だと覚えておきましょう。

33
00:02:29.320 --> 00:02:32.733
もう少し進んだ値と、基本情報を確認します。

34
00:02:32.733 --> 00:02:41.997
フルワイズを指定すると、半角の英数字などが全角に近い幅で表示され、日本語の文章の中でも横幅がそろいやすくなります。

35
00:02:41.997 --> 00:02:47.523
使う場面は限られますが、縦書きなどの組み版で選ばれることがあります。

36
00:02:47.523 --> 00:02:49.311
次に初期値と継承です。

37
00:02:49.311 --> 00:02:55.162
初期値はノーン、つまり変換なしで、このプロパティは親から子へ継承します。

38
00:02:55.162 --> 00:03:01.988
親にアッパーケースを指定すれば、中の子要素もまとめて大文字表示になるということです。

39
00:03:01.988 --> 00:03:11.252
またトルコ語など、言語によって大文字化の規則が異なる場合もあるため、英語以外では結果を確認する習慣を付けましょう。

40
00:03:11.252 --> 00:03:13.195
ここからは記事の実例です。

41
00:03:13.195 --> 00:03:20.819
エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。

42
00:03:20.819 --> 00:03:26.947
デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。

43
00:03:26.947 --> 00:03:31.730
英語の部分が大文字に変わるかどうかが、比べるポイントになります。

44
00:03:31.730 --> 00:03:36.065
頭の部分では、スタイルシートをリンクで読み込んでください。

45
00:03:36.065 --> 00:03:42.642
比べるのはテキストトランスフォームだけなので、文章や構造などの土台は変えずに固定します。

46
00:03:42.642 --> 00:03:45.931
先に、この土台の形を頭に入れておきましょう。

47
00:03:45.931 --> 00:03:51.312
日本語が混ざることで、変換される部分とされない部分の違いも観察できます。

48
00:03:51.312 --> 00:03:53.583
土台のシーエスエスです。

49
00:03:53.583 --> 00:04:00.964
ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。

50
00:04:00.964 --> 00:04:12.698
ここで最後の行にテキストトランスフォーム、アッパーケースを指定すると、ハローシーエスエスの英字がすべて大文字で表示されます。

51
00:04:12.698 --> 00:04:15.348
日本語の部分はそのままです。

52
00:04:15.348 --> 00:04:22.351
次に最後の行だけをノーンへ換えると、英語も書かれた通りの見た目に戻ります。

53
00:04:22.351 --> 00:04:25.000
変わるのはこの一行だけです。

54
00:04:25.000 --> 00:04:31.813
ファイルを保存して再読み込みし、英語の部分だけに注目して比べてください。

55
00:04:31.813 --> 00:04:35.788
自分の目で確かめることが理解への近道です。

56
00:04:35.788 --> 00:04:42.412
コピーした文字は元の表記のままになる点も、あわせて確認してみましょう。

57
00:04:42.412 --> 00:04:43.965
活用場面を整理します。

58
00:04:43.965 --> 00:04:49.755
ナビゲーションや見出しの英語をすべて大文字にそろえると、デザインに統一感が出ます。

59
00:04:49.755 --> 00:04:57.239
エイチティーエムエルでは読みやすい通常の表記で書いておき、表示だけをシーエスエスで整えられるのが利点です。

60
00:04:57.239 --> 00:05:02.464
小さなラベルやカテゴリー名をキャピタライズで整える使い方もよく見られます。

61
00:05:02.464 --> 00:05:09.666
逆に、本文の長い英語をすべて大文字にすると読みにくくなるため、見出しなどの短い文字に絞るのが無難です。

62
00:05:09.666 --> 00:05:14.185
元の文章の意味や表記はエイチティーエムエル側で正しく保ち、見た目の調整はシーエスエスに任せる、

63
00:05:14.185 --> 00:05:18.704
という役割分担を意識してください。

64
00:05:18.704 --> 00:05:22.662
効かないときと間違えやすい点を確認します。

65
00:05:22.662 --> 00:05:28.317
まず一番の注意点は、変換されるのは表示だけだということです。

66
00:05:28.317 --> 00:05:34.160
固有名詞や識別子、パスワードのように大文字と小文字に意味がある情報を安易に変換すると、

67
00:05:34.160 --> 00:05:40.003
読み手に誤解を与えるおそれがあります。

68
00:05:40.003 --> 00:05:47.731
また日本語だけの文章では、指定しても見た目が変わらず、効いていないように見えます。

69
00:05:47.731 --> 00:05:54.610
そのうえで開発者ツールを使い、ネットワークで取得、エレメンツでクラスの一致、

70
00:05:54.610 --> 00:06:01.490
スタイルズで上書きの有無、コンピューテッドで最終的な値を順に調べます。

71
00:06:01.490 --> 00:06:05.637
最後に狭い画面幅でも読めるか確認しましょう。

72
00:06:05.637 --> 00:06:09.972
原因を一つずつ切り分けると解決が早くなります。

73
00:06:09.972 --> 00:06:12.189
ブラウザー互換性を確認します。

74
00:06:12.189 --> 00:06:18.470
記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、

75
00:06:18.470 --> 00:06:24.751
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、とても古くから対応しています。

76
00:06:24.751 --> 00:06:29.924
アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。

77
00:06:29.924 --> 00:06:37.018
今回比べたノーンとアッパーケースについても、同じく古い版から対応していることが記録されています。

78
00:06:37.018 --> 00:06:41.304
ただし本体が使えることと、すべての値が使えることは別です。

79
00:06:41.304 --> 00:06:46.476
フルワイズのような新しい値を使うときは、値ごとの対応も確認しましょう。

80
00:06:46.476 --> 00:06:49.432
基本の値は安心して使えるプロパティです。

81
00:06:49.432 --> 00:06:51.229
最後に練習とまとめです。

82
00:06:51.229 --> 00:06:52.128
まとめます。

83
00:06:52.128 --> 00:06:55.871
テキストトランスフォームは、表示上の大文字と小文字を変換する設定で、初期値はノーン、

84
00:06:55.871 --> 00:06:59.615
継承はしました。

85
00:06:59.615 --> 00:07:04.707
アッパーケースはすべて大文字に、ローワーケースはすべて小文字に、キャピタライズは単語の先頭だけを大文字にし、

86
00:07:04.707 --> 00:07:09.798
ノーンは変換しませんでした。

87
00:07:09.798 --> 00:07:13.392
元の文字列は変わらない点も大切なポイントでした。

88
00:07:13.392 --> 00:07:22.078
練習として、まずアッパーケースとノーンの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

89
00:07:22.078 --> 00:07:23.425
お疲れさまでした。

90
00:07:23.425 --> 00:07:30.164
関連するテキストインデントやホワイトスペースも一緒に学ぶと、文字まわりの理解が深まります。