実践コーディングスキル - 第1章 Lesson10

第9回:floatを使ってロゴとナビを横並びにしてみよう

   

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

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

floatプロパティを利用してロゴとナビゲーション、ナビゲーションリスト全体を横並びにする方法を、初心者向けに解説しています。



この動画で学べること

・floatを使ってロゴとナビゲーションを横並びにする方法



floatを使ってロゴとナビゲーションを横並びにする方法

今回は、floatを使って、縦に並んでいるロゴとナビゲーションを横並びにしていきたいと思います。
まずはfloat: leftlをかけて、<nav>の中の<li>をすべて横並びにします。
また、floatをかけただけでは隣のリストとの境目がわからないので、marginをかけて余白をとっていきます。



header nav ul li {
float: left;
margin-left: 20px;
}



保存してブラウザで見てみましょう。
ナビゲーションのリストが横並びになりました。
floatをかけた場合、floatを解除する必要がありましたね。
以前、レイアウトを組むときに使った<div>id名clearfixと同じCSS、をナビゲーションのリストの下にも追加したいのですが、clearfixは現在idとして指定されているため、同じものを使うとルール違反になってしまいます。
なので、このidをclassに変更しページの中でこの名前を何度も使えるようにします。
idをclassに変更できたら、コピーしてナビゲーションのリストの下に追加しましょう。
また、CSSに「#clearfix」と書かれた部分も「.clearfix」に変更しましょう。



次に、ロゴを左寄せに、ナビゲーションを右寄せにするCSSを書いていきます。
そして、ナビゲーションの部分の余白をmarginでとりましょう。



h1{
float: left;
}


nav{
float: right;
margin-top: 56px;
}



最後に、floatを解除する<div>class名clearfixを<nav>の下に追加して、ヘッダーの完成です。