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

第14回:ナビゲーションの位置を調整しよう

   

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

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

ここでは、marginプロパティを利用して余白の調整し、ロゴとナビゲーションの配置を確定しましょう。



この動画で学べること

・ヘッダーの余白をとる方法



余白をとってロゴとナビゲーションを完成させよう

前回作ったナビゲーションの位置を調整してきましょう。
まず、ヘッダーの赤い背景はもう必要ないので、消しておきます。
そして、<header>に内側の余白を記述していきましょう。



header {
width: 960px;
height: 89px;
padding: 20px 0:
}



保存してブラウザで見てみましょう。
余白をとった分、ロゴからメイン画像までが大きく開いてしまいした。
なので高さからpadding分の40pxを引いて、合計で89pxになるようにしましょう。



header {
width: 960px;
height: 49px;
padding: 20px 0:
}



保存してブラウザで見てみます。
余白が小さくなり、見本のデザインと同じになりました。
では最後に、ナビゲーションの上にも余白をとって完成にしましょう。
<nav>に対して、このようにmarginをかけます。


header nav {
float: right;
margin-top: 30px;
}



保存してブラウザで見てみます。
ナビゲーションの上に余白ができました。
次回、お問い合せバナーを作って、ヘッダーを完成させましょう。