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

第15回:positionを使って右上にバナーを配置しよう

   

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

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

右上のお問い合わせバナーを配置する方法について解説しています。
ここでは、positionプロパティを利用して絶対位置を指定した配置を行います。



この動画で学べること

・positionを使ってヘッダーの右上にバナーを表示させる方法



positionを使ってヘッダーの右上にバナーを表示させよう

今回は、ヘッダーの右上に「お電話でのご予約はこちらまで」のバナーを配置していきましょう。
まずは画像を表示させるHTMLを書いていきますが、alt属性など忘れないように記述していきます。
<img>タグはブロック要素で囲む必要があるので、今回は<p>タグで囲んでください。



<p id="nav_tel">
<img src="images/tel_nav.jpg" alt="お電話でのご予約はこちらまで 012−345−6789">
</p>




一度保存してブラウザで見てみます。
画像は表示されていますが、変なところにあります。
これは、ロゴやナビゲーションにfloatをかけたのに、float解除をしていないためです。
</nav>の下に<div class="clear"></div>を書いて、float解除をしましょう。



div.clear{
clear: both;
}



では、保存してブラウザで見てみます。
画像がちゃんと表示されました。
では、この画像をpositionプロパティを使って右上に配置させていきましょう。
まず、<header>を基準にしたいので、<header>にposition: relativ;を書き、そこからどれだけずらすかを#nav_telに書いていきます。


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

header #nav_tel{
position: absolute;
top: 0:
right: 0;
}



保存してブラウザで見てみましょう。
バナーを右上に配置することができました。