WEBVTT

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

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

3
00:00:04.544 --> 00:00:08.094
今回のテーマは、エイチティーエムエルタグ一覧です。

4
00:00:08.094 --> 00:00:12.354
現行のエイチティーエムエル要素は、全部で百十三種類あります。

5
00:00:12.354 --> 00:00:17.182
全部を覚えるのかと心配になるかもしれませんが、その必要はありません。

6
00:00:17.182 --> 00:00:20.164
大切なのは暗記ではなく、分類の考え方です。

7
00:00:20.164 --> 00:00:25.276
タグは役割のグループで捉えると、初めて見るタグでも当たりが付けられます。

8
00:00:25.276 --> 00:00:30.033
元になる記事は、エスイーの部屋のエイチティーエムエルタグ一覧で、現行標準を決める機関の要素索引をもとに、

9
00:00:30.033 --> 00:00:34.790
要素を用途別に整理しています。

10
00:00:34.790 --> 00:00:40.612
今回のゴールは、書きたい内容に合うタグを、一覧から自分で探せるようになることです。

11
00:00:40.612 --> 00:00:42.433
まず用語をそろえます。

12
00:00:42.433 --> 00:00:48.891
画面の例で、ピーの開始タグから終了タグまで、内容を含めた全体を要素と呼びます。

13
00:00:48.891 --> 00:00:53.196
開始タグの中に書くクラスなどの追加情報が、属性です。

14
00:00:53.196 --> 00:00:55.845
次に、空要素に注意してください。

15
00:00:55.845 --> 00:01:03.627
アイエムジーやビーアール、エイチアールなど十三種類は、中身を持たないため終了タグを付けません。

16
00:01:03.627 --> 00:01:07.684
そして、文書の先頭に書くドクタイプ宣言は要素ではなく、標準モードで表示してほしい、

17
00:01:07.684 --> 00:01:11.741
という合図です。

18
00:01:11.741 --> 00:01:17.039
この三つの区別がつくと、一覧の説明文がぐっと読みやすくなります。

19
00:01:17.039 --> 00:01:21.344
ちなみに、メモを残すコメントも、要素ではありません。

20
00:01:21.344 --> 00:01:23.869
分類の一つ目は、文書の土台と設定です。

21
00:01:23.869 --> 00:01:29.450
エイチティーエムエル、ヘッド、ボディーの三つは、文書全体と本文を入れる器になります。

22
00:01:29.450 --> 00:01:35.430
タイトル、メタ、リンク、スタイル、ベースは、画面には直接出ない、裏側の設定を担う仲間です。

23
00:01:35.430 --> 00:01:39.683
タイトルはブラウザーのタブに表示される文書名、メタは文字コードや画面幅の指定、

24
00:01:39.683 --> 00:01:43.935
リンクは外部シーエスエスの読み込みなどに使います。

25
00:01:43.935 --> 00:01:48.321
迷いやすいのがリンクで、これはファイルとの関係を宣言するものです。

26
00:01:48.321 --> 00:01:53.636
ページ同士を移動するリンクには、後ほど出てくる、エーのタグを使い分けてください。

27
00:01:53.636 --> 00:01:57.756
スタイルは、ページの中にシーエスエスを直接書くためのタグです。

28
00:01:57.756 --> 00:02:00.679
二つ目は、ページの構造と見出しです。

29
00:02:00.679 --> 00:02:07.013
ヘッダー、ナブ、メイン、フッターは、ページの大きな領域に意味を付けるタグです。

30
00:02:07.013 --> 00:02:11.804
アーティクルは単独で意味が通じる記事、セクションは見出しのある主題のまとまり、

31
00:02:11.804 --> 00:02:16.595
アサイドは本文を補う関連情報を表します。

32
00:02:16.595 --> 00:02:20.492
エイチワンからエイチシックスは見出しの階層です。

33
00:02:20.492 --> 00:02:26.339
文字を大きく見せたいからではなく、情報の階層に合わせて選ぶのが原則です。

34
00:02:26.339 --> 00:02:31.698
構造の分類を押さえると、ページの骨組みはほぼ作れるようになります。

35
00:02:31.698 --> 00:02:38.519
なお、検索フォームなどをまとめるサーチというタグも、この仲間に新しく加わっています。

36
00:02:38.519 --> 00:02:42.904
著者への連絡先を示すアドレスも、この仲間に含まれます。

37
00:02:42.904 --> 00:02:46.055
三つ目は、段落・リスト・引用・図です。

38
00:02:46.055 --> 00:02:53.021
ピーは段落、ディブは特別な意味を持たないまとまりで、合う要素がないときの受け皿です。

39
00:02:53.021 --> 00:03:00.816
リストには、順番に意味がないユーエル、順番に意味があるオーエル、その項目のエルアイがあります。

40
00:03:00.816 --> 00:03:06.620
用語と説明の組なら、ディーエル、ディーティー、ディーディーの三つです。

41
00:03:06.620 --> 00:03:12.176
他人の文章をまとめて引用するブロッククォート、改行や空白をそのまま残すプレ、

42
00:03:12.176 --> 00:03:17.732
説明文とセットで図を示すフィギュアも、この仲間に入ります。

43
00:03:17.732 --> 00:03:22.044
文章を書く作業のほとんどは、この分類でまかなえます。

44
00:03:22.044 --> 00:03:28.844
話題の転換を示すエイチアールや、操作項目のリストであるメニューも、ここに入ります。

45
00:03:28.844 --> 00:03:31.816
四つ目は、文字の意味とリンクです。

46
00:03:31.816 --> 00:03:35.837
エーはリンクを作る代表選手ですが、クリックで何かを実行するだけの操作なら、

47
00:03:35.837 --> 00:03:39.858
ボタンが適切です。

48
00:03:39.858 --> 00:03:44.753
見た目が似ていて意味が違う組み合わせにも注意しましょう。

49
00:03:44.753 --> 00:03:49.998
ストロングは重要であること、ビーは読者の注意を向けたいだけ。

50
00:03:49.998 --> 00:03:55.417
イーエムは意味に関わる強勢、アイは性質の異なる文字を表します。

51
00:03:55.417 --> 00:04:01.711
そのほか、コードを示すコード、キー入力のケービーディー、日時のタイム、注目箇所のマークなど、

52
00:04:01.711 --> 00:04:08.005
文の一部に正確な意味を持たせるタグがそろっています。

53
00:04:08.005 --> 00:04:13.949
文字を太くしたり傾けたりするだけなら、それはシーエスエスの仕事です。

54
00:04:13.949 --> 00:04:21.816
ルビを振るルビーや、略語を示すエービービーアールなど、日本語の文章で役立つタグもあります。

55
00:04:21.816 --> 00:04:24.289
五つ目は、画像・動画・埋め込みです。

56
00:04:24.289 --> 00:04:29.786
アイエムジーは画像の基本で、内容を伝えるオルトと、幅と高さの指定が欠かせません。

57
00:04:29.786 --> 00:04:36.245
ピクチャーとソースは、画面の条件や画像の形式に応じて、表示するファイルを切り替える仕組みです。

58
00:04:36.245 --> 00:04:41.466
ビデオとオーディオは再生用で、操作ボタンや字幕用トラックの用意も検討します。

59
00:04:41.466 --> 00:04:47.101
アイフレームは別の文書の埋め込み、キャンバスはジャバスクリプトで絵を描く領域です。

60
00:04:47.101 --> 00:04:51.773
メディアは表示できない場面も多いので、代替テキストや代替リンクなど、困ったときの手当てまで含めて、

61
00:04:51.773 --> 00:04:56.445
この分類の守備範囲だと覚えてください。

62
00:04:56.445 --> 00:05:01.804
画像の一部分をリンクにするマップとエリア、という応用的な組み合わせもあります。

63
00:05:01.804 --> 00:05:04.589
六つ目は、表とフォームです。

64
00:05:04.589 --> 00:05:11.054
表はテーブルを土台に、題名のキャプション、見出し行のティーヘッド、データ行のティーボディー、

65
00:05:11.054 --> 00:05:17.519
見出しセルとデータセルで組み立てます。

66
00:05:17.519 --> 00:05:24.282
ページの配置のためではなく、行と列の関係があるデータ専用の道具です。

67
00:05:24.282 --> 00:05:30.249
フォームは、フォーム、レーベル、インプットが基本セットです。

68
00:05:30.249 --> 00:05:34.626
入力欄には必ずレーベルを結び付けてください。

69
00:05:34.626 --> 00:05:44.373
セレクトで候補から選び、テキストエリアで複数行を書き、フィールドセットで関連する項目をまとめます。

70
00:05:44.373 --> 00:05:50.539
進み具合を示すプログレス、測定値を示すメーターもこの仲間です。

71
00:05:50.539 --> 00:05:58.496
入力候補を出すデータリストや、計算結果を示すアウトプットも、フォームの仲間です。

72
00:05:58.496 --> 00:06:01.141
七つ目は、開閉・スクリプト・部品です。

73
00:06:01.141 --> 00:06:07.265
ディテールズとサマリーは、ジャバスクリプトなしで開閉できる補足情報を作る組み合わせです。

74
00:06:07.265 --> 00:06:15.617
ダイアログは画面に重ねて出すダイアログ用で、開閉の操作に加えて、キーボードのフォーカスの行き先まで考える必要があります。

75
00:06:15.617 --> 00:06:21.464
スクリプトはジャバスクリプトの読み込み、ノースクリプトは無効な環境への代替表示です。

76
00:06:21.464 --> 00:06:27.031
テンプレートは普段は表示されないひな型、スロットは部品への差し込み口を表します。

77
00:06:27.031 --> 00:06:31.625
この分類は、ページに動きや再利用の仕組みを持たせるためのものです。

78
00:06:31.625 --> 00:06:38.028
比較的新しいタグも多い分類なので、使う前にブラウザーの対応状況を確認する習慣を付けましょう。

79
00:06:38.028 --> 00:06:41.630
ここまでの分類を、実例で確かめましょう。

80
00:06:41.630 --> 00:06:44.512
画面は、お知らせ記事の部品です。

81
00:06:44.512 --> 00:06:48.654
全体をアーティクルで囲むのは、構造の分類から。

82
00:06:48.654 --> 00:06:54.057
開催日には、機械が読み取れる値を持たせたタイムを使いました。

83
00:06:54.057 --> 00:07:01.441
図と説明文はフィギュアとフィグキャプションの組で、画像、動画、埋め込みの分類です。

84
00:07:01.441 --> 00:07:04.682
最後は、リンクのエーで締めています。

85
00:07:04.682 --> 00:07:11.166
実際のページ作りは、このように分類を横断してタグを組み合わせる作業です。

86
00:07:11.166 --> 00:07:15.939
一覧を見るときも、これはどの分類で、何の意味のタグか、を言えるようになれば、

87
00:07:15.939 --> 00:07:20.711
もう十分に使いこなせています。

88
00:07:20.711 --> 00:07:29.536
使ったタグは少しでも、一つひとつの意味がはっきりしているのが、良いエイチティーエムエルの証拠です。

89
00:07:29.536 --> 00:07:31.856
最後に、廃止タグと学び方です。

90
00:07:31.856 --> 00:07:36.959
センター、フォント、マーキーといった古いタグは、見た目をエイチティーエムエルで指定していた時代の名残で、

91
00:07:36.959 --> 00:07:42.062
新しいページでは使いません。

92
00:07:42.062 --> 00:07:48.867
中央寄せはシーエスエスのテキストアライン、文字の大きさはフォントサイズへと置き換えます。

93
00:07:48.867 --> 00:07:58.300
また、エスブイジーや数式のマスエムエル、独自に定義するカスタム要素は、別の仕組みなので一覧の百十三には数えられていません。

94
00:07:58.300 --> 00:08:01.393
学び方のコツは、全部を追わないことです。

95
00:08:01.393 --> 00:08:07.424
まずは基本の顔ぶれでページを作り、目的が増えたときに一覧へ戻り、分類から探す。

96
00:08:07.424 --> 00:08:10.981
この行き来こそが、タグ一覧の正しい使い方です。

97
00:08:10.981 --> 00:08:18.404
分からないタグに出会ったら、まず分類から当たりを付けて、それから詳しい説明を読みにいきましょう。