サイドバーを作る

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座 でWebデザインを学習中！

<aside> タグの中にサイドバーに掲載するコンテンツを書き加える。 (P213)

      <aside>
        <h3 class="sub-title">カテゴリー</h3>
        <ul class="sub-menu">
          <li><a href="#">VVVVV</a></li>
          <li><a href="#">WWWWWWWW</a></li>
          <li><a href="#">XXXX</a></li>
          <li><a href="#">YYYYY</a></li>
        </ul>

        <h3 class="sub-title">Lorem, ipsum dolor.</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto ad neque, possimus
          numquam aliquam ut atque iste fuga libero reprehenderit, temporibus asperiores.
        </p>
      </aside>

見出しに下線をつける、文字サイズや余白を調整する。

.sub-title {
  font-size: 1.375rem;
  padding: 0 8px 8px;
  border-bottom: 2px solid #0bd;
  font-weight: normal;
}

文章に padding で内側に余白をつけて見やすくする。

aside p {
  padding: 12px 10px;
}

カテゴリーリストの装飾

list-style: none; でリスト項目マーカーを非表示する。 (P214)

.sub-menu {
  margin-bottom: 60px;
  list-style: none;
}
.sub-menu li {
  border-bottom: 1px solid #ddd;
}
.sub-menu a {
  color: #432;
  padding: 10px;
  display: block;
}
.sub-menu a:hover {
  color: #0bd;
}

<a> タグに display: block を加えクリック範囲をリスト項目いっぱいまで広げる。

.sub-menu a:hover では、マウスカーソルが重なったとときのスタイリングを行う。

NEWSページが完成した。