SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTML入門：最初のindex.htmlを作り、ブラウザーで表示するの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00この動画では、初めてのエイチティーエムエルを作って、ブラウザーで表示する方法を、
  3. 0:04初心者の方にも分かるように、ゆっくり、詳しく解説します。
  4. 0:09元になる記事は、エスイーの部屋の、エイチティーエムエル入門、最初のインデックス ドット エイチティーエムエルを作り、
  5. 0:13ブラウザーで表示する、です。
  6. 0:18この動画のゴールは、たった一つです。
  7. 0:20自分で書いた文章を、ブラウザーの画面に表示すること。
  8. 0:23特別なソフトのインストールは必要ありません。
  9. 0:26テキストエディターとブラウザーがあれば、今日から始められます。
  10. 0:30最初に、ウェブページを作る三つの言語の役割を整理しましょう。
  11. 0:35エイチティーエムエルは、見出し、段落、リンクなど、情報の意味と構造を書くものです。
  12. 0:41シーエスエスは、色、余白、配置など、見た目を整えるものです。
  13. 0:46ジャバスクリプトは、クリックや入力に応じた動きを担当します。
  14. 0:51ここで大切なのは、最初から三つを同時に書かないことです。
  15. 0:55今日は、エイチティーエムエルだけでページを表示します。
  16. 0:59何を変えたら、何が変わるのかを、一つずつ確認しながら進めましょう。
  17. 1:05最終的には、スマートフォン対応やメニュー、フォームを備えたサイトを目指す連載の、
  18. 1:09第一回という位置づけです。
  19. 1:13用意するものは二つだけです。
  20. 1:15一つ目は、文字を書くためのテキストエディター。
  21. 1:19普段使っているもので構いません。
  22. 1:21ただし、ワープロのような形式ではなく、ユーティーエフ エイトのプレーンテキストとして保存できるものを使ってください。
  23. 1:30二つ目は、表示を確認するブラウザーです。
  24. 1:33次に、作業用のフォルダーを一つ作ります。
  25. 1:36名前は、アトリエ サイト、とします。
  26. 1:39そのフォルダーの中に、インデックス ドット エイチティーエムエル、というファイルを作って保存します。
  27. 1:46場所と名前をそろえておくと、後で迷子になりにくくなります。
  28. 1:51始める前に、初心者の方が特につまずきやすい注意点を三つお伝えします。
  29. 1:56一つ目は、拡張子です。
  30. 1:58ファイル名が、インデックス ドット エイチティーエムエル ドット ティーエックスティー、
  31. 2:03のようになってしまうことがあります。
  32. 2:07これでは、ブラウザーは文章ファイルとして扱ってしまいます。
  33. 2:12オペレーティングシステムで拡張子を表示する設定にしておくと、見分けやすくなります。
  34. 2:18二つ目は、記号は半角で書くことです。
  35. 2:21引用符や括弧を全角で書くと、コードとして読み取られません。
  36. 2:25三つ目は、保存形式です。
  37. 2:27文字コードはユーティーエフ エイトにそろえます。
  38. 2:31これが、後の文字化け対策になります。
  39. 2:34では、完成コードを眺めてみましょう。
  40. 2:37画面のコードは、記事の例を短く整理したものです。
  41. 2:41全体の流れは、上から順に、ドキュタイプ宣言、エイチティーエムエル、ヘッド、
  42. 2:45ボディ、という順番です。
  43. 2:49難しく見えますが、大きくは二つの箱に分かれているだけです。
  44. 2:53ヘッドにはページの設定を書きます。
  45. 2:56ボディには、実際に画面に表示する内容を書きます。
  46. 3:00この二つの箱を意識できれば、全体像はつかめています。
  47. 3:04次のスライドで、一行ずつ意味を確認しますので、今はコピーすることよりも、
  48. 3:09構造を眺めることを優先してください。
  49. 3:13ヘッドの中身を一行ずつ見ていきます。
  50. 3:16最初の、ドキュタイプ エイチティーエムエル、は、この文書を標準的なエイチティーエムエルとして扱ってください、
  51. 3:21という宣言です。
  52. 3:26次の、エイチティーエムエル ラング イコール ジェーエー、は、ページの主な言語が日本語であることを示します。
  53. 3:34メタ キャラセット イコール ユーティーエフ エイト、は、文字コードの指定で、
  54. 3:38日本語を正しく表示するために必要です。
  55. 3:43タイトルは、ブラウザーのタブなどに表示されるページ名です。
  56. 3:47本文の見出しとは別物だという点がポイントです。
  57. 3:51また、ビューポートという設定は、後でスマートフォンの表示幅を扱うときに必要になります。
  58. 3:58なお、メタのように、終了タグを持たないものを、空要素と呼びます。
  59. 4:03次は、ボディの中身です。
  60. 4:04ここに書いたものが、実際に画面に表示されます。
  61. 4:08エイチ ワンは、一番大きな見出しです。
  62. 4:11ピー は、段落を表します。
  63. 4:13エイチ ツーは、エイチ ワンの次に大きな見出しです。
  64. 4:17そして、オーエル と エルアイ の組み合わせです。
  65. 4:20オーエルは、順番のある、番号付きリスト。
  66. 4:23エルアイは、その一つ一つの項目です。
  67. 4:26記事の例では、学習の順番が三つ、番号付きで表示されます。
  68. 4:30見出し、段落、リストという、意味に合ったタグを選ぶことが、エイチティーエムエルの基本です。
  69. 4:37見た目の大きさだけでタグを選ばない、ということも覚えておきましょう。
  70. 4:42コードを保存したら、ブラウザーで確認しましょう。
  71. 4:46保存したインデックス ドット エイチティーエムエルを、ブラウザーへドラッグするか、
  72. 4:51ファイルを開く操作で選びます。
  73. 4:55アドレスが、ファイル コロン スラッシュ スラッシュ スラッシュ、から始まっていても、
  74. 5:00今回の例は問題なく動きます。
  75. 5:05画面に、まなびのアトリエ、と表示され、番号付きの学習の順番が出れば成功です。
  76. 5:11ここで、編集の基本サイクルを覚えてください。
  77. 5:15エディターで文章を変更する、必ず保存する、そのあとブラウザーを再読み込みする。
  78. 5:21この順番です。
  79. 5:22保存だけしていないと、すでに開いているページは自動では更新されません。
  80. 5:28表示が変わらないときは、まず保存を確認しましょう。
  81. 5:32ここで、エイチティーエムエルの文法の基本を確認します。
  82. 5:36ピー 文章 スラッシュ ピー、全体を、要素と呼びます。
  83. 5:41開始タグと終了タグの間に、内容を書く形です。
  84. 5:44終了タグは、スラッシュが目印です。
  85. 5:46タグの中にタグを入れることを、入れ子と言います。
  86. 5:50入れ子のルールは、内側で開いた要素を、先に閉じることです。
  87. 5:54行頭の字下げ、インデントは、どの要素の内側にあるかを見やすくするための目安です。
  88. 6:01もう一つ、本文に、ピー という文字そのものを表示したい場合は、そのまま書くとタグと区別できないため、
  89. 6:05特別な書き方をします。
  90. 6:10半角スペースを並べても、通常は余白にはなりません。
  91. 6:14余白や配置は、シーエスエスの担当として、後の回で扱います。
  92. 6:18うまく表示されないときは、あわてず、上から順に確認しましょう。
  93. 6:23まず、本当に保存したか。
  94. 6:24ブラウザーで、正しいファイルを開いているか。
  95. 6:28この二つが、意外と一番多い原因です。
  96. 6:30次に、コードがそのまま文字として表示される場合は、拡張子と、プレーンテキストで保存できているかを確認します。
  97. 6:38日本語が崩れて見える場合は、ファイルの保存文字コードと、キャラクターセットの指定を、
  98. 6:43どちらもユーティーエフ エイトにそろえてください。
  99. 6:48最後に注意点です。
  100. 6:49ブラウザーが表示を補ってくれることがあるため、表示できたからといって、タグの入れ子が正しいとは限りません。
  101. 6:57おかしいと感じたら、コードそのものを見直しましょう。
  102. 7:01なお、今回のエイチティーエムエルはブラウザーが読み取ります。
  103. 7:05ノード インデックス ドット エイチティーエムエルのような実行の仕方では表示できません。
  104. 7:12最後に、練習問題です。
  105. 7:14一つ目、エイチ ワンを、自分のサイト名に変えてください。
  106. 7:18二つ目、段落、ピーを一つ追加してください。
  107. 7:22三つ目、学習の順番に、四つ目のエルアイを追加してください。
  108. 7:27そして、タブのタイトルと、本文の見出しの両方を変更できたら、この回の目標は達成です。
  109. 7:33まとめます。
  110. 7:34今日は、エイチティーエムエル、シーエスエス、ジャバスクリプトの役割の違い、
  111. 7:42ヘッドとボディの違い、要素とタグの基本、そして、編集、保存、再読み込みという確認の流れを学びました。
  112. 7:49次回は、見出し、リンクと文書構造がテーマです。
  113. 7:53お疲れさまでした。
  114. 7:54実際に手を動かして、自分の最初の一ページを作ってみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

HTML・CSS・JavaScriptの役割を整理し、index.htmlを作ってブラウザーで表示。タグ、属性、headとbody、保存と再読み込み、文字化けの対策を学びます。

解説記事・サンプルコードを読む：HTML入門：最初のindex.htmlを作り、ブラウザーで表示する →