aside要素の使い方は？HTML5の要素を使いこなそう

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子

aside要素っていつ使うの？

ユキ

基本的に補足情報を記述するよ。

結論からいうと、aside要素は補足情報を記載するために使います。

例えば、関連記事やカテゴリ一覧などがこれにあたります。
今回は、aside要素の使い方と実用例を解説します。
コーヒーでも飲みながらゆっくり読んでみてください。

１： aside要素とは

aside要素は補足情報を記載するためにつける要素です。

よくブログ記事とかWebサイトを読んでいると関連記事やカテゴリ一覧なんかが端っこにありますよね。
あれらなんかはaside要素で記述されているものになります。

厳密にはaside要素で括らなくても表示自体はできるのですが、CSSでのデザインが困難になります。特定のブロックにできないからですね。せっかくHTMLが補足情報を付けるための要素を作ってくれているので使いましょう。

また、aside要素は各ページに複数記述することができます。しかし、入れ子のようにaside要素の中にaside要素を記述することはできません。そこだけ気をつけましょう。

<article> <aside> <h2>タイトル</h2> </aside>
</article>

記事内にaside要素を挿入したい場合は、article要素内に入れましょう。
ここにはメイン記事の補足情報を入れるといいかと思います。
メイン記事の中では伝えきれない、注意してほしいこととかを記載するとユーザーにとってもみやすい記事となります。

<div id="side"> <aside> <ul class="sidebar"> <li><a href="#">関連記事1</a></li> <li><a href="#">関連記事2</a></li> </ul> </aside>
</div>

関連記事として記載するにはdiv要素にid属性を記載してその中に入れ子としてaside要素を記述しましょう。

ul要素でリストを作ってclass属性を指定してあげれば、あとはCSSでデザインして関連記事を作ることができます。
私のブログだと下記の画像のようになります。

今回はaside要素の使い方と実用例を解説しました。

aside要素を使うことによって補足情報をブロックとして分けることができCSSでのデザインもしやすくなるのでWebサイトを作成する際はぜひ使ってみましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした！