ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
aside 要素とは
aside 要素は HTML5 で追加されたセクショニング要素のひとつで、本文と関連はあるが直接の流れには属さない補足情報を表します。雑誌の「サイドバー記事」「囲み記事」「注釈」のようなイメージです。
基本構文
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="/related-1">関連記事1</a></li>
<li><a href="/related-2">関連記事2</a></li>
</ul>
</aside>
aside を使う場面
| 用途 | 説明 |
|---|---|
| サイドバー | 関連リンク・カテゴリ一覧・最近の投稿など |
| プルクオート | 本文中の重要なフレーズを大きく抜粋して表示 |
| 注釈 | 用語解説・コラム・豆知識 |
| 広告 | 記事に関連する広告枠 |
| 著者情報 | 記事下部のプロフィール枠 |
article 内 vs body 直下
配置場所で意味が変わるのが aside の特徴です。
<!-- article 内: その記事に関する補足 -->
<article>
<h1>サマーキャンプの記録</h1>
<p>今年のサマーキャンプは大変盛り上がった...</p>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="/winter-camp">ウィンターキャンプの記録</a></li>
</ul>
</aside>
</article>
<!-- body 直下: サイト全体の補足 -->
<body>
<main>
<article>...</article>
</main>
<aside>
<h2>サイドバー</h2>
<nav>
<h3>カテゴリ</h3>
<ul>
<li><a href="/cat/tech">技術</a></li>
<li><a href="/cat/life">生活</a></li>
</ul>
</nav>
</aside>
</body>
プルクオートの例
<article>
<h1>働き方改革の真実</h1>
<p>残業時間が減ったからといって生産性が上がるわけではない...</p>
<aside class="pull-quote">
<blockquote>
「生産性は時間ではなく集中度で決まる」
</blockquote>
</aside>
<p>例えば私の部署では...</p>
</article>
使ってはいけないパターン
aside は本文に何かしら関連している必要があります。完全に無関係なら aside ではなく単なる別要素として扱うべきです。
| 誤用 | 正しい選択 |
|---|---|
| 本文の途中で改ページ的に挿入する区切り | div / section |
| 本文の段落そのもの | p |
| 本文の見出しと中身 | section / article |
| 無関係な広告 | 意味的には div、aside にする場合は記事に関連したものに限定 |
section / article との違い
| 要素 | 意味 |
|---|---|
article | 独立して配信可能な記事 (ブログ記事、ニュース) |
section | 一般的なセクション (見出しのある章) |
aside | 本文と関連はあるが流れには属さない補足 |
nav | ナビゲーション (リンク集) |
アクセシビリティ
スクリーンリーダーは aside を「補足情報」「complementary landmark」として読み上げます。これにより視覚障害ユーザーが本文と補足を区別できます。
- aside には見出し (h2-h6) を入れると意味づけが明確
aria-labelledbyで見出しと紐付け推奨- WAI-ARIA Landmark Roles 上は
role="complementary"に相当
<aside aria-labelledby="related-heading">
<h2 id="related-heading">関連記事</h2>
<ul>
<li><a href="/post-1">記事1</a></li>
</ul>
</aside>
CSS でサイドバー風に整形
/* 右側のサイドバーとして配置 */
.layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2em;
}
aside.sidebar {
background: #f5f5f5;
padding: 1em;
border-radius: 8px;
}
/* プルクオート風 */
aside.pull-quote {
float: right;
width: 40%;
margin: 0 0 1em 1em;
padding: 1em;
border-left: 4px solid #667eea;
font-style: italic;
font-size: 1.2em;
color: #555;
}
FAQ
Q: ヘッダーやフッターを aside にしていい?
A: NG。ヘッダーは header、フッターは footer。aside は本文の補足。
Q: 広告枠は aside?
A: 記事内容に関連する広告 (記事連動広告) なら aside、無関係な広告は div class="ad" 等で十分。
Q: 一つの記事に aside は何個まで?
A: 制限なし。関連情報・コラム・参考文献など複数置いてOK。
Q: モバイルでサイドバーを表示しない場合 aside ごと消していい?
A: 視覚的に隠す (display: none) のは OK だが、内容自体が必要なら別途展開可能なメニューに変換するなどして情報損失を避ける。
典型的な HTML5 全体構造の中での aside
<body>
<header>
<h1>サイトタイトル</h1>
<nav>...</nav>
</header>
<main>
<article>
<h1>記事タイトル</h1>
<p>本文...</p>
<!-- 記事内の補足 (記事に関連) -->
<aside>
<h2>関連記事</h2>
<ul>...</ul>
</aside>
</article>
</main>
<!-- サイト全体のサイドバー -->
<aside>
<h2>サイドバー</h2>
<nav>...</nav>
</aside>
<footer>
<p>© 2026 MySite</p>
</footer>
</body>
このように本文と関連はあるが流れには属さない部分を aside でマークアップすると、文書構造が明確になり SEO・アクセシビリティの両面でメリットがあります。
関連記事
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Unreal Engine AI MoveTo 完全ガイド(NavMesh / AIController / Behavior Tree) 2026-06-11 07:07:02
- shutdown コマンド完全ガイド(Linux / Windows / systemd の使い分け) 2026-06-11 07:07:02
- DI(依存性注入)完全ガイド(Dependency Injection / IoC / Spring / CDI / コンストラクタ・セッター注入) 2026-06-11 07:07:02
- git 用語一覧完全リファレンス(Repository / HEAD / Branch / Rebase / Stash 他) 2026-06-11 07:07:02
- TCP/IP リンク層 (ネットワークインターフェース層) 完全ガイド 2026-06-11 07:07:02
- Laravel ルート認証化完全ガイド — middleware と Gate 2026-06-11 07:07:02
- EJB完全ガイド(Stateless/Stateful/Singleton/MDB/CDIとの違い/Spring代替) 2026-06-11 07:07:02
- git log コミット履歴確認完全ガイド — oneline/graph/stat/blame 2026-06-11 07:07:02
- Laravel のインストール手順まとめ — composer / Sail / Valet / Herd と初期設定 2026-06-11 07:07:02
- CDI完全ガイド(Inject/Produces/Qualifier/Scope/Spring DIとの違い) 2026-06-11 07:07:02
- Python set 入門 — 作成方法、frozenset、内包表記、リスト重複削除 2026-06-11 07:07:02
- Apache .htaccess でベーシック認証を設定する手順(.htpasswd / htpasswd / AuthType Basic / トラブルシュート) 2026-06-11 07:07:02
- Python アプリのローカル独立配布完全ガイド(PyInstaller / wheel / Docker) 2026-06-11 07:07:02
- Laravel Eloquent モデルのデフォルト値設定 2026-06-11 07:07:02
- Unity Component 取得とキャッシュの完全ガイド(GetComponent/RequireComponent/TryGetComponent) 2026-06-11 07:07:02
コメントを削除してもよろしいでしょうか?