WEBVTT

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

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

3
00:00:03.697 --> 00:00:07.668
エイチティーエムエルタグ編の百八本目は、アサイドタグです。

4
00:00:07.668 --> 00:00:12.050
アサイドは、本文と間接的に関連する補足情報を示すための要素です。

5
00:00:12.050 --> 00:00:16.363
たとえば関連リンク、用語の補足、ちょっとした注意書きなど、本文の流れからは少し離れるけれど、

6
00:00:16.363 --> 00:00:20.677
読むと理解が深まる内容を置きます。

7
00:00:20.677 --> 00:00:25.606
よくサイドバーとして横に表示されますが、大切なのは見た目ではありません。

8
00:00:25.606 --> 00:00:29.030
アサイドが表すのは配置ではなく、本文との関係です。

9
00:00:29.030 --> 00:00:35.328
今回は、その意味、置き場所による違い、コード例、互換性、よくある間違いまで順番に確認します。

10
00:00:35.328 --> 00:00:41.353
ブログや解説サイトを開いたとき、本文の横や下に関連記事への案内を見かけることがあります。

11
00:00:41.353 --> 00:00:44.092
あの領域を意味付けするのがアサイドです。

12
00:00:44.092 --> 00:00:47.566
アサイドは、どんな場面で使うのでしょうか。

13
00:00:47.566 --> 00:00:53.852
判断の目安は、その部分を取り除いても本文の話がきちんと成り立つかどうかです。

14
00:00:53.852 --> 00:01:04.274
たとえば記事の横に置く関連リンク集、本文に出てきた用語の補足コラム、読み進めるうえでは必須ではない注意書きなどが向いています。

15
00:01:04.274 --> 00:01:12.214
逆に、手順の重要なステップや、読まなければ次が理解できない説明は、アサイドに入れてはいけません。

16
00:01:12.214 --> 00:01:15.523
それらは本文の中にしっかり書きましょう。

17
00:01:15.523 --> 00:01:24.952
補足だからこそ、アサイドに入れることで、本文の流れがすっきりし、必要な人だけが補足に目を向けられるようになります。

18
00:01:24.952 --> 00:01:29.832
ニュース記事の横にある関連キーワードの説明や、レシピ記事の横にある材料の代用メモなども、

19
00:01:29.832 --> 00:01:34.712
身近なアサイドの例と言えます。

20
00:01:34.712 --> 00:01:36.803
基本の書き方を確認します。

21
00:01:36.803 --> 00:01:41.147
アサイドは、開始タグと終了タグを明示して使う要素です。

22
00:01:41.147 --> 00:01:44.043
終了タグを省略することはできません。

23
00:01:44.043 --> 00:01:49.513
中には見出し、段落、リンク、リストなど、通常の内容を自由に置けます。

24
00:01:49.513 --> 00:01:55.787
画面の例では、補足という見出しと、用語を説明する段落をアサイドで囲んでいます。

25
00:01:55.787 --> 00:02:02.544
これだけで、この部分が本文への補足であることが、ブラウザーや支援技術にも伝わります。

26
00:02:02.544 --> 00:02:06.083
アサイド自体には必須の専用属性はありません。

27
00:02:06.083 --> 00:02:12.036
まずは、補足したいまとまりをアサイドで囲む、という基本形を覚えてください。

28
00:02:12.036 --> 00:02:17.045
アサイドで特に面白いのは、置く場所によって補足の相手が変わる点です。

29
00:02:17.045 --> 00:02:22.496
アーティクルの中に置いたアサイドは、その記事に対する補足として扱われます。

30
00:02:22.496 --> 00:02:28.831
一方、ボディの直下など、記事の外に置いたアサイドは、ページ全体に対する補足になります。

31
00:02:28.831 --> 00:02:32.588
たとえばブログなら、記事の中の補足コラムと、ページ共通のサイドバーでは役割が違う、

32
00:02:32.588 --> 00:02:36.345
というイメージです。

33
00:02:36.345 --> 00:02:40.764
コードを書くときは、見た目の位置だけでなく、この補足はどの本文にくっついているのかを意識して、

34
00:02:40.764 --> 00:02:45.184
置く場所を選んでください。

35
00:02:45.184 --> 00:02:49.605
記事の活用事例をもとに、コード例を詳しく見ます。

36
00:02:49.605 --> 00:02:56.052
例では、アサイドに見出しを付け、その見出しにアイディーを振っています。

37
00:02:56.052 --> 00:03:03.420
そしてアサイド側のアリアレーベルドバイという属性で、その見出しを参照しています。

38
00:03:03.420 --> 00:03:11.525
これにより、読み上げソフトなどでも、この補足が何についてのものかが伝わりやすくなります。

39
00:03:11.525 --> 00:03:15.209
中身は、シーエスエス入門へのリンクです。

40
00:03:15.209 --> 00:03:21.472
本文の流れとは分けて、関連する教材をそっと示す、典型的な使い方です。

41
00:03:21.472 --> 00:03:29.393
練習では、入門で作ったファイルにこの例を置き、開発者ツールで構造を確認してみましょう。

42
00:03:29.393 --> 00:03:39.524
保存したらブラウザーで再読み込みし、見出しとリンクが本文とは別のまとまりとして表示されるかを確認してください。

43
00:03:39.524 --> 00:03:42.663
もう一つの典型例が、いわゆるサイドバーです。

44
00:03:42.663 --> 00:03:49.084
メイン要素の外にアサイドを置くと、特定の記事ではなく、ページ全体への補足として扱われます。

45
00:03:49.084 --> 00:03:55.647
サイトの紹介、著者のプロフィール、目次や人気記事のリストなどを置く場所としてよく使われます。

46
00:03:55.647 --> 00:04:00.641
ここで注意したいのは、アサイドと書いただけでは横には並ばないことです。

47
00:04:00.641 --> 00:04:08.203
サイドバーらしく横に配置したい場合は、フレックスボックスやグリッドといったシーエスエスで配置を指定します。

48
00:04:08.203 --> 00:04:12.912
意味はアサイド、見た目はシーエスエス、と役割を分けて考えましょう。

49
00:04:12.912 --> 00:04:14.523
属性を確認します。

50
00:04:14.523 --> 00:04:18.998
アサイドには、この要素専用の必須属性はありません。

51
00:04:18.998 --> 00:04:24.368
必要に応じて、グローバル属性と呼ばれる共通の属性を使います。

52
00:04:24.368 --> 00:04:31.886
アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。

53
00:04:31.886 --> 00:04:39.225
クラスは、シーエスエスやジャバスクリプトで複数の要素をまとめて選ぶための名前です。

54
00:04:39.225 --> 00:04:44.595
ラングは内容の言語を示し、日本語ならジェーエーを指定します。

55
00:04:44.595 --> 00:04:49.607
そのほか、アプリ独自の値を保持するデータ属性もあります。

56
00:04:49.607 --> 00:04:53.187
ただし秘密情報を置く場所ではありません。

57
00:04:53.187 --> 00:04:59.452
属性で見た目や意味が勝手に変わるわけではない点も押さえておきましょう。

58
00:04:59.452 --> 00:05:01.400
似た要素との違いを整理します。

59
00:05:01.400 --> 00:05:05.296
アーティクルは、単独でも意味が通じる記事や投稿そのものです。

60
00:05:05.296 --> 00:05:08.802
セクションは、見出しのある主題別のまとまりを示します。

61
00:05:08.802 --> 00:05:12.309
ナブは、サイト内の主要な移動リンクをまとめる要素です。

62
00:05:12.309 --> 00:05:15.555
そしてディブは、特別な意味を持たない汎用の箱です。

63
00:05:15.555 --> 00:05:20.231
アサイドの決め手は、本文と間接的に関連する補足かどうか、という一点です。

64
00:05:20.231 --> 00:05:24.386
関連リンク集ならアサイド、サイトの主要メニューならナブ、というように、置きたい内容の役割から逆算して選ぶと、

65
00:05:24.386 --> 00:05:28.542
迷いにくくなります。

66
00:05:28.542 --> 00:05:32.503
迷ったときは、そのまとまりだけを切り取って別のページに貼っても話が通じるかを考えると、

67
00:05:32.503 --> 00:05:36.464
アーティクルとの違いが見えてきます。

68
00:05:36.464 --> 00:05:39.162
シーエスエスとの関係を改めて確認します。

69
00:05:39.162 --> 00:05:45.234
記事でも強調されているように、アサイドは横に配置すること自体を意味するタグではありません。

70
00:05:45.234 --> 00:05:49.281
右側に表示したいからアサイドにする、という選び方は誤りです。

71
00:05:49.281 --> 00:05:55.623
まず内容が補足かどうかでアサイドを選び、そのうえで横に並べるかどうかはシーエスエスで決めます。

72
00:05:55.623 --> 00:06:04.797
画面の例のように、親要素にフレックスを指定すれば横並びになりますし、スマートフォンのような狭い画面では縦並びに切り替えることもできます。

73
00:06:04.797 --> 00:06:09.924
意味と見た目を分けることが、セマンティクスなエイチティーエムエルの基本です。

74
00:06:09.924 --> 00:06:11.924
ブラウザー互換性を確認します。

75
00:06:11.924 --> 00:06:17.325
記事が紹介するエムディーエヌのデータでは、アサイド要素本体は、クロームが五以降、

76
00:06:17.325 --> 00:06:22.726
エッジが十二以降、ファイアフォックスが四以降、サファリが五以降から対応しています。

77
00:06:22.726 --> 00:06:28.460
エイチティーエムエルファイブで導入された要素の中でも、古くから安定して使える部類です。

78
00:06:28.460 --> 00:06:31.928
現在の主要ブラウザーであれば、まず問題なく使えます。

79
00:06:31.928 --> 00:06:36.595
ただし、要素本体の対応と、新しい属性やエーピーアイの対応は別ものです。

80
00:06:36.595 --> 00:06:42.863
新しい機能を組み合わせるときは、それぞれの対応状況も確認し、実機でも表示を試しておきましょう。

81
00:06:42.863 --> 00:06:51.664
スマートフォンでは、モバイル版サファリやアンドロイド版クロームなど、モバイル向けブラウザーの対応欄も合わせて確認しておくと安心です。

82
00:06:51.664 --> 00:06:55.239
まとめとして、よくある間違いを三つ挙げます。

83
00:06:55.239 --> 00:07:00.764
一つ目は、右側に表示したいという見た目だけでアサイドを選ぶことです。

84
00:07:00.764 --> 00:07:03.202
判断基準は本文との関係でした。

85
00:07:03.202 --> 00:07:08.565
二つ目は、重要な手順そのものをアサイドへ追い出してしまうことです。

86
00:07:08.565 --> 00:07:11.165
大事な内容は本文に置きましょう。

87
00:07:11.165 --> 00:07:15.877
三つ目は、補足とは言えない内容まで何でも詰め込むことです。

88
00:07:15.877 --> 00:07:21.240
アサイドが増えすぎると、かえって本文との主従が分からなくなります。

89
00:07:21.240 --> 00:07:26.928
アサイドは、本文を補足する関連情報を、流れと分けて示すための要素です。

90
00:07:26.928 --> 00:07:31.478
なくても本文が成り立つか、を合言葉に使ってみてください。

91
00:07:31.478 --> 00:07:33.428
これで解説を終わります。