VIDEO LESSON

HTMLのasideタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:33動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の百八本目は、アサイドタグです。
0:07アサイドは、本文と間接的に関連する補足情報を示すための要素です。
0:12たとえば関連リンク、用語の補足、ちょっとした注意書きなど、本文の流れからは少し離れるけれど、
0:16読むと理解が深まる内容を置きます。
0:20よくサイドバーとして横に表示されますが、大切なのは見た目ではありません。
0:25アサイドが表すのは配置ではなく、本文との関係です。
0:29今回は、その意味、置き場所による違い、コード例、互換性、よくある間違いまで順番に確認します。
0:35ブログや解説サイトを開いたとき、本文の横や下に関連記事への案内を見かけることがあります。
0:41あの領域を意味付けするのがアサイドです。
0:44アサイドは、どんな場面で使うのでしょうか。
0:47判断の目安は、その部分を取り除いても本文の話がきちんと成り立つかどうかです。
0:53たとえば記事の横に置く関連リンク集、本文に出てきた用語の補足コラム、読み進めるうえでは必須ではない注意書きなどが向いています。
1:04逆に、手順の重要なステップや、読まなければ次が理解できない説明は、アサイドに入れてはいけません。
1:12それらは本文の中にしっかり書きましょう。
1:15補足だからこそ、アサイドに入れることで、本文の流れがすっきりし、必要な人だけが補足に目を向けられるようになります。
1:24ニュース記事の横にある関連キーワードの説明や、レシピ記事の横にある材料の代用メモなども、
1:29身近なアサイドの例と言えます。
1:34基本の書き方を確認します。
1:36アサイドは、開始タグと終了タグを明示して使う要素です。
1:41終了タグを省略することはできません。
1:44中には見出し、段落、リンク、リストなど、通常の内容を自由に置けます。
1:49画面の例では、補足という見出しと、用語を説明する段落をアサイドで囲んでいます。
1:55これだけで、この部分が本文への補足であることが、ブラウザーや支援技術にも伝わります。
2:02アサイド自体には必須の専用属性はありません。
2:06まずは、補足したいまとまりをアサイドで囲む、という基本形を覚えてください。
2:12アサイドで特に面白いのは、置く場所によって補足の相手が変わる点です。
2:17アーティクルの中に置いたアサイドは、その記事に対する補足として扱われます。
2:22一方、ボディの直下など、記事の外に置いたアサイドは、ページ全体に対する補足になります。
2:28たとえばブログなら、記事の中の補足コラムと、ページ共通のサイドバーでは役割が違う、
2:32というイメージです。
2:36コードを書くときは、見た目の位置だけでなく、この補足はどの本文にくっついているのかを意識して、
2:40置く場所を選んでください。
2:45記事の活用事例をもとに、コード例を詳しく見ます。
2:49例では、アサイドに見出しを付け、その見出しにアイディーを振っています。
2:56そしてアサイド側のアリアレーベルドバイという属性で、その見出しを参照しています。
3:03これにより、読み上げソフトなどでも、この補足が何についてのものかが伝わりやすくなります。
3:11中身は、シーエスエス入門へのリンクです。
3:15本文の流れとは分けて、関連する教材をそっと示す、典型的な使い方です。
3:21練習では、入門で作ったファイルにこの例を置き、開発者ツールで構造を確認してみましょう。
3:29保存したらブラウザーで再読み込みし、見出しとリンクが本文とは別のまとまりとして表示されるかを確認してください。
3:39もう一つの典型例が、いわゆるサイドバーです。
3:42メイン要素の外にアサイドを置くと、特定の記事ではなく、ページ全体への補足として扱われます。
3:49サイトの紹介、著者のプロフィール、目次や人気記事のリストなどを置く場所としてよく使われます。
3:55ここで注意したいのは、アサイドと書いただけでは横には並ばないことです。
4:00サイドバーらしく横に配置したい場合は、フレックスボックスやグリッドといったシーエスエスで配置を指定します。
4:08意味はアサイド、見た目はシーエスエス、と役割を分けて考えましょう。
4:12属性を確認します。
4:14アサイドには、この要素専用の必須属性はありません。
4:18必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
4:24アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。
4:31クラスは、シーエスエスやジャバスクリプトで複数の要素をまとめて選ぶための名前です。
4:39ラングは内容の言語を示し、日本語ならジェーエーを指定します。
4:44そのほか、アプリ独自の値を保持するデータ属性もあります。
4:49ただし秘密情報を置く場所ではありません。
4:53属性で見た目や意味が勝手に変わるわけではない点も押さえておきましょう。
4:59似た要素との違いを整理します。
5:01アーティクルは、単独でも意味が通じる記事や投稿そのものです。
5:05セクションは、見出しのある主題別のまとまりを示します。
5:08ナブは、サイト内の主要な移動リンクをまとめる要素です。
5:12そしてディブは、特別な意味を持たない汎用の箱です。
5:15アサイドの決め手は、本文と間接的に関連する補足かどうか、という一点です。
5:20関連リンク集ならアサイド、サイトの主要メニューならナブ、というように、置きたい内容の役割から逆算して選ぶと、
5:24迷いにくくなります。
5:28迷ったときは、そのまとまりだけを切り取って別のページに貼っても話が通じるかを考えると、
5:32アーティクルとの違いが見えてきます。
5:36シーエスエスとの関係を改めて確認します。
5:39記事でも強調されているように、アサイドは横に配置すること自体を意味するタグではありません。
5:45右側に表示したいからアサイドにする、という選び方は誤りです。
5:49まず内容が補足かどうかでアサイドを選び、そのうえで横に並べるかどうかはシーエスエスで決めます。
5:55画面の例のように、親要素にフレックスを指定すれば横並びになりますし、スマートフォンのような狭い画面では縦並びに切り替えることもできます。
6:04意味と見た目を分けることが、セマンティクスなエイチティーエムエルの基本です。
6:09ブラウザー互換性を確認します。
6:11記事が紹介するエムディーエヌのデータでは、アサイド要素本体は、クロームが五以降、
6:17エッジが十二以降、ファイアフォックスが四以降、サファリが五以降から対応しています。
6:22エイチティーエムエルファイブで導入された要素の中でも、古くから安定して使える部類です。
6:28現在の主要ブラウザーであれば、まず問題なく使えます。
6:31ただし、要素本体の対応と、新しい属性やエーピーアイの対応は別ものです。
6:36新しい機能を組み合わせるときは、それぞれの対応状況も確認し、実機でも表示を試しておきましょう。
6:42スマートフォンでは、モバイル版サファリやアンドロイド版クロームなど、モバイル向けブラウザーの対応欄も合わせて確認しておくと安心です。
6:51まとめとして、よくある間違いを三つ挙げます。
6:55一つ目は、右側に表示したいという見た目だけでアサイドを選ぶことです。
7:00判断基準は本文との関係でした。
7:03二つ目は、重要な手順そのものをアサイドへ追い出してしまうことです。
7:08大事な内容は本文に置きましょう。
7:11三つ目は、補足とは言えない内容まで何でも詰め込むことです。
7:15アサイドが増えすぎると、かえって本文との主従が分からなくなります。
7:21アサイドは、本文を補足する関連情報を、流れと分けて示すための要素です。
7:26なくても本文が成り立つか、を合言葉に使ってみてください。
7:31これで解説を終わります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

asideタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。本文を補足する関連情報。横に配置すること自体を意味するタグではありません。

解説記事・サンプルコードを読む：HTMLのasideタグとは？属性・使い方・ブラウザー互換性と活用例 →