WEBVTT

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

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

3
00:00:03.331 --> 00:00:05.968
今回のテーマは、フォントスタイルです。

4
00:00:05.968 --> 00:00:09.854
これは、文字を斜体にするかどうかを決めるプロパティです。

5
00:00:09.854 --> 00:00:16.515
イタリックと指定すると文字が傾いて表示され、ノーマルと指定すると通常のまっすぐな表示に戻ります。

6
00:00:16.515 --> 00:00:20.332
今回は、この二つを比べながら、基本の書き方から、効かないときの注意点まで、

7
00:00:20.332 --> 00:00:24.148
初心者向けに分かりやすく解説します。

8
00:00:24.148 --> 00:00:31.365
特に英字の部分で違いがはっきり出るので、実例では英語と日本語が混ざった文章を使って確かめていきましょう。

9
00:00:31.365 --> 00:00:36.361
引用や補足を目立たせたい場面でよく使う、文字まわりの基本プロパティです。

10
00:00:36.361 --> 00:00:37.965
まず基本の書き方です。

11
00:00:37.965 --> 00:00:42.703
書き方はとてもシンプルで、フォントスタイルの後ろにコロンを書き、値としてイタリックをひとつだけ書いて、

12
00:00:42.703 --> 00:00:47.441
最後にセミコロンを付けます。

13
00:00:47.441 --> 00:00:52.981
スライドの例では、デモというクラスを持つ要素に対して、斜体を指定しています。

14
00:00:52.981 --> 00:01:00.707
クラス名の前のドットや、波かっこを書き忘れると効かなくなるので、まずはこの三行をそのまま書いてみましょう。

15
00:01:00.707 --> 00:01:07.705
そしてブラウザーで、ハローシーエスエスという英字の部分が傾いて見えるかどうかを確かめてください。

16
00:01:07.705 --> 00:01:11.933
日本語の部分よりも、英字の方が変化に気付きやすいはずです。

17
00:01:11.933 --> 00:01:14.314
指定できる値を読み解きましょう。

18
00:01:14.314 --> 00:01:15.950
主な値は三つあります。

19
00:01:15.950 --> 00:01:18.628
ノーマルは通常のまっすぐな表示です。

20
00:01:18.628 --> 00:01:23.539
イタリックは、フォントが用意している専用の斜体字形を使う指定です。

21
00:01:23.539 --> 00:01:27.853
オブリークは、通常の字形を傾けて表示する指定で、角度を付けて書ける書き方もありますが、

22
00:01:27.853 --> 00:01:32.168
その対応は別に確認が必要です。

23
00:01:32.168 --> 00:01:36.334
ふだんの制作では、斜体にしたいときはイタリック、戻したいときはノーマル、

24
00:01:36.334 --> 00:01:40.500
という二つの使い分けを覚えれば十分です。

25
00:01:40.500 --> 00:01:45.113
オブリークは、違いを知るための知識として押さえておきましょう。

26
00:01:45.113 --> 00:01:50.618
迷ったときは、まずイタリックとノーマルを切り替えて比べるのがおすすめです。

27
00:01:50.618 --> 00:01:55.291
イタリックとオブリークの違いを、もう少し詳しく見ます。

28
00:01:55.291 --> 00:02:02.387
イタリックは、フォントに専用の斜体字形が用意されていれば、それを使って表示します。

29
00:02:02.387 --> 00:02:07.406
英字のフォントでは、形そのものが少し変わることもあります。

30
00:02:07.406 --> 00:02:13.290
一方オブリークは、今の字形をそのまま斜めに傾けて表示する考え方です。

31
00:02:13.290 --> 00:02:18.655
ただし、使っているフォントに専用の斜体がない場合、イタリックを指定しても、

32
00:02:18.655 --> 00:02:24.020
ブラウザーが機械的に傾けて代用することがあります。

33
00:02:24.020 --> 00:02:30.943
そのため、環境によっては二つの結果がほとんど同じに見えることも珍しくありません。

34
00:02:30.943 --> 00:02:35.962
違いが出るかどうかは、フォント次第だと覚えておきましょう。

35
00:02:35.962 --> 00:02:37.791
初期値と継承を確認します。

36
00:02:37.791 --> 00:02:42.716
初期値はノーマルで、指定しなければ通常のまっすぐな文字で表示されます。

37
00:02:42.716 --> 00:02:45.952
そして、このプロパティは親から子へ継承します。

38
00:02:45.952 --> 00:02:52.143
親の要素にイタリックと書けば、その中にある見出しや文章も斜体で表示されるようになります。

39
00:02:52.143 --> 00:02:57.772
便利な反面、広い範囲に指定すると、意図しない場所まで傾いてしまうこともあります。

40
00:02:57.772 --> 00:03:02.837
一部分だけ戻したいときは、その要素に改めてノーマルを書き直してください。

41
00:03:02.837 --> 00:03:11.702
また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはノーマルとイタリックの基本をしっかり押さえましょう。

42
00:03:11.702 --> 00:03:13.725
ここからは記事の実例です。

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

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

45
00:03:28.044 --> 00:03:31.857
英字と日本語が混ざっているので、傾き方が文字の種類によってどう違うかを、

46
00:03:31.857 --> 00:03:35.670
一つの画面で比べられます。

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

48
00:03:40.184 --> 00:03:45.164
この土台は変えずに固定し、次で変える一行の効果だけを観察します。

49
00:03:45.164 --> 00:03:51.234
文章を長めにして折り返しも見えるようにしておくと、変化が分かりやすくなります。

50
00:03:51.234 --> 00:03:53.111
土台のシーエスエスです。

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

52
00:03:59.212 --> 00:04:05.313
最後の行でフォントスタイルにイタリックを指定すると、文字が斜体で表示されます。

53
00:04:05.313 --> 00:04:09.693
まずは英字のハローシーエスエスの部分に注目してください。

54
00:04:09.693 --> 00:04:12.040
傾きがはっきり分かるはずです。

55
00:04:12.040 --> 00:04:18.766
日本語の部分は、フォントによって傾き方が控えめだったり、機械的な傾斜になったりします。

56
00:04:18.766 --> 00:04:22.755
ファイルを保存してブラウザーを再読み込みし、英字と日本語で見え方がどう違うかを、

57
00:04:22.755 --> 00:04:26.744
よく観察してください。

58
00:04:26.744 --> 00:04:31.750
色や余白は変えていないので、違いはこの一行だけが生んだものです。

59
00:04:31.750 --> 00:04:35.296
次に最後の行だけを、ノーマルへ置き換えます。

60
00:04:35.296 --> 00:04:39.809
すると、傾いていた文字が通常のまっすぐな表示に戻ります。

61
00:04:39.809 --> 00:04:45.128
特に英字の部分で、傾いた表示と通常表示の違いが比べやすくなります。

62
00:04:45.128 --> 00:04:48.916
ここで大切なのは、色や太さや大きさは同じでも、傾きひとつで文章の印象が変わる、

63
00:04:48.916 --> 00:04:52.703
という実感です。

64
00:04:52.703 --> 00:04:58.345
引用文や作品名など、周りと少しだけ区別したい部分に斜体は向いています。

65
00:04:58.345 --> 00:05:04.469
逆に、長い本文全体を斜体にすると読みにくくなるので、使う範囲は絞りましょう。

66
00:05:04.469 --> 00:05:11.239
変更後は保存して再読み込みし、二つの見え方の違いを自分の言葉で説明してみてください。

67
00:05:11.239 --> 00:05:13.222
間違えやすい点を確認します。

68
00:05:13.222 --> 00:05:15.347
一つ目は、日本語フォントです。

69
00:05:15.347 --> 00:05:19.454
多くの日本語フォントには専用のイタリック体がないため、指定しても機械的な傾斜になったり、

70
00:05:19.454 --> 00:05:23.562
変化が小さく見えたりします。

71
00:05:23.562 --> 00:05:27.669
効いていないと思っても、英字で試すと判断しやすくなります。

72
00:05:27.669 --> 00:05:30.219
二つ目は、エムタグとの使い分けです。

73
00:05:30.219 --> 00:05:38.575
文章の意味として強調したいときはエイチティーエムエルのエムを使い、見た目だけを傾けたいときにこのプロパティを使います。

74
00:05:38.575 --> 00:05:43.533
そのほか、セレクターの不一致や別の宣言による上書きもよくある原因です。

75
00:05:43.533 --> 00:05:50.048
開発者ツールで、ネットワーク、エレメンツ、スタイルズ、コンピューテッドの順に確認しましょう。

76
00:05:50.048 --> 00:05:52.192
ブラウザー互換性を確認します。

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

78
00:05:58.196 --> 00:06:04.200
エッジが十二以降、ファイアフォックスが一以降で補足条件あり、サファリが一以降で対応しています。

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

80
00:06:09.203 --> 00:06:14.063
イタリックとノーマルも、同じく古いバージョンから広く対応しています。

81
00:06:14.063 --> 00:06:19.924
とても歴史の長いプロパティなので、今回使った基本の書き方は安心して使えるでしょう。

82
00:06:19.924 --> 00:06:24.212
ただし、オブリークに角度を付けるような新しい書き方は別です。

83
00:06:24.212 --> 00:06:27.786
使う場合は、その値の対応も個別に確認してください。

84
00:06:27.786 --> 00:06:29.702
最後に練習とまとめです。

85
00:06:29.702 --> 00:06:30.659
まとめます。

86
00:06:30.659 --> 00:06:34.969
フォントスタイルは、文字を斜体にするかどうかを決めるプロパティで、初期値はノーマル、

87
00:06:34.969 --> 00:06:39.279
親から子へ継承しました。

88
00:06:39.279 --> 00:06:44.228
イタリックは専用の斜体字形、オブリークは傾斜による表示でした。

89
00:06:44.228 --> 00:06:49.416
練習として、まずイタリックとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて、

90
00:06:49.416 --> 00:06:54.604
結果がどう変わるかを比べてみてください。

91
00:06:54.604 --> 00:06:56.040
お疲れさまでした。

92
00:06:56.040 --> 00:07:04.341
関連するフォントウェイトやフォントサイズも合わせて学ぶと、文字まわりの整え方がより確かなものになります。

93
00:07:04.341 --> 00:07:10.726
斜体を適切な場所で使えるようになると、引用や補足が伝わりやすいページを作れます。