7.1 サイドメニューの修正

戻る

ページ右側にあるサイドメニューの調整を行います。

サイドメニューを増やす

サイドメニューを増やすため、<ul> ～ </ul> の範囲をコピーして<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>

<h1>人気の記事</h1>
<ul>
<li><a href="#">秋葉原周辺で出会った人たち</a></li>
<li><a href="#">部屋を彩るかわいいグッズ</a></li>
<li><a href="#">通話アプリを活用する</a></li>
<li><a href="#">最新第5世代CPU PYRONEのすべて</a></li>
</ul>

</aside>

サイドメニューが追加されました。

見出しのデザインを行う

見出しのデザインを調整します。ここでは記事の見出しと高さを揃えるために、<h1>の margin-top を「0」に設定し、見出しの上に自動で挿入される余白を削除します。また margin-bottom で見出しの下の余白サイズを10ピクセル「10px」とし、見出しとメニュー文字との間隔を調整しています。

さらに border-bottom で見出しの下に太さ2ピクセル「2px」のグレー「#dddddd」の点線を挿入し、colorで文字の色を濃いグレー「#666666」にし、font-sizeで見出しの文字サイズを18ピクセル「18px」に指定しています。

/* サイドメニュー */
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; }

aside h1 { margin-top: 0;
           margin-bottom: 10px;
           border-bottom: dotted 2px #dddddd;
           color: #666666;
           font-size: 18px; }

見出しのデザインが変わりました。

メニュー同士の間隔を調整する

メニューの間に余白を入れ、間隔を調整します。「特集」メニューの下に30ピクセルの余白を入れるために<ul>の margin-bottom を「30px」に設定しています。

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

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

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

aside h1 { margin-top: 0;
           margin-bottom: 10px;
           border-bottom: dotted 2px #dddddd;
           color: #666666;
           font-size: 18px; }

メニュー同士に余白ができて間隔が広がりました。