WEBVTT

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

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

3
00:00:03.953 --> 00:00:08.052
エイチティーエムエルタグ編の百五本目は、ベースタグです。

4
00:00:08.052 --> 00:00:13.323
ベースは、文書の中にある相対ユーアールエルの基準を変えるための要素です。

5
00:00:13.323 --> 00:00:17.276
普段は今のページの場所を基準にリンク先や画像を探しますが、ベースタグを置くと、

6
00:00:17.276 --> 00:00:21.229
その基準を別の場所へ移せます。

7
00:00:21.229 --> 00:00:24.742
さらに、リンクを同じタブで開くか、新しいタブで開くかという既定の開き方も、

8
00:00:24.742 --> 00:00:28.256
まとめて指定できます。

9
00:00:28.256 --> 00:00:32.648
画面には何も表示されない、地味ですが影響範囲の広い要素です。

10
00:00:32.648 --> 00:00:38.358
今回は、基準ユーアールエルの考え方、エイチレフ属性とターゲット属性、ヘッド内への配置、

11
00:00:38.358 --> 00:00:44.068
コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。

12
00:00:44.068 --> 00:00:47.525
まず、相対ユーアールエルの仕組みを押さえましょう。

13
00:00:47.525 --> 00:00:56.099
ユーアールエルには、ドメインから全部を書く絶対ユーアールエルと、今いる場所からの道順だけを書く相対ユーアールエルがあります。

14
00:00:56.099 --> 00:01:03.013
たとえば、スタートとだけ書いたリンクは、短くて便利ですが、これだけでは最終的な行き先は決まりません。

15
00:01:03.013 --> 00:01:09.097
今のページがどのフォルダーにあるかという基準と組み合わせて、初めて完全な住所になります。

16
00:01:09.097 --> 00:01:10.480
ここがポイントです。

17
00:01:10.480 --> 00:01:16.288
基準を変えれば、本文のリンクを一文字も書き換えなくても、行き先がまとめて変わります。

18
00:01:16.288 --> 00:01:20.022
サイトを別のフォルダーへ移したときや、プレビュー環境で本番の場所を基準にしたいとき、

19
00:01:20.022 --> 00:01:23.756
この仕組みが役立ちます。

20
00:01:23.756 --> 00:01:29.840
逆に言えば、基準を間違えると、全部のリンクがまとめてずれてしまうということでもあります。

21
00:01:29.840 --> 00:01:32.942
ベースタグの役割は、大きく二つあります。

22
00:01:32.942 --> 00:01:38.371
一つ目は、エイチレフ属性で相対ユーアールエルの基準を指定することです。

23
00:01:38.371 --> 00:01:44.498
エー要素のリンクだけでなく、画像のエスアールシー、外部シーエスエスの読み込み、

24
00:01:44.498 --> 00:01:50.625
フォームの送信先など、ユーアールエルを使う要素の多くがこの基準の影響を受けます。

25
00:01:50.625 --> 00:01:57.916
二つ目は、ターゲット属性で、リンク先や送信結果をどこに表示するかという既定値を決めることです。

26
00:01:57.916 --> 00:02:02.724
個別のリンクで指定がなければ、ベースのターゲットが使われます。

27
00:02:02.724 --> 00:02:06.912
記事でも、相対ユーアールエルの基準を変える要素であり、画像やページ内リンクにも影響する、

28
00:02:06.912 --> 00:02:11.100
と説明されています。

29
00:02:11.100 --> 00:02:17.460
一か所の指定が文書全体へ効く、という広い影響範囲を、まず頭に入れておいてください。

30
00:02:17.460 --> 00:02:20.013
基本の書き方と配置を確認します。

31
00:02:20.013 --> 00:02:21.608
ベースは空要素です。

32
00:02:21.608 --> 00:02:24.320
終了タグや内側の本文は書きません。

33
00:02:24.320 --> 00:02:26.713
置き場所はヘッドの中だけです。

34
00:02:26.713 --> 00:02:29.745
ボディの中に置いても意味を持ちません。

35
00:02:29.745 --> 00:02:35.329
そして最も大切な条件が、ユーアールエルを持つ要素より前に置くことです。

36
00:02:35.329 --> 00:02:40.753
ベースより前に書かれたリンクや画像には、新しい基準が間に合いません。

37
00:02:40.753 --> 00:02:44.104
あとから書かれたものにだけ基準が効きます。

38
00:02:44.104 --> 00:02:51.443
また、ベースを複数書いても有効になるのは基本的に最初のものだけで、二つ目以降は無視されます。

39
00:02:51.443 --> 00:02:56.707
だからこそ、ヘッドのなるべく早い位置に、一つだけ置くのが原則です。

40
00:02:56.707 --> 00:03:01.653
タイトルやメタ情報と並ぶ、文書設定の一つとして扱ってください。

41
00:03:01.653 --> 00:03:06.280
スライドの例でも、ベースをリンク要素より前に置いています。

42
00:03:06.280 --> 00:03:08.391
エイチレフ属性を詳しく見ます。

43
00:03:08.391 --> 00:03:15.992
ここに書いたユーアールエルが、文書内のすべての相対ユーアールエルを完全な住所へ変換するときの土台になります。

44
00:03:15.992 --> 00:03:17.681
書き方のコツは二つです。

45
00:03:17.681 --> 00:03:20.497
一つ目は、絶対ユーアールエルで書くこと。

46
00:03:20.497 --> 00:03:24.579
基準自体を相対的に書くと、今度はその基準を何で解釈するのかという話になり、

47
00:03:24.579 --> 00:03:28.661
読み手もブラウザーも混乱しやすくなります。

48
00:03:28.661 --> 00:03:34.010
二つ目は、フォルダーを基準にするなら、末尾をスラッシュで終わらせることです。

49
00:03:34.010 --> 00:03:38.655
たとえばガイドというフォルダーの最後にスラッシュがある場合、その後ろにスタートと続ければ、

50
00:03:38.655 --> 00:03:43.300
ガイドの中のスタートという住所になります。

51
00:03:43.300 --> 00:03:49.634
スラッシュがないと、ガイドがファイル名のように扱われ、意図と違う住所になることがあります。

52
00:03:49.634 --> 00:03:53.012
最後の一文字までが意味を持つ、と覚えてください。

53
00:03:53.012 --> 00:03:55.002
次にターゲット属性です。

54
00:03:55.002 --> 00:04:02.632
これは、リンク先やフォームの送信結果を、どの閲覧コンテキストに表示するかの既定値を決めます。

55
00:04:02.632 --> 00:04:08.852
代表的な値は、今のタブで開くセルフ、新しいタブやウィンドウで開くブランク、

56
00:04:08.852 --> 00:04:15.072
そしてフレームを使っている場合の親へ開くペアレント、最上位へ開くトップです。

57
00:04:15.072 --> 00:04:19.799
たとえば外部サイトへのリンクが多いページで、ベースにブランクを指定しておけば、

58
00:04:19.799 --> 00:04:24.526
リンクごとに毎回書く手間が省けます。

59
00:04:24.526 --> 00:04:27.346
ただし優先順位に注意してください。

60
00:04:27.346 --> 00:04:32.322
個別のエー要素やフォーム要素にターゲットが書かれていれば、そちらが優先され、

61
00:04:32.322 --> 00:04:37.298
ベースはあくまで指定がない場合の既定値です。

62
00:04:37.298 --> 00:04:46.752
なお、ブランクで新しいタブを開く運用では、リンク先の扱いなど安全面の指定を個別に検討することも忘れないでください。

63
00:04:46.752 --> 00:04:50.042
記事の活用事例をもとに、コード例を確認します。

64
00:04:50.042 --> 00:04:55.049
ヘッドに、ガイドというフォルダーを基準とするベースタグを置いています。

65
00:04:55.049 --> 00:05:02.202
するとボディでは、スタートとだけ書いたリンクが、ガイドフォルダーの中のスタートを指すようになります。

66
00:05:02.202 --> 00:05:03.346
画像も同じです。

67
00:05:03.346 --> 00:05:08.353
イメージズの中の画像という相対指定が、基準の後ろに続けて解釈されます。

68
00:05:08.353 --> 00:05:14.218
本文側の書き方は短い相対ユーアールエルのままで、行き先だけを一か所でそろえられる。

69
00:05:14.218 --> 00:05:16.078
これがベースの便利さです。

70
00:05:16.078 --> 00:05:21.156
練習では、エイチティーエムエル入門で作ったファイルをコピーし、ヘッドにベースを置いてから、

71
00:05:21.156 --> 00:05:26.234
開発者ツールで実際のリンク先を確認してみてください。

72
00:05:26.234 --> 00:05:33.244
例に出てくるエグザンプルドットコムは説明用のドメインなので、自分の環境の住所へ置き換えて試します。

73
00:05:33.244 --> 00:05:36.524
意外な落とし穴が、ページ内リンクです。

74
00:05:36.524 --> 00:05:44.291
シャープで始まるリンクは、今のページの中を移動するためのもの、という感覚が強いと思います。

75
00:05:44.291 --> 00:05:51.714
しかし仕様上、このリンクも相対ユーアールエルの一種として、ベースの基準で解決されます。

76
00:05:51.714 --> 00:05:57.496
つまり、基準が別のページや別のドメインを指していると、ページ内移動のつもりが、

77
00:05:57.496 --> 00:06:03.279
その基準ページの該当箇所へ飛んでしまうことがあるのです。

78
00:06:03.279 --> 00:06:09.061
記事でも、シャープで始まるリンクも基準ユーアールエルの影響を受けるので、

79
00:06:09.061 --> 00:06:14.844
ページ内移動が意図通りか確認してください、と注意されています。

80
00:06:14.844 --> 00:06:23.992
ベースを導入したら、目次リンクやトップへ戻るリンクなど、シャープだけのリンクを実際にクリックして確かめる。

81
00:06:23.992 --> 00:06:27.272
この一手間が、静かな不具合を防ぎます。

82
00:06:27.272 --> 00:06:30.513
では、どんな場面で導入を検討すべきでしょうか。

83
00:06:30.513 --> 00:06:33.472
一つは、サイトの置き場所が変わる場面です。

84
00:06:33.472 --> 00:06:41.644
制作中のプレビュー環境や、移転先のフォルダーで、本文のリンクを直さず、基準だけを差し替えて確認したい場合に有効です。

85
00:06:41.644 --> 00:06:47.985
もう一つは、プログラムで自動生成するページなど、相対パスの基準を共通でそろえたい場合です。

86
00:06:47.985 --> 00:06:52.776
逆に、普通にフォルダー構成が安定しているサイトでは、ベースを使わない書き方のほうが、

87
00:06:52.776 --> 00:06:57.567
リンク先が目で追いやすく、トラブルも少なくなります。

88
00:06:57.567 --> 00:07:03.626
ベースは便利な近道ではなく、基準を文書全体で統一したい明確な理由があるときの道具です。

89
00:07:03.626 --> 00:07:10.812
導入するなら、影響を受けるリンク、画像、スタイルシート、フォームを一覧で洗い出してからにしてください。

90
00:07:10.812 --> 00:07:13.020
ブラウザー互換性を確認します。

91
00:07:13.020 --> 00:07:18.908
記事が紹介するエムディーエヌのデータでは、ベース要素本体は、クロームが一以降、

92
00:07:18.908 --> 00:07:24.797
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降から対応しています。

93
00:07:24.797 --> 00:07:31.274
属性ごとに見ても、エイチレフとターゲットは、どちらもまったく同じ世代から対応しています。

94
00:07:31.274 --> 00:07:36.132
つまり、ベースはエイチティーエムエルの初期からある仕組みで、現在の主要ブラウザーで使えない場面はまず考えなくてよい、

95
00:07:36.132 --> 00:07:40.990
ということです。

96
00:07:40.990 --> 00:07:45.700
互換性の心配よりも、この要素で注意すべきは動作の理解のほうです。

97
00:07:45.700 --> 00:07:50.705
対応しているからこそ、置いた瞬間に文書全体へ静かに効いてしまいます。

98
00:07:50.705 --> 00:07:54.533
モバイル環境も含め、利用対象のブラウザーで実際のリンク先を確認する作業を、

99
00:07:54.533 --> 00:07:58.360
導入手順に含めておきましょう。

100
00:07:58.360 --> 00:08:01.937
まとめとして、よくある間違いを三つ挙げます。

101
00:08:01.937 --> 00:08:07.303
一つ目は、ベースをリンク要素や画像より後ろに置いてしまうことです。

102
00:08:07.303 --> 00:08:12.995
前にある要素には基準が効かず、ページの中で行き先がばらばらになります。

103
00:08:12.995 --> 00:08:17.710
二つ目は、ベースを二つ書いて、二つ目にも期待することです。

104
00:08:17.710 --> 00:08:20.149
有効なのは最初のものだけです。

105
00:08:20.149 --> 00:08:23.239
三つ目は、導入後に確認を省くことです。

106
00:08:23.239 --> 00:08:32.508
特にシャープだけのページ内リンクや、画像、フォームの送信先は、見た目では異常に気づきにくいまま行き先が変わります。

107
00:08:32.508 --> 00:08:40.476
ベースタグは、相対ユーアールエルの基準と、リンクの既定の開き方を、文書全体へ一括で決める要素です。

108
00:08:40.476 --> 00:08:45.354
置くのはヘッドの先頭近くに一つだけ、導入後は全リンクを確認。

109
00:08:45.354 --> 00:08:48.281
これでベースタグの解説を終わります。

110
00:08:48.281 --> 00:08:53.972
まずは記事の例で、基準を変えたときの行き先の変化を試してみてください。