WEBVTT

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

2
00:00:00.819 --> 00:00:04.369
エイチティーエムエル、シーエスエス入門、概要編です。

3
00:00:04.369 --> 00:00:07.782
今回のテーマは、シーエスエスのプロパティ一覧です。

4
00:00:07.782 --> 00:00:13.926
プロパティとは、エイチティーエムエルのどの部分を、どう表示するかを指定する項目のことです。

5
00:00:13.926 --> 00:00:20.753
文字の色、余白の広さ、並べ方、動きまで、見た目の指定はすべてプロパティと値の組み合わせで表されます。

6
00:00:20.753 --> 00:00:25.122
その数は百を超えるため、全部を暗記しようとすると挫折しがちです。

7
00:00:25.122 --> 00:00:31.265
元になる記事は、入門からサイト制作でよく使う主要な項目を用途別に整理したリファレンスです。

8
00:00:31.265 --> 00:00:34.679
この動画のゴールは、分類の地図を頭に入れて、必要なプロパティを自分で探し、

9
00:00:34.679 --> 00:00:38.092
試せるようになることです。

10
00:00:38.092 --> 00:00:40.017
まず試すための準備です。

11
00:00:40.017 --> 00:00:48.679
エイチティーエムエルとシーエスエスは別ファイルに分け、ヘッドの中のリンクタグでスタイルシートを読み込みます。

12
00:00:48.679 --> 00:00:56.699
画面のコードで、ボディは対象を選ぶセレクター、カラーはプロパティ、その後ろの色の値が実際の指定です。

13
00:00:56.699 --> 00:01:01.993
セレクターを変えると適用先が変わり、値を変えると表示が変わります。

14
00:01:01.993 --> 00:01:07.928
編集したら保存してブラウザーを再読み込みし、結果を開発者ツールで確かめる。

15
00:01:07.928 --> 00:01:11.938
この繰り返しが、プロパティを覚える一番の近道です。

16
00:01:11.938 --> 00:01:17.552
個別のプロパティは、それぞれの記事で指定値や実例を詳しく確認できます。

17
00:01:17.552 --> 00:01:20.735
値を書くときの土台になるのが、単位と共通の値です。

18
00:01:20.735 --> 00:01:24.427
ピクセルは画面上の固定した寸法で、細い枠線などに向きます。

19
00:01:24.427 --> 00:01:29.775
レムはルート要素の文字サイズを基準にする単位で、文字と余白を連動させやすくなります。

20
00:01:29.775 --> 00:01:34.995
パーセントは便利ですが、何を基準にするかはプロパティごとに違うので注意が必要です。

21
00:01:34.995 --> 00:01:40.852
ビューポート基準のブイダブリューやブイエイチ、小さい画面向けのエスブイエイチなどもあります。

22
00:01:40.852 --> 00:01:44.290
さらに、親の値を引き継ぐインヘリット、初期値へ戻すイニシャルといった値は、

23
00:01:44.290 --> 00:01:47.728
ほぼすべてのプロパティで使えます。

24
00:01:47.728 --> 00:01:51.420
迷ったら、まずレムとピクセルの使い分けから押さえましょう。

25
00:01:51.420 --> 00:01:54.145
ここからは用途別の分類を見ていきます。

26
00:01:54.145 --> 00:01:56.154
最初は文字の読みやすさです。

27
00:01:56.154 --> 00:02:03.326
カラーで文字色、フォントファミリーで書体、フォントサイズで大きさ、フォントウェイトで太さを決めます。

28
00:02:03.326 --> 00:02:07.485
読みやすさを大きく左右するのがラインハイト、行の高さです。

29
00:02:07.485 --> 00:02:12.793
単位なしの値を書くと文字サイズに比例し、継承の扱いも分かりやすくなります。

30
00:02:12.793 --> 00:02:16.665
画面の見出しではクランプという関数を使い、画面幅に応じて文字を大きくしつつ、

31
00:02:16.665 --> 00:02:20.538
最小と最大の範囲に収めています。

32
00:02:20.538 --> 00:02:27.280
文字は利用者が拡大して読むこともあるので、拡大しても崩れないかまで確認する習慣を付けましょう。

33
00:02:27.280 --> 00:02:31.721
文字の続きとして、揃え方と装飾、折り返しを扱います。

34
00:02:31.721 --> 00:02:39.920
テキストアラインは行の中の文字を左右や中央に揃えるもので、箱そのものを中央へ置く指定とは別です。

35
00:02:39.920 --> 00:02:49.656
テキストデコレーションは下線などの装飾で、リンクの下線を消す場合は、色以外の手掛かりでリンクと分かるようにします。

36
00:02:49.656 --> 00:02:53.927
長いファイル名やユーアールエルへの対策も定番です。

37
00:02:53.927 --> 00:03:02.125
画面の例では、改行を禁止し、はみ出しを隠し、末尾を省略記号で示す三つの指定を組み合わせています。

38
00:03:02.125 --> 00:03:09.812
ただし省略した全文を別途確認できる手段も用意して、情報を消してしまわないようにしましょう。

39
00:03:09.812 --> 00:03:14.256
次は余白・大きさ・枠線、いわゆるボックスモデルです。

40
00:03:14.256 --> 00:03:23.315
すべての要素は、内容の周りに内側の余白パディング、枠線ボーダー、外側の余白マージンという層を持っています。

41
00:03:23.315 --> 00:03:28.699
ボックスサイジングをボーダーボックスにしておくと、幅の指定にパディングと枠線が含まれるため、

42
00:03:28.699 --> 00:03:34.083
寸法の計算がぐっと単純になります。

43
00:03:34.083 --> 00:03:38.612
画面のカードでは、最大幅を指定して中央に寄せ、内側の余白、細い枠線、角の丸み、

44
00:03:38.612 --> 00:03:43.141
薄い影を組み合わせています。

45
00:03:43.141 --> 00:03:47.671
方向の指定には、書字方向に追従するインラインやブロックを使う書き方もあり、

46
00:03:47.671 --> 00:03:52.200
多言語対応ではそちらが便利です。

47
00:03:52.200 --> 00:03:55.250
背景と画像、そしてはみ出しの扱いです。

48
00:03:55.250 --> 00:04:01.108
背景色はバックグラウンドカラー、背景画像やグラデーションはバックグラウンドイメージで指定し、

49
00:04:01.108 --> 00:04:06.967
サイズはカバーかコンテインかで切り取り方が変わります。

50
00:04:06.967 --> 00:04:17.561
画像そのものには、画面の例のようにアスペクトレシオで縦横比を決め、オブジェクトフィットのカバーで枠いっぱいに収める書き方が定番です。

51
00:04:17.561 --> 00:04:21.413
内容がはみ出したときはオーバーフローで、見せる、切り取る、スクロールさせる、

52
00:04:21.413 --> 00:04:25.265
のどれかを選びます。

53
00:04:25.265 --> 00:04:29.518
ただし横はみ出しを隠すだけでは、内容やフォーカスが見えなくなることがあるので、

54
00:04:29.518 --> 00:04:33.772
まず原因を直すのが先決です。

55
00:04:33.772 --> 00:04:37.134
レイアウトの中心は、まずディスプレイです。

56
00:04:37.134 --> 00:04:45.778
ブロック、インライン、フレックス、グリッド、なし、といった値で、要素の表示と並びの方式そのものが決まります。

57
00:04:45.778 --> 00:04:51.860
位置の微調整にはポジションと、重なり順を決めるゼットインデックスを使います。

58
00:04:51.860 --> 00:04:55.222
一方向に並べるならフレックスボックスです。

59
00:04:55.222 --> 00:05:02.906
画面のナビゲーションでは、折り返しを許可し、縦方向を中央にそろえ、ギャップで間隔を作っています。

60
00:05:02.906 --> 00:05:10.589
フレックスの三つの値は、伸びる割合、縮む割合、基準サイズの順で、項目ごとの配分を決めるものです。

61
00:05:10.589 --> 00:05:16.832
並び順を変えるオーダーは、読み上げの順番までは変えない点も覚えておきましょう。

62
00:05:16.832 --> 00:05:19.651
二次元の配置にはグリッドを使います。

63
00:05:19.651 --> 00:05:26.855
グリッドテンプレートカラムズで行と列の型を定義し、項目をそのマス目に配置していく考え方です。

64
00:05:26.855 --> 00:05:34.686
エフアールは残り空間を配分する単位、リピートは同じ型の繰り返し、ミンマックスは下限と上限の指定です。

65
00:05:34.686 --> 00:05:44.552
画面の例は実践的な型で、狭い画面ではカードを一列にし、画面幅が四十八レム以上になったらメディアクエリで三列に切り替えています。

66
00:05:44.552 --> 00:05:47.998
エリアに名前を付けて配置する方法もあります。

67
00:05:47.998 --> 00:05:54.732
大切なのは、見た目の並びとエイチティーエムエルの読み順が矛盾しないようにすることです。

68
00:05:54.732 --> 00:05:57.201
状態や動き、そして値の共有です。

69
00:05:57.201 --> 00:06:01.366
カーソルでポインターの見た目、アクセントカラーでチェックボックスなどの色を整え、

70
00:06:01.366 --> 00:06:05.532
操作の手掛かりを用意します。

71
00:06:05.532 --> 00:06:13.555
動きは、状態が変わるときの橋渡しをするトランジションと、キーフレームで再生するアニメーションが中心です。

72
00:06:13.555 --> 00:06:21.115
対象をオールにせず絞ること、そして動きを減らす設定の人にはアニメーションを付けない配慮が大切です。

73
00:06:21.115 --> 00:06:23.430
最後にカスタムプロパティです。

74
00:06:23.430 --> 00:06:29.138
ハイフン二つで始まる名前は自分で定義でき、バー関数で各所から参照できます。

75
00:06:29.138 --> 00:06:34.384
色や余白を一か所で管理できるので、テーマの切り替えにも向いています。

76
00:06:34.384 --> 00:06:39.090
仕上げは、対応状況の考え方と、効かないときの確認です。

77
00:06:39.090 --> 00:06:44.667
プロパティ名が使えても、特定の値だけ未対応ということがあります。

78
00:06:44.667 --> 00:06:54.254
画面のように、まず安定した指定を書き、対応が確認できた環境でだけアットサポーツで新しい値を重ねるのが安全です。

79
00:06:54.254 --> 00:06:58.785
それでも効かないときは、開発者ツールで切り分けます。

80
00:06:58.785 --> 00:07:05.321
ファイルが読み込めているか、クラス名が一致しているか、スタイルズで打ち消し線が出ていないか、

81
00:07:05.321 --> 00:07:11.857
コンピューテッドで最終的な値は何か、の順に確かめましょう。

82
00:07:11.857 --> 00:07:13.426
今回のまとめです。

83
00:07:13.426 --> 00:07:20.049
プロパティは用途別の分類で探し、単位と共通の値を土台にして、試して確かめる。

84
00:07:20.049 --> 00:07:26.324
この流れが身に付けば、一覧は暗記の山ではなく、制作の引き出しになります。