HTML要素 ・ ページ構造
<aside>
補足情報
本文と関連はあるが、本筋からは外れる補足情報を表す要素です。サイドバーや注釈、関連リンクに使います。
01
サンプルコード
HTML
1<p>コーヒー豆は焙煎の度合いで味が変わります。</p>
2<aside class="note">
3 <strong>豆知識</strong>
4 <p>深煎りほど苦味が強く、浅煎りほど酸味が強くなります。</p>
5</aside>
CSS
1.note {
2 padding: 12px 16px;
3 background: #fff3e4;
4 border-left: 4px solid #e1ad66;
5}
6.note p {
7 margin: 4px 0 0;
8}
02
実行結果
ブラウザでの表示
03
解説
aside は、メインの話の流れから外れた補足を表します。取り除いても本文の意味が変わらない内容が目安です。
ページ全体のサイドバーとして使うほか、記事の中の「豆知識」や「コラム」のような囲み記事にも使えます。
見た目を横に置くかどうかは関係ありません。配置はCSSで決めます。
04
応用例・注意点
aside に向いている内容
| 内容 | 説明 |
|---|---|
サイドバー | カテゴリ一覧・人気記事など |
コラム・注釈 | 本文の補足 |
関連リンク | あわせて読みたい記事 |
広告 | 本文と関係の薄い内容 |
2カラムのレイアウトにする
main と aside を Grid で横に並べます。
HTML
1<div class="layout">
2 <main>…</main>
3 <aside>…</aside>
4</div>
CSS
1.layout {
2 display: grid;
3 grid-template-columns: 1fr 240px;
4 gap: 32px;
5}
注意点
- 01本文に欠かせない内容は aside に入れないでください。
- 02main の外に置くページ全体のサイドバーと、記事内の補足のどちらにも使えます。