WEBVTT

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

2
00:00:00.985 --> 00:00:04.104
エイチティーエムエル入門、第三回です。

3
00:00:04.104 --> 00:00:07.059
今回のテーマは、画像とフォームです。

4
00:00:07.059 --> 00:00:14.610
前回、見出しとリンクで文書構造を作った紹介ページに、説明図と入力フォームを追加していきます。

5
00:00:14.610 --> 00:00:16.579
今回のゴールは二つです。

6
00:00:16.579 --> 00:00:22.489
一つ目は、画像を正しく表示し、画像が見えない場合の説明まで用意すること。

7
00:00:22.489 --> 00:00:28.399
二つ目は、入力欄とその見出しを、正しく結び付けたフォームを作ることです。

8
00:00:28.399 --> 00:00:36.442
ここで作るエイチティーエムエルは、次回以降のシーエスエスとジャバスクリプトの共通の土台になります。

9
00:00:36.442 --> 00:00:39.643
元になる記事は、エスイーの部屋の、エイチティーエムエルの画像とフォーム、

10
00:00:39.643 --> 00:00:42.844
です。

11
00:00:42.844 --> 00:00:45.945
最初に、画像ファイルを正しく読み込む方法です。

12
00:00:45.945 --> 00:00:51.271
完成コードの圧縮ファイルに含まれる、ワークショップ ドット エスブイジーという説明図を、

13
00:00:51.271 --> 00:00:56.597
インデックス ドット エイチティーエムエルと同じフォルダーに置きます。

14
00:00:56.597 --> 00:00:59.496
コードでは、エスアールシー イコール ドット スラッシュ ワークショップ、

15
00:00:59.496 --> 00:01:02.395
と書きます。

16
00:01:02.395 --> 00:01:06.036
このドット スラッシュは、現在のフォルダーを表します。

17
00:01:06.036 --> 00:01:07.789
これを相対パスと言います。

18
00:01:07.789 --> 00:01:11.295
ファイル同士の位置関係で、場所を指定する書き方です。

19
00:01:11.295 --> 00:01:16.149
もし画像を、イメージズというフォルダーへ移したら、パスも、ドット スラッシュ イメージズ スラッシュ ワークショップ、

20
00:01:16.149 --> 00:01:21.003
へ変更する必要があります。

21
00:01:21.003 --> 00:01:23.025
画像を動かしたら、パスも直す。

22
00:01:23.025 --> 00:01:24.104
これが基本です。

23
00:01:24.104 --> 00:01:28.179
自分の写真で試す場合の注意点も押さえておきましょう。

24
00:01:28.179 --> 00:01:31.941
一つ目は、使用する権利のある画像を使うことです。

25
00:01:31.941 --> 00:01:38.053
二つ目は、実際のファイル名と拡張子を、コードの指定と正確に一致させることです。

26
00:01:38.053 --> 00:01:41.188
特に、大文字と小文字に注意してください。

27
00:01:41.188 --> 00:01:48.711
自分のパソコンの中では表示できても、公開先の環境では、大文字と小文字が区別されることがあります。

28
00:01:48.711 --> 00:01:53.335
フォト ドット ジェーペグと、すべて小文字のフォト ドット ジェーペグが、

29
00:01:53.335 --> 00:01:57.958
別のファイルとして扱われる場合があるのです。

30
00:01:57.958 --> 00:02:03.444
名前の付け方を最初からそろえておくと、この手のトラブルを避けられます。

31
00:02:03.444 --> 00:02:05.690
次に、画像の説明、オルトです。

32
00:02:05.690 --> 00:02:10.182
説明図には、そこで伝えている情報を短く表すオルトを付けます。

33
00:02:10.182 --> 00:02:16.921
読み上げソフトを使う人や、画像が読み込めなかった場合に、この文字が画像の代わりになります。

34
00:02:16.921 --> 00:02:21.338
今回の例では、エイチティーエムエル、シーエスエス、ジャバスクリプトの順番でウェブサイトを組み立てる図、

35
00:02:21.338 --> 00:02:25.756
という説明です。

36
00:02:25.756 --> 00:02:32.943
逆に、周囲の文章と重複する、単なる装飾の画像なら、オルトを空にして、不要な読み上げを減らします。

37
00:02:32.943 --> 00:02:37.136
そして、ファイル名だけを説明として使うのはやめましょう。

38
00:02:37.136 --> 00:02:42.976
ワークショップ ドット エスブイジーという名前では、何の図なのか伝わりません。

39
00:02:42.976 --> 00:02:45.814
幅と高さの指定も一緒に覚えましょう。

40
00:02:45.814 --> 00:02:51.175
ウィドスとハイトは、画像の縦横比をブラウザーへ伝える助けになります。

41
00:02:51.175 --> 00:02:59.059
表示する場所を先に確保できるので、画像が読み込まれたときに、周りの文章がガクッと動きにくくなります。

42
00:02:59.059 --> 00:03:02.212
今回の図は、横六百四十、縦四百八十です。

43
00:03:02.212 --> 00:03:07.100
画面の大きさに合わせた縮小そのものは、シーエスエスで行います。

44
00:03:07.100 --> 00:03:11.988
もう一つ、ローディング レイジーという遅延読み込みの設定です。

45
00:03:11.988 --> 00:03:16.876
これは、ページの下部の方にある画像を追加する場合に検討します。

46
00:03:16.876 --> 00:03:21.764
最初に目に入る主要な画像は、遅延読み込みにしないのが基本です。

47
00:03:21.764 --> 00:03:24.744
ここからは、入力フォームの構造です。

48
00:03:24.744 --> 00:03:29.048
最も大切なのが、レーベルとインプットの結び付けです。

49
00:03:29.048 --> 00:03:33.518
レーベルの、フォー イコール ネームと、インプットの、アイディー イコール ネームを、

50
00:03:33.518 --> 00:03:37.988
同じ値で対応させます。

51
00:03:37.988 --> 00:03:44.941
結び付けておくと、レーベルの文字をクリックしたときに、入力欄にフォーカスが移ります。

52
00:03:44.941 --> 00:03:49.080
実際にクリックして、移るかどうか確認してください。

53
00:03:49.080 --> 00:03:51.729
注意点は、プレースホルダーです。

54
00:03:51.729 --> 00:03:57.854
入力欄の中に薄く表示されるヒントの文字は、入力を始めると消えてしまいます。

55
00:03:57.854 --> 00:04:05.304
入力後に項目名が分からなくなるので、プレースホルダーをレーベルの代わりにしてはいけません。

56
00:04:05.304 --> 00:04:08.883
似た名前の属性が並ぶので、役割を整理します。

57
00:04:08.883 --> 00:04:11.324
ネームは、データの項目名です。

58
00:04:11.324 --> 00:04:17.994
第九回では、フォームデータという仕組みを使って、このネームから入力値を取得します。

59
00:04:17.994 --> 00:04:23.525
アイディーは、要素を特定するための目印で、ネームとは役割が違います。

60
00:04:23.525 --> 00:04:26.616
リクワイアードは、必須入力を表します。

61
00:04:26.616 --> 00:04:31.009
マックスレングス イコール 四十は、文字数の上限です。

62
00:04:31.009 --> 00:04:37.028
オートコンプリートは、ブラウザーが名前などの入力を補助するための指定です。

63
00:04:37.028 --> 00:04:38.818
最後に大切な注意です。

64
00:04:38.818 --> 00:04:49.718
ブラウザーによるチェックは、利用者への案内にはなりますが、それだけで、サーバーが受け取るデータの安全性を保証できるわけではありません。

65
00:04:49.718 --> 00:04:52.972
本格的な確認は、受け取り側でも必要です。

66
00:04:52.972 --> 00:04:55.982
今回は、フォームの送信を行いません。

67
00:04:55.982 --> 00:05:00.329
実際の送信には、データの受け取り先が必要だからです。

68
00:05:00.329 --> 00:05:06.182
この連載では外部へ送信せず、画面の中で入力内容を確認する練習をします。

69
00:05:06.182 --> 00:05:11.366
そのため、送信ボタンは、ディスエーブルド、つまり押せない状態にしておき、

70
00:05:11.366 --> 00:05:16.549
ジャバスクリプトの準備ができる第九回で有効にします。

71
00:05:16.549 --> 00:05:18.723
理由も知っておきましょう。

72
00:05:18.723 --> 00:05:22.987
メソッドやアクションを省略したまま送信すると、通常は、現在のユーアールエルへの、

73
00:05:22.987 --> 00:05:27.251
ゲット送信になります。

74
00:05:27.251 --> 00:05:35.445
学習用のボタンを勝手に有効にして、個人情報をユーアールエルに含めるような使い方はしないでください。

75
00:05:35.445 --> 00:05:38.120
練習では、架空の名前で試します。

76
00:05:38.120 --> 00:05:42.700
完成コードの中で、今回新しく増えた部分を確認しましょう。

77
00:05:42.700 --> 00:05:45.481
上半分が説明図のアイエムジーです。

78
00:05:45.481 --> 00:05:49.080
相対パス、オルト、幅と高さがそろっています。

79
00:05:49.080 --> 00:05:51.370
下半分が、体験フォームです。

80
00:05:51.370 --> 00:05:57.913
名前の入力欄と、学びたい内容の選択欄があり、それぞれレーベルと結び付いています。

81
00:05:57.913 --> 00:06:01.348
選択欄は、セレクトとオプションで作ります。

82
00:06:01.348 --> 00:06:05.437
確認ボタンは、ディスエーブルドで押せない状態です。

83
00:06:05.437 --> 00:06:10.835
全体のコードでは、トップの説明図の横の見出しや、学べることのカード三つも含まれていますが、

84
00:06:10.835 --> 00:06:16.234
今回の主役は、この図とフォームの二つです。

85
00:06:16.234 --> 00:06:21.468
開始タグと終了タグの対応を追いながら、全体を置き換えてください。

86
00:06:21.468 --> 00:06:25.488
完成コードに出てくる、二つの目印も整理しておきます。

87
00:06:25.488 --> 00:06:29.662
クラスは、後からシーエスエスを適用するための目印です。

88
00:06:29.662 --> 00:06:32.909
同じクラスは、複数の要素で再利用できます。

89
00:06:32.909 --> 00:06:39.711
アイディーは、ページ内リンクやジャバスクリプトから、特定の要素を見つけるための目印です。

90
00:06:39.711 --> 00:06:44.195
また、メニューとテーマのボタンは、ヒドゥンで隠しています。

91
00:06:44.195 --> 00:06:49.915
ジャバスクリプトを導入するまで、押しても動かないボタンを出さないためです。

92
00:06:49.915 --> 00:06:52.080
そして、ノースクリプトです。

93
00:06:52.080 --> 00:07:02.438
これは、ジャバスクリプトが無効な環境に向けた説明を表示するものですが、スクリプトの読み込み失敗のすべてを検知する仕組みではありません。

94
00:07:02.438 --> 00:07:04.912
役割を正確に知っておきましょう。

95
00:07:04.912 --> 00:07:07.677
最後に、点検の習慣と練習問題です。

96
00:07:07.677 --> 00:07:14.509
まず、マウスを使わず、タブキーで、リンク、入力欄、選択欄を順に移動してみてください。

97
00:07:14.509 --> 00:07:19.064
操作する対象が見えるか、レーベルが分かるかを確かめます。

98
00:07:19.064 --> 00:07:24.269
ディスエーブルドのボタンは、通常、フォーカスの順番から外れます。

99
00:07:24.269 --> 00:07:25.895
練習問題は三つです。

100
00:07:25.895 --> 00:07:30.775
一つ目、図を別の場所へ移し、相対パスを直して再表示すること。

101
00:07:30.775 --> 00:07:36.306
二つ目、選択肢に、エイチティーエムエルとシーエスエスを追加すること。

102
00:07:36.306 --> 00:07:39.722
表示する文字とバリューを対応させましょう。

103
00:07:39.722 --> 00:07:44.276
三つ目、図の説明、オルトを自分の言葉で書き直すことです。

104
00:07:44.276 --> 00:07:45.252
まとめです。

105
00:07:45.252 --> 00:07:53.711
今日は、相対パス、オルト、レーベルとインプットの結び付け、そして送信しないフォームの考え方を学びました。

106
00:07:53.711 --> 00:07:58.916
次回は、このエイチティーエムエルへ、シーエスエスを読み込みます。

107
00:07:58.916 --> 00:08:00.380
お疲れさまでした。