実践コーディングスキル - 第8章 Lesson6

第5回:横並びのロゴとナビゲーションを作成しよう

   

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

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

ウェブマガジンのヘッダーを作成する方法を解説しています。
ここでは、ヘッダーのロゴとナビゲーションにデザインと同じになるようにCSSを加えます。



この動画で学べること

・ナビゲーションにスタイルをかける方法
・floatをかけてロゴとナビゲーションを横並びにする方法



ナビゲーションにスタイルをかけよう

ナビゲーションの色を変更したいので、<a>タグに対する文字のスタイルを設定していきましょう。
文字の色と下線を消すという記述をします。



a {
color: #343434;
text-decoration: none;
}



では次に、擬似クラス:hoverでマウスを上にもってきた時に<a>タグがオレンジになるようにします。
オレンジ色は、ヘッダーの下の境界線と同じ色ですので、border-bottom: 3px solid #f6ac4d;の部分からカラーコードをコピーしましょう。



a:hover {
color: #f6ac4e;
}


保存してブラウザで見てみます。
<a>タグの文字がグレーになり、マウスが上に乗った時にオレンジに変わりました。
では次にナビゲーションを横並びにしていきたいと思います。
文字のサイズを18pxに設定し、横並びにするためにfloatをかけていきます。
また、リストの左側にborderプロパティで境界線を作り、余白をとって見やすくしましょう。



header nav ul li {
font-size: 18px;
float: left;
margin-left: 20px;
padding-left: 20px;
border-left: 1px dotted #434343;
}



一番最後のリストにだけ右側にも線を作りたいので、擬似クラス:last-childを使って境界線を適応させていきましょう。



header nav ul li:last-child {
padding-right: 20px;
border-right: 1px dotted #434343;
}



では保存してブラウザで見てみましょう。
ナビゲーションが横並びになり、メニューに境界線が表示されました。



floatをかけてロゴとナビゲーションを横並びにしよう

最後に、ロゴとナビゲーションを横並びにしたいと思います。
ロゴの<h1>にはfloat: left;を、ナビゲーションにはfloat: right; をかけましょう。


h1 {
float: left;
}

nav {
font-size: 18px;
float: right;
margin-top: 30px;
}



保存してブラウザで見てみると、ロゴとナビゲーションが横並びになっています。
これで、ヘッダー部分は完成です。