5.4 サイドメニュー

戻る

おすすめ記事など、サイト内の他のページに繋がるリンクを並べたパーツです。記事の右側に配置します。

ナビゲーションメニューと似ていますが、縦並びのメニューとします。（横並び化の設定を行いません）
また、ナビゲーションメニューで使用した<nav>の代わりに、補足的なメニューであることを表す<aside>を使って全体を囲みます。

<aside>
<h1>特集</h1>
<ul>
<li><a href="#">新しい通信方式５Ｇについて</a></li>
<li><a href="#">バッテリーを長持ちさせる方法</a></li>
<li><a href="#">スマホと一緒の便利な生活</a></li>
<li><a href="#">100円ショップでお手軽DIY</a></li>
</ul>
</aside>

/* サイドメニュー */
aside ul { margin: 0;
           padding: 0;
           list-style: none; }

aside a { display: block;
          padding: 5px;
          color: black;
          font-size: 14px;
          text-decoration: none; }

aside a:hover { background-color: #dddddd; }

完成例

縦メニューっぽいものが表示できたら完成です。マウスカーソルを重ねると色が変わるはずです。

HTML部分の解説

サイドメニューはナビゲーションメニューと同様に、HTMLのリスト（箇条書き）機能を使って <ul> と <li> で表示し、各項目には <a> でリンクを設定しています。全体は <nav> の代わりに <aside> タグで１つのグループにまとめ、スタイルシートでデザインを指定しやすいようにしています。

スタイルシートを適用する前の状態。

サイドメニューに見出しをつける

サイドメニューの上部には見出しをつけ、何のメニューか分かるようにします。ここでは「特集」という見出しをつけるために、<h1>を使用しています。

<aside>
<h1>特集</h1>
<ul>
<li><a href="#">新しい通信方式５Ｇについて</a></li>
<li><a href="#">バッテリーを長持ちさせる方法</a></li>
<li><a href="#">スマホと一緒の便利な生活</a></li>
<li><a href="#">100円ショップでお手軽DIY</a></li>
</ul>
</aside>

CSS部分の解説

サイドメニューのスタイルシート設定は、ナビゲーションメニューのものとほとんど同じです。クラス名 aside に対する設定であることと、横並びにする設定が無い点が異なります。

/* サイドメニュー */
aside ul { margin: 0;
           padding: 0;
           list-style: none; }

aside a { display: block;
          padding: 5px;
          color: black;
          font-size: 14px;
          text-decoration: none; }

aside a:hover { background-color: #dddddd; }