SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLの画像とフォーム：パス・alt・labelを使って内容を充実させるの解説動画

再生時間 8:00動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル入門、第三回です。
  3. 0:04今回のテーマは、画像とフォームです。
  4. 0:07前回、見出しとリンクで文書構造を作った紹介ページに、説明図と入力フォームを追加していきます。
  5. 0:14今回のゴールは二つです。
  6. 0:16一つ目は、画像を正しく表示し、画像が見えない場合の説明まで用意すること。
  7. 0:22二つ目は、入力欄とその見出しを、正しく結び付けたフォームを作ることです。
  8. 0:28ここで作るエイチティーエムエルは、次回以降のシーエスエスとジャバスクリプトの共通の土台になります。
  9. 0:36元になる記事は、エスイーの部屋の、エイチティーエムエルの画像とフォーム、
  10. 0:39です。
  11. 0:42最初に、画像ファイルを正しく読み込む方法です。
  12. 0:45完成コードの圧縮ファイルに含まれる、ワークショップ ドット エスブイジーという説明図を、
  13. 0:51インデックス ドット エイチティーエムエルと同じフォルダーに置きます。
  14. 0:56コードでは、エスアールシー イコール ドット スラッシュ ワークショップ、
  15. 0:59と書きます。
  16. 1:02このドット スラッシュは、現在のフォルダーを表します。
  17. 1:06これを相対パスと言います。
  18. 1:07ファイル同士の位置関係で、場所を指定する書き方です。
  19. 1:11もし画像を、イメージズというフォルダーへ移したら、パスも、ドット スラッシュ イメージズ スラッシュ ワークショップ、
  20. 1:16へ変更する必要があります。
  21. 1:21画像を動かしたら、パスも直す。
  22. 1:23これが基本です。
  23. 1:24自分の写真で試す場合の注意点も押さえておきましょう。
  24. 1:28一つ目は、使用する権利のある画像を使うことです。
  25. 1:31二つ目は、実際のファイル名と拡張子を、コードの指定と正確に一致させることです。
  26. 1:38特に、大文字と小文字に注意してください。
  27. 1:41自分のパソコンの中では表示できても、公開先の環境では、大文字と小文字が区別されることがあります。
  28. 1:48フォト ドット ジェーペグと、すべて小文字のフォト ドット ジェーペグが、
  29. 1:53別のファイルとして扱われる場合があるのです。
  30. 1:57名前の付け方を最初からそろえておくと、この手のトラブルを避けられます。
  31. 2:03次に、画像の説明、オルトです。
  32. 2:05説明図には、そこで伝えている情報を短く表すオルトを付けます。
  33. 2:10読み上げソフトを使う人や、画像が読み込めなかった場合に、この文字が画像の代わりになります。
  34. 2:16今回の例では、エイチティーエムエル、シーエスエス、ジャバスクリプトの順番でウェブサイトを組み立てる図、
  35. 2:21という説明です。
  36. 2:25逆に、周囲の文章と重複する、単なる装飾の画像なら、オルトを空にして、不要な読み上げを減らします。
  37. 2:32そして、ファイル名だけを説明として使うのはやめましょう。
  38. 2:37ワークショップ ドット エスブイジーという名前では、何の図なのか伝わりません。
  39. 2:42幅と高さの指定も一緒に覚えましょう。
  40. 2:45ウィドスとハイトは、画像の縦横比をブラウザーへ伝える助けになります。
  41. 2:51表示する場所を先に確保できるので、画像が読み込まれたときに、周りの文章がガクッと動きにくくなります。
  42. 2:59今回の図は、横六百四十、縦四百八十です。
  43. 3:02画面の大きさに合わせた縮小そのものは、シーエスエスで行います。
  44. 3:07もう一つ、ローディング レイジーという遅延読み込みの設定です。
  45. 3:11これは、ページの下部の方にある画像を追加する場合に検討します。
  46. 3:16最初に目に入る主要な画像は、遅延読み込みにしないのが基本です。
  47. 3:21ここからは、入力フォームの構造です。
  48. 3:24最も大切なのが、レーベルとインプットの結び付けです。
  49. 3:29レーベルの、フォー イコール ネームと、インプットの、アイディー イコール ネームを、
  50. 3:33同じ値で対応させます。
  51. 3:37結び付けておくと、レーベルの文字をクリックしたときに、入力欄にフォーカスが移ります。
  52. 3:44実際にクリックして、移るかどうか確認してください。
  53. 3:49注意点は、プレースホルダーです。
  54. 3:51入力欄の中に薄く表示されるヒントの文字は、入力を始めると消えてしまいます。
  55. 3:57入力後に項目名が分からなくなるので、プレースホルダーをレーベルの代わりにしてはいけません。
  56. 4:05似た名前の属性が並ぶので、役割を整理します。
  57. 4:08ネームは、データの項目名です。
  58. 4:11第九回では、フォームデータという仕組みを使って、このネームから入力値を取得します。
  59. 4:17アイディーは、要素を特定するための目印で、ネームとは役割が違います。
  60. 4:23リクワイアードは、必須入力を表します。
  61. 4:26マックスレングス イコール 四十は、文字数の上限です。
  62. 4:31オートコンプリートは、ブラウザーが名前などの入力を補助するための指定です。
  63. 4:37最後に大切な注意です。
  64. 4:38ブラウザーによるチェックは、利用者への案内にはなりますが、それだけで、サーバーが受け取るデータの安全性を保証できるわけではありません。
  65. 4:49本格的な確認は、受け取り側でも必要です。
  66. 4:52今回は、フォームの送信を行いません。
  67. 4:55実際の送信には、データの受け取り先が必要だからです。
  68. 5:00この連載では外部へ送信せず、画面の中で入力内容を確認する練習をします。
  69. 5:06そのため、送信ボタンは、ディスエーブルド、つまり押せない状態にしておき、
  70. 5:11ジャバスクリプトの準備ができる第九回で有効にします。
  71. 5:16理由も知っておきましょう。
  72. 5:18メソッドやアクションを省略したまま送信すると、通常は、現在のユーアールエルへの、
  73. 5:22ゲット送信になります。
  74. 5:27学習用のボタンを勝手に有効にして、個人情報をユーアールエルに含めるような使い方はしないでください。
  75. 5:35練習では、架空の名前で試します。
  76. 5:38完成コードの中で、今回新しく増えた部分を確認しましょう。
  77. 5:42上半分が説明図のアイエムジーです。
  78. 5:45相対パス、オルト、幅と高さがそろっています。
  79. 5:49下半分が、体験フォームです。
  80. 5:51名前の入力欄と、学びたい内容の選択欄があり、それぞれレーベルと結び付いています。
  81. 5:57選択欄は、セレクトとオプションで作ります。
  82. 6:01確認ボタンは、ディスエーブルドで押せない状態です。
  83. 6:05全体のコードでは、トップの説明図の横の見出しや、学べることのカード三つも含まれていますが、
  84. 6:10今回の主役は、この図とフォームの二つです。
  85. 6:16開始タグと終了タグの対応を追いながら、全体を置き換えてください。
  86. 6:21完成コードに出てくる、二つの目印も整理しておきます。
  87. 6:25クラスは、後からシーエスエスを適用するための目印です。
  88. 6:29同じクラスは、複数の要素で再利用できます。
  89. 6:32アイディーは、ページ内リンクやジャバスクリプトから、特定の要素を見つけるための目印です。
  90. 6:39また、メニューとテーマのボタンは、ヒドゥンで隠しています。
  91. 6:44ジャバスクリプトを導入するまで、押しても動かないボタンを出さないためです。
  92. 6:49そして、ノースクリプトです。
  93. 6:52これは、ジャバスクリプトが無効な環境に向けた説明を表示するものですが、スクリプトの読み込み失敗のすべてを検知する仕組みではありません。
  94. 7:02役割を正確に知っておきましょう。
  95. 7:04最後に、点検の習慣と練習問題です。
  96. 7:07まず、マウスを使わず、タブキーで、リンク、入力欄、選択欄を順に移動してみてください。
  97. 7:14操作する対象が見えるか、レーベルが分かるかを確かめます。
  98. 7:19ディスエーブルドのボタンは、通常、フォーカスの順番から外れます。
  99. 7:24練習問題は三つです。
  100. 7:25一つ目、図を別の場所へ移し、相対パスを直して再表示すること。
  101. 7:30二つ目、選択肢に、エイチティーエムエルとシーエスエスを追加すること。
  102. 7:36表示する文字とバリューを対応させましょう。
  103. 7:39三つ目、図の説明、オルトを自分の言葉で書き直すことです。
  104. 7:44まとめです。
  105. 7:45今日は、相対パス、オルト、レーベルとインプットの結び付け、そして送信しないフォームの考え方を学びました。
  106. 7:53次回は、このエイチティーエムエルへ、シーエスエスを読み込みます。
  107. 7:58お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

画像の相対パス、alt、幅と高さ、labelとinput、requiredを学び、CSSとJavaScriptの土台になるHTMLを完成させます。

解説記事・サンプルコードを読む：HTMLの画像とフォーム：パス・alt・labelを使って内容を充実させる →