実践コーディングスキル - 第5章 Lesson4

第21回:背景画像を利用したバナーを作ろう

   

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

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

背景画像を利用したバナーを作成する方法を解説しています。
ここでは、backgroundプロパティを利用して、背景画像としてバナーの写真を表示させます。



この動画で学べること

・バナーの背景画像を表示させる方法



バナーの背景画像を表示させよう

今回は、バナー部分の作成に入りたいと思います。
まずは、背景画像を表示するためにHTMLに必要なタグを書いていきましょう。
<div>class名rightの中に、<li>タグと<a>を2つ書き、id名をそれぞれ「contact」と「blog」にします。



<div id="right">
<ul>
<li><a href="#" id="contact">ご予約・お問い合わせ</a></li>
<li><a href="#" id="blog">スタイリストブログ</a></li>
</ul>
</div>



HTMLが書けたらCSSを書いていきましょう。
今回は背景に画像を設定したいので、backgroundプロパティを使って画像のパスを入力していきましょう。
また、ボックスの横幅と縦幅を指定したいのですが、<a>タグはインライン要素でそのような調整をすることができないので、displayプロパティを使ってブロック要素に変えます。



div#right ul li a#contact {
background: url(images/contact.jpg) no-repeat;
width: 365px ;
height: 60px;
display: block;
}



では保存してブラウザで見てみましょう。
背景画像を指定したサイズで表示することができました。