WEBVTT

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

2
00:00:00.747 --> 00:00:04.983
この動画では、初めてのエイチティーエムエルを作って、ブラウザーで表示する方法を、

3
00:00:04.983 --> 00:00:09.219
初心者の方にも分かるように、ゆっくり、詳しく解説します。

4
00:00:09.219 --> 00:00:13.703
元になる記事は、エスイーの部屋の、エイチティーエムエル入門、最初のインデックス ドット エイチティーエムエルを作り、

5
00:00:13.703 --> 00:00:18.188
ブラウザーで表示する、です。

6
00:00:18.188 --> 00:00:20.430
この動画のゴールは、たった一つです。

7
00:00:20.430 --> 00:00:23.669
自分で書いた文章を、ブラウザーの画面に表示すること。

8
00:00:23.669 --> 00:00:26.410
特別なソフトのインストールは必要ありません。

9
00:00:26.410 --> 00:00:30.272
テキストエディターとブラウザーがあれば、今日から始められます。

10
00:00:30.272 --> 00:00:35.030
最初に、ウェブページを作る三つの言語の役割を整理しましょう。

11
00:00:35.030 --> 00:00:41.533
エイチティーエムエルは、見出し、段落、リンクなど、情報の意味と構造を書くものです。

12
00:00:41.533 --> 00:00:46.291
シーエスエスは、色、余白、配置など、見た目を整えるものです。

13
00:00:46.291 --> 00:00:51.049
ジャバスクリプトは、クリックや入力に応じた動きを担当します。

14
00:00:51.049 --> 00:00:55.490
ここで大切なのは、最初から三つを同時に書かないことです。

15
00:00:55.490 --> 00:00:59.773
今日は、エイチティーエムエルだけでページを表示します。

16
00:00:59.773 --> 00:01:05.007
何を変えたら、何が変わるのかを、一つずつ確認しながら進めましょう。

17
00:01:05.007 --> 00:01:09.210
最終的には、スマートフォン対応やメニュー、フォームを備えたサイトを目指す連載の、

18
00:01:09.210 --> 00:01:13.413
第一回という位置づけです。

19
00:01:13.413 --> 00:01:15.554
用意するものは二つだけです。

20
00:01:15.554 --> 00:01:19.071
一つ目は、文字を書くためのテキストエディター。

21
00:01:19.071 --> 00:01:21.518
普段使っているもので構いません。

22
00:01:21.518 --> 00:01:30.387
ただし、ワープロのような形式ではなく、ユーティーエフ エイトのプレーンテキストとして保存できるものを使ってください。

23
00:01:30.387 --> 00:01:33.445
二つ目は、表示を確認するブラウザーです。

24
00:01:33.445 --> 00:01:36.504
次に、作業用のフォルダーを一つ作ります。

25
00:01:36.504 --> 00:01:39.256
名前は、アトリエ サイト、とします。

26
00:01:39.256 --> 00:01:46.902
そのフォルダーの中に、インデックス ドット エイチティーエムエル、というファイルを作って保存します。

27
00:01:46.902 --> 00:01:51.337
場所と名前をそろえておくと、後で迷子になりにくくなります。

28
00:01:51.337 --> 00:01:56.577
始める前に、初心者の方が特につまずきやすい注意点を三つお伝えします。

29
00:01:56.577 --> 00:01:58.273
一つ目は、拡張子です。

30
00:01:58.273 --> 00:02:03.051
ファイル名が、インデックス ドット エイチティーエムエル ドット ティーエックスティー、

31
00:02:03.051 --> 00:02:07.829
のようになってしまうことがあります。

32
00:02:07.829 --> 00:02:12.299
これでは、ブラウザーは文章ファイルとして扱ってしまいます。

33
00:02:12.299 --> 00:02:18.618
オペレーティングシステムで拡張子を表示する設定にしておくと、見分けやすくなります。

34
00:02:18.618 --> 00:02:21.392
二つ目は、記号は半角で書くことです。

35
00:02:21.392 --> 00:02:25.862
引用符や括弧を全角で書くと、コードとして読み取られません。

36
00:02:25.862 --> 00:02:27.712
三つ目は、保存形式です。

37
00:02:27.712 --> 00:02:31.411
文字コードはユーティーエフ エイトにそろえます。

38
00:02:31.411 --> 00:02:34.185
これが、後の文字化け対策になります。

39
00:02:34.185 --> 00:02:37.132
では、完成コードを眺めてみましょう。

40
00:02:37.132 --> 00:02:41.062
画面のコードは、記事の例を短く整理したものです。

41
00:02:41.062 --> 00:02:45.073
全体の流れは、上から順に、ドキュタイプ宣言、エイチティーエムエル、ヘッド、

42
00:02:45.073 --> 00:02:49.085
ボディ、という順番です。

43
00:02:49.085 --> 00:02:53.833
難しく見えますが、大きくは二つの箱に分かれているだけです。

44
00:02:53.833 --> 00:02:56.617
ヘッドにはページの設定を書きます。

45
00:02:56.617 --> 00:03:00.546
ボディには、実際に画面に表示する内容を書きます。

46
00:03:00.546 --> 00:03:04.803
この二つの箱を意識できれば、全体像はつかめています。

47
00:03:04.803 --> 00:03:09.224
次のスライドで、一行ずつ意味を確認しますので、今はコピーすることよりも、

48
00:03:09.224 --> 00:03:13.645
構造を眺めることを優先してください。

49
00:03:13.645 --> 00:03:16.431
ヘッドの中身を一行ずつ見ていきます。

50
00:03:16.431 --> 00:03:21.230
最初の、ドキュタイプ エイチティーエムエル、は、この文書を標準的なエイチティーエムエルとして扱ってください、

51
00:03:21.230 --> 00:03:26.029
という宣言です。

52
00:03:26.029 --> 00:03:34.388
次の、エイチティーエムエル ラング イコール ジェーエー、は、ページの主な言語が日本語であることを示します。

53
00:03:34.388 --> 00:03:38.877
メタ キャラセット イコール ユーティーエフ エイト、は、文字コードの指定で、

54
00:03:38.877 --> 00:03:43.366
日本語を正しく表示するために必要です。

55
00:03:43.366 --> 00:03:47.855
タイトルは、ブラウザーのタブなどに表示されるページ名です。

56
00:03:47.855 --> 00:03:51.415
本文の見出しとは別物だという点がポイントです。

57
00:03:51.415 --> 00:03:58.072
また、ビューポートという設定は、後でスマートフォンの表示幅を扱うときに必要になります。

58
00:03:58.072 --> 00:04:03.025
なお、メタのように、終了タグを持たないものを、空要素と呼びます。

59
00:04:03.025 --> 00:04:04.829
次は、ボディの中身です。

60
00:04:04.829 --> 00:04:08.286
ここに書いたものが、実際に画面に表示されます。

61
00:04:08.286 --> 00:04:11.142
エイチ ワンは、一番大きな見出しです。

62
00:04:11.142 --> 00:04:13.096
ピー は、段落を表します。

63
00:04:13.096 --> 00:04:17.004
エイチ ツーは、エイチ ワンの次に大きな見出しです。

64
00:04:17.004 --> 00:04:20.762
そして、オーエル と エルアイ の組み合わせです。

65
00:04:20.762 --> 00:04:23.768
オーエルは、順番のある、番号付きリスト。

66
00:04:23.768 --> 00:04:26.474
エルアイは、その一つ一つの項目です。

67
00:04:26.474 --> 00:04:30.682
記事の例では、学習の順番が三つ、番号付きで表示されます。

68
00:04:30.682 --> 00:04:37.446
見出し、段落、リストという、意味に合ったタグを選ぶことが、エイチティーエムエルの基本です。

69
00:04:37.446 --> 00:04:42.557
見た目の大きさだけでタグを選ばない、ということも覚えておきましょう。

70
00:04:42.557 --> 00:04:46.539
コードを保存したら、ブラウザーで確認しましょう。

71
00:04:46.539 --> 00:04:51.184
保存したインデックス ドット エイチティーエムエルを、ブラウザーへドラッグするか、

72
00:04:51.184 --> 00:04:55.830
ファイルを開く操作で選びます。

73
00:04:55.830 --> 00:05:00.558
アドレスが、ファイル コロン スラッシュ スラッシュ スラッシュ、から始まっていても、

74
00:05:00.558 --> 00:05:05.287
今回の例は問題なく動きます。

75
00:05:05.287 --> 00:05:11.591
画面に、まなびのアトリエ、と表示され、番号付きの学習の順番が出れば成功です。

76
00:05:11.591 --> 00:05:15.241
ここで、編集の基本サイクルを覚えてください。

77
00:05:15.241 --> 00:05:21.712
エディターで文章を変更する、必ず保存する、そのあとブラウザーを再読み込みする。

78
00:05:21.712 --> 00:05:22.873
この順番です。

79
00:05:22.873 --> 00:05:28.680
保存だけしていないと、すでに開いているページは自動では更新されません。

80
00:05:28.680 --> 00:05:32.828
表示が変わらないときは、まず保存を確認しましょう。

81
00:05:32.828 --> 00:05:36.921
ここで、エイチティーエムエルの文法の基本を確認します。

82
00:05:36.921 --> 00:05:41.013
ピー 文章 スラッシュ ピー、全体を、要素と呼びます。

83
00:05:41.013 --> 00:05:44.348
開始タグと終了タグの間に、内容を書く形です。

84
00:05:44.348 --> 00:05:46.924
終了タグは、スラッシュが目印です。

85
00:05:46.924 --> 00:05:50.562
タグの中にタグを入れることを、入れ子と言います。

86
00:05:50.562 --> 00:05:54.958
入れ子のルールは、内側で開いた要素を、先に閉じることです。

87
00:05:54.958 --> 00:06:01.021
行頭の字下げ、インデントは、どの要素の内側にあるかを見やすくするための目安です。

88
00:06:01.021 --> 00:06:05.644
もう一つ、本文に、ピー という文字そのものを表示したい場合は、そのまま書くとタグと区別できないため、

89
00:06:05.644 --> 00:06:10.267
特別な書き方をします。

90
00:06:10.267 --> 00:06:14.056
半角スペースを並べても、通常は余白にはなりません。

91
00:06:14.056 --> 00:06:18.452
余白や配置は、シーエスエスの担当として、後の回で扱います。

92
00:06:18.452 --> 00:06:23.008
うまく表示されないときは、あわてず、上から順に確認しましょう。

93
00:06:23.008 --> 00:06:24.771
まず、本当に保存したか。

94
00:06:24.771 --> 00:06:28.004
ブラウザーで、正しいファイルを開いているか。

95
00:06:28.004 --> 00:06:30.650
この二つが、意外と一番多い原因です。

96
00:06:30.650 --> 00:06:38.586
次に、コードがそのまま文字として表示される場合は、拡張子と、プレーンテキストで保存できているかを確認します。

97
00:06:38.586 --> 00:06:43.509
日本語が崩れて見える場合は、ファイルの保存文字コードと、キャラクターセットの指定を、

98
00:06:43.509 --> 00:06:48.432
どちらもユーティーエフ エイトにそろえてください。

99
00:06:48.432 --> 00:06:49.755
最後に注意点です。

100
00:06:49.755 --> 00:06:57.544
ブラウザーが表示を補ってくれることがあるため、表示できたからといって、タグの入れ子が正しいとは限りません。

101
00:06:57.544 --> 00:07:01.365
おかしいと感じたら、コードそのものを見直しましょう。

102
00:07:01.365 --> 00:07:05.774
なお、今回のエイチティーエムエルはブラウザーが読み取ります。

103
00:07:05.774 --> 00:07:12.240
ノード インデックス ドット エイチティーエムエルのような実行の仕方では表示できません。

104
00:07:12.240 --> 00:07:14.067
最後に、練習問題です。

105
00:07:14.067 --> 00:07:18.717
一つ目、エイチ ワンを、自分のサイト名に変えてください。

106
00:07:18.717 --> 00:07:22.205
二つ目、段落、ピーを一つ追加してください。

107
00:07:22.205 --> 00:07:27.022
三つ目、学習の順番に、四つ目のエルアイを追加してください。

108
00:07:27.022 --> 00:07:33.998
そして、タブのタイトルと、本文の見出しの両方を変更できたら、この回の目標は達成です。

109
00:07:33.998 --> 00:07:34.994
まとめます。

110
00:07:34.994 --> 00:07:42.219
今日は、エイチティーエムエル、シーエスエス、ジャバスクリプトの役割の違い、

111
00:07:42.219 --> 00:07:49.444
ヘッドとボディの違い、要素とタグの基本、そして、編集、保存、再読み込みという確認の流れを学びました。

112
00:07:49.444 --> 00:07:53.264
次回は、見出し、リンクと文書構造がテーマです。

113
00:07:53.264 --> 00:07:54.759
お疲れさまでした。

114
00:07:54.759 --> 00:07:59.908
実際に手を動かして、自分の最初の一ページを作ってみてください。