8.4 サイドメニューを飾る

戻る

Font Awesome によるアイコンフォントを利用して、サイドメニューにマークを付けます。ここでは「特集」メニューの各項目に右向きの三角形のマークを付けます。

マークを付ける

サイドメニューの「特集」コーナーの各リンクに「」のようなマークを付けます。マークは以前紹介したアイコンフォント(Font Awesome)で表示します。「特集」メニューの<li>～</li>に次のように<i></i>を追加し、クラス名を「fa fa-angle-right」と設定します。

<aside>～</aside> の範囲内で編集してください。

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

各メニュー項目にマークが付きます。

マークの色を変える

マークの色をオレンジにするため、<i>の color を「#ff8844」に設定します。また、マークと文字の間隔が狭く読みづらいので、margin-right でマークの右に５ピクセルの余白を入れます。

/* サイドメニュー */
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: dashed 2px #dddddd;
  color: #666666;
  font-size: 18px; }

aside i { color: #ff8844;
          margin-right:5px; }

マークに色が付き、文字との間隔が調整されました。