実践コーディングスキル - 第4章 Lesson5

第13回:横並びのナビゲーションを作ろう

   

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

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

横並びのナビゲーションを作成する方法について解説しています。
ここでは、floatプロパティを利用してリストタグを横に並べます。



この動画で学べること

・マウスホバー時のマークを上手く表示させる方法
・floatを使ってヘッダの中のレイアウトを組む方法



マウスホバー時のマークを上手く表示させる方法

前回までで、<a>タグと<li>タグのスタイルは完成しましたが、マウスホバーの仕方によって、マークの線が先に消えてしまい▼だけが残ってしまうようになっています。
今回は線もマークも同時に表示させたり消したりする方法を見ていきましょう。
今は、線が<li>の中の<a>タグにマウスが乗った時という指定になっていますが、<li>タグにマウスが乗った時に<a>タグにスタイルをかけるという方法にすると上手くいくので、一緒にやっていきましょう。
前回まではa:hoverと書いていましたが、li:hoverに変更します。


【旧】
header nav ul li a:hover{
color: #345c39;
}
<span></span>
【新】
header nav ul li:hover a{
color: #345c39;
}



保存してブラウザを見てみましょう。
線が先になくならなくなりました。



floatを使ってヘッダの中のレイアウトを組もう

では次に、ヘッダーの中のレイアウトを組むため、<h1>にはfloat: left;を、ナビゲーションにはfloat: right;をかけます。
また、ナビゲーションの中のリストを横並びにし、左側に余白をかけていきましょう。



header nav {
float: right;
}


header nav ul li {
height: 36px;
float: left;
margin-left: 29px;
}



保存してブラウザで見てみます。
ナビゲーションを右に寄せ、リストを横並びにすることができました。