aside要素は、メインコンテンツから離れた関連コンテンツをマークアップするために使用されます。
※サイドバー、広告、補足情報、関連記事などで利用される
aside要素
記法
<aside>
関連する情報、広告、サイドバーなどを配置
</aside>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>aside要素について</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div class="container">
<article id="main_article">
<p id="section1">これは主な記事内容のセクション1です。</p>
<p id="section2">これは主な記事内容のセクション2です。</p>
<p id="section3">これは主な記事内容のセクション3です。</p>
</article>
<aside id="page_navigation" class="side-info">
<p>ページ内ナビゲーション</p>
<ul>
<li><a href="#section1">セクション1</a></li>
<li><a href="#section2">セクション2</a></li>
<li><a href="#section3">セクション3</a></li>
</ul>
</aside>
</div>
</body>
</html>.container {
display: flex;
flex-wrap: wrap;
margin: 20px;
}
#main_article {
flex: 1 1 70%;
padding: 20px;
box-sizing: border-box;
}
.side-info {
flex: 1 1 25%;
padding: 20px;
background-color: #f4f4f4;
border: 1px solid #ccc;
box-sizing: border-box;
margin-left: 20px;
}
.side-info p {
font-weight: bold;
}
.side-info ul {
list-style-type: none;
padding: 0;
}
.side-info ul li {
margin-bottom: 10px;
}
.side-info ul li a {
text-decoration: none;
color: #333;
}
.side-info ul li a:hover {
text-decoration: underline;
}出力結果
これは主な記事内容のセクション1です。
これは主な記事内容のセクション2です。
これは主な記事内容のセクション3です。
