WEBVTT

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

2
00:00:01.014 --> 00:00:05.409
エイチティーエムエル、シーエスエス入門、第四回です。

3
00:00:05.409 --> 00:00:08.959
今回から、いよいよシーエスエスに入ります。

4
00:00:08.959 --> 00:00:15.044
前回までに作ったエイチティーエムエルへ、初めてシーエスエスを適用します。

5
00:00:15.044 --> 00:00:25.017
今回のゴールは、シーエスエスファイルの読み込みを確認し、どの要素に、どの指定が効くのかを説明できるようになることです。

6
00:00:25.017 --> 00:00:27.891
大きなレイアウトはまだ作りません。

7
00:00:27.891 --> 00:00:32.117
文字の色、背景、行間を、少しずつ変更していきます。

8
00:00:32.117 --> 00:00:35.328
小さく変えて、効いているかを確認する。

9
00:00:35.328 --> 00:00:38.878
この進め方が、シーエスエス上達の近道です。

10
00:00:38.878 --> 00:00:43.780
元になる記事は、エスイーの部屋の、シーエスエス入門、です。

11
00:00:43.780 --> 00:00:48.507
最初に、エイチティーエムエルからシーエスエスを読み込む方法です。

12
00:00:48.507 --> 00:00:56.927
インデックス ドット エイチティーエムエルと同じ場所に、スタイルズ ドット シーエスエスというファイルを作ります。

13
00:00:56.927 --> 00:00:58.257
ここで注意点です。

14
00:00:58.257 --> 00:01:03.279
ファイルを作っただけでは、ブラウザーは自動では読み込んでくれません。

15
00:01:03.279 --> 00:01:08.893
エイチティーエムエルのヘッドの中に、リンクの行を一行追加する必要があります。

16
00:01:08.893 --> 00:01:11.995
置き場所は、タイトルの後などで構いません。

17
00:01:11.995 --> 00:01:13.324
この行の意味です。

18
00:01:13.324 --> 00:01:18.790
レル イコール スタイルシートは、このファイルがスタイルシートであること。

19
00:01:18.790 --> 00:01:22.631
エイチレフは、シーエスエスファイルの場所を表します。

20
00:01:22.631 --> 00:01:26.619
スタイルとスタイルズのような、小さな名前の違いでも読み込みに失敗するので、

21
00:01:26.619 --> 00:01:30.608
ファイル名は正確に合わせましょう。

22
00:01:30.608 --> 00:01:32.454
今回の完成コードです。

23
00:01:32.454 --> 00:01:37.321
スタイルズ ドット シーエスエス全体が、画面に出ています。

24
00:01:37.321 --> 00:01:42.020
保存してページを再読み込みすると、四つの変化が起きます。

25
00:01:42.020 --> 00:01:44.034
背景が淡い色になること。

26
00:01:44.034 --> 00:01:46.552
文字とリンクの色が変わること。

27
00:01:46.552 --> 00:01:48.062
行間が広がること。

28
00:01:48.062 --> 00:01:53.601
そして、ページ上部の紹介部分、ヒーローには、別の背景色が付きます。

29
00:01:53.601 --> 00:01:58.803
一方で、この時点では、余白やカードの並び方は、まだ整いません。

30
00:01:58.803 --> 00:02:00.146
それで正常です。

31
00:02:00.146 --> 00:02:06.691
今回は、見た目を完成させる回ではなく、読み込みと効き方を確認する回だからです。

32
00:02:06.691 --> 00:02:13.908
一回の変更を小さくすると、シーエスエスが読み込めているかどうかを判断しやすくなります。

33
00:02:13.908 --> 00:02:17.179
シーエスエスのルールの読み方を覚えましょう。

34
00:02:17.179 --> 00:02:20.301
一つのルールは、三つの部分でできています。

35
00:02:20.301 --> 00:02:25.208
ボディのように、どれに適用するかを指定する部分が、セレクターです。

36
00:02:25.208 --> 00:02:28.479
カラーのような、何を変えるかが、プロパティ。

37
00:02:28.479 --> 00:02:31.155
その値が、どのように変えるか、です。

38
00:02:31.155 --> 00:02:36.954
書き方の決まりとして、波括弧の中に宣言を並べ、各宣言をセミコロンで区切ります。

39
00:02:36.954 --> 00:02:39.630
よく使うプロパティも確認しましょう。

40
00:02:39.630 --> 00:02:45.280
カラーは文字色、バックグラウンドは背景、ラインハイトは行の高さを指定します。

41
00:02:45.280 --> 00:02:51.376
この三つの部品に分解して読めれば、初めて見るルールでも意味を追えるようになります。

42
00:02:51.376 --> 00:02:55.115
セレクターの書き方を、もう少し詳しく見ます。

43
00:02:55.115 --> 00:03:01.064
ドット ヒーローは、クラス イコール ヒーローが付いた要素を選びます。

44
00:03:01.064 --> 00:03:03.274
ここで間違えやすい点です。

45
00:03:03.274 --> 00:03:07.353
シーエスエス側の先頭にあるピリオドは、目印です。

46
00:03:07.353 --> 00:03:11.602
エイチティーエムエルのクラス名自体には含めません。

47
00:03:11.602 --> 00:03:18.570
次に、エイチ ワン、カンマ、エイチ ツー、カンマ、エイチ スリーという書き方です。

48
00:03:18.570 --> 00:03:23.839
カンマは、複数の対象を列挙して、同じ指定をまとめて適用します。

49
00:03:23.839 --> 00:03:30.808
よく似た書き方に、空白で区切る書き方がありますが、カンマと空白では意味が違います。

50
00:03:30.808 --> 00:03:34.717
空白の方は、次のスライドの子孫セレクターです。

51
00:03:34.717 --> 00:03:39.476
記号の違いが、対象の選び方を変えることを意識しましょう。

52
00:03:39.476 --> 00:03:42.290
対象の選び方には、粒度があります。

53
00:03:42.290 --> 00:03:46.429
全ての段落を変えるなら、ピーという要素セレクター。

54
00:03:46.429 --> 00:03:52.057
特定の部品だけを変えるなら、ドット カードのようなクラスを使います。

55
00:03:52.057 --> 00:03:57.852
そして、ドット カード、空白、ピーという書き方が、子孫セレクターです。

56
00:03:57.852 --> 00:04:00.997
カードの内側にある段落だけを選びます。

57
00:04:00.997 --> 00:04:06.046
記事では、これを一時的にファイルの末尾へ追加して、カード内の段落だけが変わることを確認したら、

58
00:04:06.046 --> 00:04:11.095
削除するよう案内しています。

59
00:04:11.095 --> 00:04:12.419
実験して、戻す。

60
00:04:12.419 --> 00:04:13.909
良い練習方法です。

61
00:04:13.909 --> 00:04:20.448
また、シャープ レッスンズはアイディーセレクターですが、見た目の再利用や優先順位の管理を考えると、

62
00:04:20.448 --> 00:04:26.987
部品の見た目はクラスを中心に指定すると整理しやすくなります。

63
00:04:26.987 --> 00:04:32.616
アイディーは、ページ内リンクやジャバスクリプトの目印として残せます。

64
00:04:32.616 --> 00:04:34.603
読みやすい文字の設定です。

65
00:04:34.603 --> 00:04:42.400
フォントファミリーの、システム ユーアイは、オペレーティングシステムの画面向けフォントを使う指定です。

66
00:04:42.400 --> 00:04:47.904
サンセリフは、代替として使う総称フォント、いわゆるゴシック系の指定です。

67
00:04:47.904 --> 00:04:57.230
同じ指定でも、オペレーティングシステムによって字形が変わるため、特定のパソコンでの見た目だけを前提にしないことが大切です。

68
00:04:57.230 --> 00:04:59.523
次に、ラインハイト、行間です。

69
00:04:59.523 --> 00:05:03.345
本文の、一 点 八は、文字サイズに対する倍率です。

70
00:05:03.345 --> 00:05:06.556
行間が広がると、文章は読みやすくなります。

71
00:05:06.556 --> 00:05:09.002
見出しは一 点 四にしています。

72
00:05:09.002 --> 00:05:13.435
大きな文字で、行間まで広くなりすぎないようにするためです。

73
00:05:13.435 --> 00:05:17.716
本文と見出しで、行間の考え方が違う点に注目してください。

74
00:05:17.716 --> 00:05:20.897
大きさを表す単位を、三つ整理します。

75
00:05:20.897 --> 00:05:26.376
ピクセル、ピーエックスは、シーエスエスピクセルという単位です。

76
00:05:26.376 --> 00:05:34.682
レム、アールイーエムは、ルート要素、つまりエイチティーエムエル要素の文字サイズを基準にします。

77
00:05:34.682 --> 00:05:39.454
パーセントは、幅の場合、主に包含ブロック、つまり親の箱の幅が基準ですが、

78
00:05:39.454 --> 00:05:44.226
プロパティによって基準が異なります。

79
00:05:44.226 --> 00:05:50.235
だから、パーセントを見たら、何の割合なのかを確認する習慣が大切です。

80
00:05:50.235 --> 00:06:00.309
方針として、文字サイズを変更できない固定レイアウトにはせず、後の回で、レムのような相対的なサイズも使っていきます。

81
00:06:00.309 --> 00:06:04.904
相対単位は、利用者の設定を活かしやすい点が利点です。

82
00:06:04.904 --> 00:06:07.755
シーエスエスが効かないときの調べ方です。

83
00:06:07.755 --> 00:06:09.892
ケースは二つに分けて考えます。

84
00:06:09.892 --> 00:06:12.885
まず、読み込み自体ができていない場合です。

85
00:06:12.885 --> 00:06:17.161
背景を変えても何も変わらないときは、基本から確認しましょう。

86
00:06:17.161 --> 00:06:19.584
シーエスエスファイルを保存したか。

87
00:06:19.584 --> 00:06:23.005
リンクのパスの、ファイル名や場所が合っているか。

88
00:06:23.005 --> 00:06:29.561
次に、開発者ツールを開き、ネットワークのタブで、スタイルズ ドット シーエスエスを探します。

89
00:06:29.561 --> 00:06:34.122
見つからないというエラーが出ていれば、読み込みに失敗しています。

90
00:06:34.122 --> 00:06:38.968
ファイル名の小さな違いや、置き場所のずれが原因のことがほとんどです。

91
00:06:38.968 --> 00:06:42.816
あわててルールを書き直す前に、まず読み込みを確認する。

92
00:06:42.816 --> 00:06:43.956
これが鉄則です。

93
00:06:43.956 --> 00:06:45.660
もう一つのケースです。

94
00:06:45.660 --> 00:06:51.701
開発者ツールのエレメンツで、スタイルズを見ると、自分のルールは表示されている。

95
00:06:51.701 --> 00:06:54.180
なのに、打ち消し線が付いている。

96
00:06:54.180 --> 00:06:56.968
この場合は、読み込みはできています。

97
00:06:56.968 --> 00:07:01.151
別の指定が優先されて、自分の指定が負けている状態です。

98
00:07:01.151 --> 00:07:07.037
読み込みの問題と、優先順位の問題は、別の話として分けて調べることが大切です。

99
00:07:07.037 --> 00:07:11.220
混同すると、合っているルールを消してしまったりします。

100
00:07:11.220 --> 00:07:15.557
優先順位が決まる仕組みについては、次回、詳しく扱います。

101
00:07:15.557 --> 00:07:20.824
今回は、打ち消し線イコール負けているサイン、と覚えておけば十分です。

102
00:07:20.824 --> 00:07:22.632
最後に、練習問題です。

103
00:07:22.632 --> 00:07:29.044
ドット ヒーローの背景色、リンクの色、本文の行間を、一つずつ変更してください。

104
00:07:29.044 --> 00:07:31.181
ポイントは、一つずつです。

105
00:07:31.181 --> 00:07:36.606
毎回、保存して、再読み込みして、変化を確認してから、次へ進みます。

106
00:07:36.606 --> 00:07:41.373
まとめて変えると、どれが何を変えたのか分からなくなります。

107
00:07:41.373 --> 00:07:42.524
注意点も一つ。

108
00:07:42.524 --> 00:07:46.634
リンクの下線は、最初から消さないようにしましょう。

109
00:07:46.634 --> 00:07:53.703
文字色だけに頼らなくても、リンクだと分かる状態を保つことが、使いやすさにつながります。

110
00:07:53.703 --> 00:07:54.689
まとめです。

111
00:07:54.689 --> 00:08:01.429
今日は、リンクによる読み込み、セレクター、プロパティ、値というルールの読み方、

112
00:08:01.429 --> 00:08:08.169
クラスと子孫セレクター、フォントと行間、単位、そして効かないときの調べ方を学びました。

113
00:08:08.169 --> 00:08:12.772
次回は、余白、幅、ボックスモデルと優先順位がテーマです。

114
00:08:12.772 --> 00:08:14.252
お疲れさまでした。