HTML&CSS辞典 
aside要素について知りたい人
aside要素について知りたいな!
この記事は上記のような疑問を解消するものとなっています。
- aside要素とは?
- aside要素の使い方
- aside要素とsection要素の違いは!?
aside要素は、脚注や用語の説明などの補足情報を表すために使用します。
aside要素はとても分かりずらい要素の一つで、しっかりと理解しないとどのように使用したらいいのか分からないかと思います。
そこでこの記事ではaside要素について解説していきます。
また、aside要素とsection要素はどのような点で異なるのかも解説していきます。
気になる方は是非最後まで読んで頂ければと思います。
目次
1.aside要素とは?
aside要素は、メインコンテンツからは切り離すことが可能な補足的なセクションを表す要素です。
具体的には、 補足情報、広告、サイドバーなどの補足コンテンツに利用します。
article要素内などのメインコンテンツ内で使う場合は、そのメインコンテンツに関連した補足コンテンツに利用します。
対応ブラウザもChrome、Safari、Firebox、Edgeと幅広く対応しています。
2.aside要素の使い方
aside要素は補足コンテンツのセクションに利用します。
それではaside要素の使い方をみていきましょう。
・・・
<body>
<h1>記事一覧</h1>
<article>
<h2>記事タイトル</h2>
<p>記事情報</p>
<aside>
<h3>補足情報タイトル</h3>
<p>補足情報</p>
</aside>
</article>
</body>
・・・上記のようにarticle要素内にasideを使用する際は、記事タイトルや記事情報に関連した内容にしておきましょう。
aside要素を利用することで、その部分が補足的な内容であると意味づけをすることができます。
これにより、「検索エンジンのクローラーがコンテンツを認識するときに役立つ」、「ソースコードの保守がしやすくなる」というメリットがあります。
3.aside要素とsection要素の違いは!?
aside要素とsection要素はHTML5から導入された要素です。
そこでaside要素とsection要素の違いをみていきましょう!
aside要素は、メインコンテンツからは切り離すことが可能な補足的なセクションを表す要素です。
一方、section要素はHTML文書内のセクションを表現する要素です。
つまり、文章に階層をつけるときにsection要素が必要となります。
このように似ているようで異なります。
しっかりと意味を理解して使い分けましょう!
↓↓↓↓ section要素について詳しく知りたい方は以下の記事をご覧になって下さい。
[必要性は?] section要素の使い方は? article要素との違いも分かりやすく解説!
「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。
実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?
HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?
そんな方に「はじめての副業コース」をオススメします。
なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!
Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?
↓↓↓↓ブログ村に参加しています! 是非、応援クリックお願いします!
