WEBVTT

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

2
00:00:00.755 --> 00:00:03.524
エイチティーエムエル、リファレンス解説です。

3
00:00:03.524 --> 00:00:07.426
エイチティーエムエルタグ編の八十一本目は、エンベッドタグです。

4
00:00:07.426 --> 00:00:11.705
エンベッドは、外部のコンテンツをページの中に埋め込むための要素です。

5
00:00:11.705 --> 00:00:18.879
たとえば、ピーディーエフの資料を、リンク先へ移動させずに、その場で読めるように表示する場面を思い浮かべてください。

6
00:00:18.879 --> 00:00:23.158
ただし、表示できるかどうかは、ブラウザーや端末の対応に左右されます。

7
00:00:23.158 --> 00:00:29.829
今回は、基本の書き方から、属性、アイフレームやオブジェクトとの違い、注意点まで順番に確認していきましょう。

8
00:00:29.829 --> 00:00:34.108
手軽さと注意点の両方を知ることが、正しく使い分ける第一歩になります。

9
00:00:34.108 --> 00:00:36.180
基本の書き方を確認します。

10
00:00:36.180 --> 00:00:38.092
エンベッドは空要素です。

11
00:00:38.092 --> 00:00:42.554
開始タグだけで書き、終了タグも、内側の本文も書きません。

12
00:00:42.554 --> 00:00:49.247
画面の例では、ガイドという名前のピーディーエフを指定し、種類と大きさを添えています。

13
00:00:49.247 --> 00:00:53.390
置き場所は、ボディの中で、資料を表示したい位置です。

14
00:00:53.390 --> 00:01:01.517
ここで大切なのは、空要素のため、表示できない人向けの代替本文を、タグの内側に書くことができない点です。

15
00:01:01.517 --> 00:01:05.660
代替の案内は、タグの外に別に用意する必要があります。

16
00:01:05.660 --> 00:01:10.919
この制約が、エンベッドを選ぶときに最初に押さえるべきポイントです。

17
00:01:10.919 --> 00:01:16.496
この形を覚えておくと、設定ミスによる表示トラブルを早い段階で防げます。

18
00:01:16.496 --> 00:01:17.619
属性を確認します。

19
00:01:17.619 --> 00:01:18.867
一つ目はソースです。

20
00:01:18.867 --> 00:01:21.737
読み込むリソースのユーアールエルを指定します。

21
00:01:21.737 --> 00:01:28.100
存在するファイルへの正しいパスを書くことが大前提で、パスの間違いは、そのまま表示の失敗につながります。

22
00:01:28.100 --> 00:01:29.348
二つ目はタイプです。

23
00:01:29.348 --> 00:01:33.091
こちらは、埋め込む内容の種類を表すマイムタイプを指定します。

24
00:01:33.091 --> 00:01:37.833
ピーディーエフなら、アプリケーション、スラッシュ、ピーディーエフと書きます。

25
00:01:37.833 --> 00:01:41.888
タイプは必須ではありませんが、ブラウザーが内容を判断する手がかりになるため、

26
00:01:41.888 --> 00:01:45.944
実際のファイルの種類と一致させて書くようにしましょう。

27
00:01:45.944 --> 00:01:50.186
指定する前に、ファイル名と拡張子を一覧で確認する習慣を付けましょう。

28
00:01:50.186 --> 00:01:54.000
続いて、幅と高さを表す、ウィドゥスとハイトです。

29
00:01:54.000 --> 00:02:00.514
エンベッドで埋め込んだ内容が、ページのどれくらいの大きさで表示されるかを決めます。

30
00:02:00.514 --> 00:02:04.963
画面の例では、幅六百四十、高さ四百八十を指定しています。

31
00:02:04.963 --> 00:02:07.982
数値は単位を付けずに書くのが基本です。

32
00:02:07.982 --> 00:02:14.974
幅と高さの比率が資料の形と合っていないと、余白が目立ったり、内容が窮屈になったりします。

33
00:02:14.974 --> 00:02:22.760
また、寸法をあらかじめ伝えておくと、読み込みの前後でページのレイアウトが大きく動きにくくなります。

34
00:02:22.760 --> 00:02:28.639
細かな見た目の調整は、このあと触れるシーエスエスと合わせて考えてください。

35
00:02:28.639 --> 00:02:34.518
実際の資料で試し、読みやすさを確認してから寸法を確定するのがおすすめです。

36
00:02:34.518 --> 00:02:36.654
記事の活用事例を読み解きます。

37
00:02:36.654 --> 00:02:44.629
例では、エンベッドでピーディーエフをページに埋め込み、その直後に、同じファイルを開くリンクを段落で置いています。

38
00:02:44.629 --> 00:02:46.908
この組み合わせがとても重要です。

39
00:02:46.908 --> 00:02:54.171
ピーディーエフの表示は環境に依存し、スマートフォンなどでは埋め込みがうまく表示できないこともあります。

40
00:02:54.171 --> 00:03:00.722
その場合でも、リンクがあれば、読者はファイルを開いたり、保存したりして内容にたどり着けます。

41
00:03:00.722 --> 00:03:05.351
試すときは、練習用ファイルのボディにこの形を写し、自分の用意したピーディーエフのパスに置き換えて、

42
00:03:05.351 --> 00:03:09.979
再読み込みして確認してください。

43
00:03:09.979 --> 00:03:15.106
埋め込みとリンクの両方があることで、読者の環境を選ばない案内になります。

44
00:03:15.106 --> 00:03:17.883
共通属性も確認しておきましょう。

45
00:03:17.883 --> 00:03:23.959
エンベッドでも、アイディー、クラス、ラングといった共通属性が使えます。

46
00:03:23.959 --> 00:03:30.208
アイディーは文書内で一意な識別子で、スクリプトからの参照などに使います。

47
00:03:30.208 --> 00:03:35.763
クラスは、シーエスエスやスクリプトでまとめて選ぶための名前です。

48
00:03:35.763 --> 00:03:43.054
データ属性は、アプリ独自の値を保持する場所ですが、秘密情報を置く場所ではありません。

49
00:03:43.054 --> 00:03:48.435
また、属性は、その要素で定義されているものを使うのが原則です。

50
00:03:48.435 --> 00:03:55.031
ほかの要素で見た同名の属性を、意味が違うのに持ち込まないよう注意しましょう。

51
00:03:55.031 --> 00:03:59.197
見た目の指定だけでは、要素の意味は変わりません。

52
00:03:59.197 --> 00:04:06.141
共通属性は控えめに使い、必要なものだけを付ける方針が管理しやすさにつながります。

53
00:04:06.141 --> 00:04:08.389
似た要素との違いを整理します。

54
00:04:08.389 --> 00:04:13.634
アイフレームは、別のエイチティーエムエル文書を枠の中に埋め込むための要素で、

55
00:04:13.634 --> 00:04:18.879
タイトルで内容を説明し、必要に応じて権限を絞る使い方が中心です。

56
00:04:18.879 --> 00:04:27.422
オブジェクトは、外部リソースを埋め込む点はエンベッドに似ていますが、内側に代替の内容を置けることが大きな違いです。

57
00:04:27.422 --> 00:04:31.618
一方、エンベッドは空要素のため、その仕組みがありません。

58
00:04:31.618 --> 00:04:38.661
書き方は最もシンプルですが、表示できない場合の備えは、自分の手で外側に用意する必要があります。

59
00:04:38.661 --> 00:04:41.958
目的と、代替の出し方で選ぶのがポイントです。

60
00:04:41.958 --> 00:04:47.953
迷ったときは、表示できない場合にどう案内できるかで判断すると選びやすくなります。

61
00:04:47.953 --> 00:04:50.885
専用のタグとの使い分けも大切です。

62
00:04:50.885 --> 00:05:00.026
画像ならイメージ、動画ならビデオ、音声ならオーディオというように、内容ごとに専用の要素が用意されています。

63
00:05:00.026 --> 00:05:08.477
専用のタグには、代替テキストや、再生ボタン、字幕といった、その内容に合わせた仕組みが整っています。

64
00:05:08.477 --> 00:05:18.653
エンベッドは、そうした専用タグでは対応しにくい、汎用的な外部コンテンツを埋め込む場面で検討する要素だと考えてください。

65
00:05:18.653 --> 00:05:24.431
何でもエンベッドで済ませるのではなく、まず専用タグで書けないかを確かめる順番が、

66
00:05:24.431 --> 00:05:30.208
読み手にも作り手にも分かりやすいページにつながります。

67
00:05:30.208 --> 00:05:36.245
タグの選択は見た目ではなく、内容の種類から決めることが大切な原則です。

68
00:05:36.245 --> 00:05:38.856
サイズと見た目の調整を確認します。

69
00:05:38.856 --> 00:05:45.768
エンベッドの表示の大きさは、属性のウィドゥスとハイトのほか、シーエスエスでも調整できます。

70
00:05:45.768 --> 00:05:52.219
画面の例では、幅を親に合わせつつ、最大幅を六百四十ピクセルに抑える指定をしています。

71
00:05:52.219 --> 00:05:59.438
固定の幅だけを指定すると、スマートフォンのような狭い画面では、はみ出してしまうことがあります。

72
00:05:59.438 --> 00:06:08.193
公開前には、三百二十ピクセル程度の画面幅や、文字を拡大した状態でも、内容や操作部分が欠けないかを確認してください。

73
00:06:08.193 --> 00:06:14.030
埋め込んだ資料そのものが読めるかどうかも、実機で合わせて試すことが大切です。

74
00:06:14.030 --> 00:06:19.713
パソコンだけでなくスマートフォンでも、必ず表示を確認するようにしましょう。

75
00:06:19.713 --> 00:06:21.909
ブラウザー互換性を確認します。

76
00:06:21.909 --> 00:06:28.791
記事が参照するエムディーエヌのデータでは、エンベッド要素は、クロームが一以降、

77
00:06:28.791 --> 00:06:35.673
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで古くから対応しています。

78
00:06:35.673 --> 00:06:41.238
属性のソース、タイプ、ウィドゥス、ハイトも、ほぼ同じ時期から対応しています。

79
00:06:41.238 --> 00:06:48.998
ただし注意したいのは、要素自体が使えることと、埋め込んだ中身がその環境で表示できることは別だという点です。

80
00:06:48.998 --> 00:06:52.952
特にピーディーエフの表示は環境依存が大きいため、互換性の表だけで安心せず、

81
00:06:52.952 --> 00:06:56.905
対象の端末で実際に試してください。

82
00:06:56.905 --> 00:07:02.762
モバイル版のブラウザーでは条件が異なる場合もあるため、合わせて確認してください。

83
00:07:02.762 --> 00:07:05.217
最後に、よくある間違いとまとめです。

84
00:07:05.217 --> 00:07:08.899
一つ目は、空要素なのに終了タグを書いてしまうことです。

85
00:07:08.899 --> 00:07:11.218
エンベッドに終了タグは要りません。

86
00:07:11.218 --> 00:07:14.218
二つ目は、代替のリンクを用意しないことです。

87
00:07:14.218 --> 00:07:17.491
埋め込みだけを唯一の閲覧経路にしないでください。

88
00:07:17.491 --> 00:07:20.901
三つ目は、ソースのパスやタイプを間違えることです。

89
00:07:20.901 --> 00:07:24.447
ファイルの場所と種類は、公開前に必ず確かめましょう。

90
00:07:24.447 --> 00:07:30.720
エンベッドは、外部コンテンツを手軽に埋め込める一方で、表示の成否は環境に委ねられる要素です。

91
00:07:30.720 --> 00:07:36.039
代替の道筋までセットで用意することが、使いこなしのコツだと覚えておきましょう。

92
00:07:36.039 --> 00:07:41.086
ぜひ手元の練習ページで、埋め込みと代替リンクをセットで試してみてください。

93
00:07:41.086 --> 00:07:42.313
お疲れさまでした。