CSSスキル - 第8章 Lesson2

擬似クラスを使った、横並びのナビゲーションを作ってみよう

   

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

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

擬似クラスを使った、横並びのナビゲーションを作ってみましょう。



この動画で学べること

・擬似クラスを使った、横並びのナビゲーションを作成する方法



擬似クラスを使った、横並びのナビゲーションを作成する方法

今回は、擬似クラスを使った横並びのナビゲーションを作ってみましょう。
横並びにするために使うのはfloatというプロパティでした。<li>タグを左に流すように指定します。
また、<li>タグ一つ一つの横幅を指定し、文字を中央に寄せましょう。
そして、左側に区切りをつけるための境界線を引きます。



ul li {
float: left;
width: 158px;
text-align: center;
border-left: 1px solid gray;
}



保存してブラウザで見てみましょう。
横並びのナビゲーションになりました。
しかし、境界線が隣のタグと被ってしまい太くなってしまったので、擬似クラスを使って一番最後の<li>タグにだけ右にも境界線を書いていきたいと思います。
前回学んだlast-childという擬似クラスを指定してこのように記述します。



ul li:last-child {
border-right: 1px solid gray;
}



保存してブラウザで見てみます。
境界線が上手く表示でき、id名を使わなくても擬似クラスlast-childを使って、特定のタグにスタイルをかけることができました。