WEBVTT

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

2
00:00:00.783 --> 00:00:03.656
エイチティーエムエル、リファレンス解説です。

3
00:00:03.656 --> 00:00:06.789
HTMLタグ編の二十一本目は、スタイルタグです。

4
00:00:06.789 --> 00:00:13.578
これまで色や余白はシーエスエスで整えると学んできましたが、そのシーエスエス自体はどこに書くのでしょうか。

5
00:00:13.578 --> 00:00:15.928
方法の一つが、このスタイルタグです。

6
00:00:15.928 --> 00:00:23.108
エイチティーエムエルファイルの中に直接シーエスエスを書き込むことで、そのページの見た目をその場で決められます。

7
00:00:23.108 --> 00:00:26.894
今回は、置き場所、基本の書き方、記事のお知らせの例、外部シーエスエスとの使い分けまで、

8
00:00:26.894 --> 00:00:30.680
初心者向けに順番に解説します。

9
00:00:30.680 --> 00:00:34.597
仕組みが分かると、シーエスエスの置き場所で迷わなくなります。

10
00:00:34.597 --> 00:00:38.252
小さな仕組みですが、すべてのページの見た目づくりの入口になるタグですので、

11
00:00:38.252 --> 00:00:41.908
ここでしっかり押さえておきましょう。

12
00:00:41.908 --> 00:00:45.150
まず、どんな場面で使うかを整理しましょう。

13
00:00:45.150 --> 00:00:49.937
向いているのは、そのページでしか使わない、小さなスタイルです。

14
00:00:49.937 --> 00:00:56.576
たとえば、キャンペーンページだけのお知らせの色や、練習でちょっと試したい指定などです。

15
00:00:56.576 --> 00:01:01.131
逆に、サイト全体で何度も使う決まりを、ページごとにコピーして書き続けると、

16
00:01:01.131 --> 00:01:05.686
直すときに全部のページを探すことになります。

17
00:01:05.686 --> 00:01:09.468
記事も、複数ページで共通にするなら外部シーエスエスへ分けると管理しやすくなります、

18
00:01:09.468 --> 00:01:13.251
と伝えています。

19
00:01:13.251 --> 00:01:19.736
便利だから何でも入れるのではなく、小さく、そのページ限り、という目安で選びましょう。

20
00:01:19.736 --> 00:01:21.065
基本の書き方です。

21
00:01:21.065 --> 00:01:26.825
スタイルは開始タグと終了タグを明示し、その間にシーエスエスのルールを書きます。

22
00:01:26.825 --> 00:01:30.813
置き場所は、文書の情報をまとめるヘッドの中が基本です。

23
00:01:30.813 --> 00:01:34.062
本文を表すボディの中に置くのではありません。

24
00:01:34.062 --> 00:01:40.265
コード例では、ノーティスというクラスへの指定を、ヘッドの中のスタイルに書いています。

25
00:01:40.265 --> 00:01:44.179
中に書く文法は、ふだんのシーエスエスとまったく同じで、セレクターと波括弧、

26
00:01:44.179 --> 00:01:48.093
プロパティと値の組み合わせです。

27
00:01:48.093 --> 00:01:53.705
まずはこの形を写して、保存後に再読み込みし、指定が効くか確認してみましょう。

28
00:01:53.705 --> 00:01:57.915
ヘッドは画面には直接表示されませんが、ページの土台を決める大切な場所だということも、

29
00:01:57.915 --> 00:02:02.124
合わせて覚えておきましょう。

30
00:02:02.124 --> 00:02:04.898
記事の活用事例を見てみましょう。

31
00:02:04.898 --> 00:02:09.233
お知らせの文章に、余白と淡い背景色を付ける例です。

32
00:02:09.233 --> 00:02:17.382
スタイルの中では、ノーティスというクラスに対して、内側の余白を一レム、背景色を指定しています。

33
00:02:17.382 --> 00:02:21.890
本文側では、段落にクラスとしてノーティスを付けます。

34
00:02:21.890 --> 00:02:26.918
この二つが名前でつながることで、初めて見た目が変わります。

35
00:02:26.918 --> 00:02:32.639
試すときは、練習用ファイルのヘッドにスタイルを、ボディに段落を置いて保存し、

36
00:02:32.639 --> 00:02:38.361
再読み込みしてお知らせの背景が変わるか確認してください。

37
00:02:38.361 --> 00:02:44.776
クラス名の綴りが一文字でも違うと効かないので、そこも丁寧に見比べましょう。

38
00:02:44.776 --> 00:02:46.646
次は、メディア属性です。

39
00:02:46.646 --> 00:02:53.816
スタイルタグには、どんな条件のときにこのスタイルを適用するかを、メディア属性で指定できます。

40
00:02:53.816 --> 00:02:58.492
記事の例は、画面の幅が四十八レム以上のとき、という条件です。

41
00:02:58.492 --> 00:03:05.350
広い画面では余白を広くし、狭い画面では別の指定を使う、といった切り替えが可能になります。

42
00:03:05.350 --> 00:03:10.494
書き方はメディアクエリと呼ばれる形式で、括弧の中に条件を書きます。

43
00:03:10.494 --> 00:03:14.702
条件を付けない場合は、常にそのスタイルが適用されます。

44
00:03:14.702 --> 00:03:21.716
最初は条件なしで慣れてから、必要になったときにメディア属性を足す、という順番で大丈夫です。

45
00:03:21.716 --> 00:03:24.861
外部シーエスエスとの違いも押さえましょう。

46
00:03:24.861 --> 00:03:31.000
外部シーエスエスは、スタイル専用の別ファイルを作り、リンクタグで読み込む方法です。

47
00:03:31.000 --> 00:03:37.739
多くのページで同じファイルを共有できるので、サイト全体の色やレイアウトを一か所で直せます。

48
00:03:37.739 --> 00:03:44.627
一方、スタイルタグはそのエイチティーエムエルの中にだけ存在し、ほかのページからは使えません。

49
00:03:44.627 --> 00:03:49.194
迷ったら、ほかのページでも使う決まりは外部ファイルへ、そのページだけの小さな指定はスタイルタグへ、

50
00:03:49.194 --> 00:03:53.761
と分けて考えてください。

51
00:03:53.761 --> 00:03:58.104
この使い分けが、管理しやすいサイト作りの第一歩になります。

52
00:03:58.104 --> 00:04:00.445
スタイルの属性を整理します。

53
00:04:00.445 --> 00:04:02.285
主に使うのは二つです。

54
00:04:02.285 --> 00:04:05.630
メディアは、先ほど紹介した適用条件です。

55
00:04:05.630 --> 00:04:12.737
ノンスは、セキュリティの仕組みであるシーエスピーが、許可したスタイルかどうかを識別するための値で、

56
00:04:12.737 --> 00:04:19.845
サーバー側の決まりと一致させ、固定の秘密のように使い回してはいけません。

57
00:04:19.845 --> 00:04:23.022
普段の学習では意識しなくて大丈夫です。

58
00:04:23.022 --> 00:04:27.789
このほか、アイディーやクラス、ラング、データ属性といった共通属性も使えますが、

59
00:04:27.789 --> 00:04:32.555
属性一覧は実用上の主な項目だけです。

60
00:04:32.555 --> 00:04:35.565
まずはメディアだけ覚えれば十分です。

61
00:04:35.565 --> 00:04:44.596
属性はたくさん付けるものではなく、必要なときだけ最小限に使う、という姿勢が読みやすいコードにつながります。

62
00:04:44.596 --> 00:04:47.903
スタイルが効かないときの確認ポイントです。

63
00:04:47.903 --> 00:04:50.265
一つ目は、クラス名の一致です。

64
00:04:50.265 --> 00:04:57.667
スタイル側で書いたクラス名と、本文の要素に付けたクラス名が、一文字でも違うと指定は届きません。

65
00:04:57.667 --> 00:05:01.131
二つ目は、波括弧やセミコロンの書き忘れです。

66
00:05:01.131 --> 00:05:06.958
閉じ括弧が一つ足りないだけで、その後の指定まで効かなくなることがあります。

67
00:05:06.958 --> 00:05:14.045
三つ目は置き場所で、スタイルがヘッドの中にあるか、終了タグを閉じているかを確認しましょう。

68
00:05:14.045 --> 00:05:20.186
開発者ツールのエレメンツで構造を眺めると、間違いの場所に気付きやすくなります。

69
00:05:20.186 --> 00:05:23.336
焦らず、上から順に確かめるのが近道です。

70
00:05:23.336 --> 00:05:26.812
注意点と、よくある間違いを確認します。

71
00:05:26.812 --> 00:05:29.373
一つ目は、詰め込みすぎです。

72
00:05:29.373 --> 00:05:39.069
スタイルタグに大量のシーエスエスを書くと、ファイルが読みにくくなり、直したい場所を探すのも大変になります。

73
00:05:39.069 --> 00:05:42.911
大きくなる前に外部ファイルへ移しましょう。

74
00:05:42.911 --> 00:05:50.595
二つ目はコピーの繰り返しで、同じ指定を何ページにも貼ると、修正漏れの原因になります。

75
00:05:50.595 --> 00:06:01.389
三つ目は表示確認で、三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けたり重なったりしないか確かめてください。

76
00:06:01.389 --> 00:06:06.328
見た目を変えるときは、意味を持つタグの選択とシーエスエスの指定を分けて考える、

77
00:06:06.328 --> 00:06:11.268
という記事の考え方も大切です。

78
00:06:11.268 --> 00:06:13.529
ブラウザー互換性を確認します。

79
00:06:13.529 --> 00:06:19.333
記事が参照するエムディーエヌの記録では、スタイル本体は、クロームが一以降、

80
00:06:19.333 --> 00:06:25.136
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

81
00:06:25.136 --> 00:06:29.357
メディア属性も、同じく古くから主要ブラウザーで使えます。

82
00:06:29.357 --> 00:06:36.894
数字がとても小さいことから分かる通り、昔からある基本の仕組みなので、現在の環境では安心して使えます。

83
00:06:36.894 --> 00:06:43.527
ただし、これは要素本体の対応開始の記録であり、細かな表示まで保証するものではありません。

84
00:06:43.527 --> 00:06:48.200
大切なページでは、スマートフォンでも一度表示を確認しましょう。

85
00:06:48.200 --> 00:06:55.888
新しい属性を使うときは、本体とは別に対応状況を確認する、という習慣も一緒に身に付けておくと安心です。

86
00:06:55.888 --> 00:06:57.802
最後に練習とまとめです。

87
00:06:57.802 --> 00:07:03.224
スタイルは、エイチティーエムエルの中にシーエスエスを書くタグでした。

88
00:07:03.224 --> 00:07:05.297
大切なポイントは三つです。

89
00:07:05.297 --> 00:07:08.646
一つ目は、置き場所はヘッドの中であること。

90
00:07:08.646 --> 00:07:16.461
二つ目は、そのページだけの小さなスタイルに向いていて、共通の決まりは外部シーエスエスへ分けること。

91
00:07:16.461 --> 00:07:21.405
三つ目は、メディア属性で画面幅などの条件を付けられることです。

92
00:07:21.405 --> 00:07:30.176
練習として、お知らせの段落を一つ作り、スタイルで背景色と余白を付けて、ブラウザーで表示を確認してみてください。

93
00:07:30.176 --> 00:07:31.611
お疲れさまでした。

94
00:07:31.611 --> 00:07:36.236
次回は、文字を太く強調する、ストロングタグを学びましょう。