CSSスキル - 第2章 Lesson7

ナビゲーションにCSSをかけてみよう(1)

   

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

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

簡単なCSSを活用して、ウェブサイトのナビゲーションを完成させる方法を、初心者向けに解説しています。
ここでは、文字の大きさや色、下線などのCSSをかけていきます。



この動画で学べること

・ナビゲーションにCSSを適応させる方法



ナビゲーションにCSSを適応させる方法

ナビゲーションにCSSを適応させてみましょう。
まずは、HTMLの構造を見てみます。
<nav>タグの中に<ul>と<li>タグがあり、その中にさらに<a>タグがあります。
ではCSSを適応させていきましょう。
<li>タグの中の<a>タグの文字色を変更し、下線を消したいので、このように書きます。



nav ul li a {
color: #3BD5D4;
text-decoration: none;
}



また、<a>タグの中には<span>タグがあり、少し文字の大きさが小さいので、まずは<a>タグの文字サイズを指定します。


nav ul li a {
color: #3BD5D4;
text-decoration: none;
font-size: 18px;
}



次回の動画で<span>タグの中の文字サイズを変更していきましょう。