CSSスキル - 第2章 Lesson8

【続き】ナビゲーションにCSSをかけてみよう(2)

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

簡単なCSSを活用して、ウェブサイトのナビゲーションを完成させる方法を、初心者向けに解説しています。
ここでは、id名を利用して同じタグにそれぞれ異なるCSSをかけ、現在のページがわかるようにCSSをかけていきます。



この動画で学べること

・ナビゲーションのスタイルを変更する方法



ナビゲーションのスタイルを変更する方法

前回の続きで、ナビゲーションのスタイルを変更していきます。
<span>タグの部分の文字サイズを小さくしていきましょう。
今回は値を14pxにします。



nav ul li a span {
font-size: 14px;
}



HTMLファイルを見ると、<li>タグにid名「current」がついたものがあります。
これは、ナビゲーションで今いるページをデザインで示すために他とは違うスタイルをかけるという意味です。
このid名「current」に対して、文字の色を変更し、currentの中の<a>タグの中の<span>の点線の色を変更していきましょう。



nav ul li#current a {
color: #3D2D51;
}

nav ul li#current a span {
border-color: #3D2D51;
}



ここまでできたら 、保存してブラウザで見てみましょう。
id名「current」の部分だけスタイルが変更されました。
ここではid名の付いているもの(黒)の方が、付いていないもの(薄い緑)より優先してスタイルが適応されていることがわかります。