実践コーディングスキル - 第2章 Lesson5

第12回:背景画像を利用したバナーを作ってみよう(3)

   

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

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

背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。
ここでは、かぶっている背景画像と文字の位置をpaddingを利用して調整します。



この動画で学べること

・アイコンの位置を調整する方法
・バナーごとに違うアイコンを表示させる方法



アイコンの位置を調整させてバナーを完成させよう

前回表示させたアイコンの位置を調整していきましょう。
背景画像の位置を指定するときには、画像の指定をしたbackgroundの値の中に、左からどれだけずらすか、上からどれだけずらすか、という指定をします。
今回は、左から14px、縦はcenterという値にしてみましょう。




#left ul li a {
font-size: 16px;
font-weight: bold;
color: #555555
text-decoration:none;
line-height: 50px;
background: url(images/icon_tel.png) 14px center ;
display: block;
}



保存してブラウザで見てみましょう。
アイコンの位置をずらすことができました。
しかし、今のままでは文字とアイコンが被ってしまっていますので、<a>タグに内側の余白をつけて文字の位置をずらしましょう。




#left ul li a {
font-size: 16px;
font-weight: bold;
color: #555555
text-decoration:none;
line-height: 50px;
background: url(images/icon_tel.png) 14px center ;
display: block;
padding-left: 50px;
}



保存してブラウザで見てみましょう。
テキストの位置が変更され、アイコンと被らなくなりました。




バナーごとに違うアイコンを表示させる方法

今は、すべて同じ電話のアイコンになっているので、バナーごとに表示するアイコンを変えていきましょう。
まずは、HTMLでそれぞれの<li>タグにid名をつけていきます。



<ul>
<li><a href="#" id="icon_tel">お電話でのご予約はこちら</a></li>
<li><a href="#" id="icon_blog">院長のブログ</a></li>
<li><a href="#" id="icon_voice">お客様の声</a></li>
</ul>



保存して、CSSを書いていきましょう。
それぞれの<li>タグのidに画像のパスを入力してください。
また、今まで書いていたバナー部分のスタイルのうち、すべてに共通するものだけ残し、画像の部分は削除します。



#left ul li a {
font-size: 16px;
font-weight: bold;
color: #555555
text-decoration:none;
line-height: 50px;
display: block;
padding-left: 50px;
}


#icon_tel {background: url(images/icon_tel.png) no-repeat 14px;}
#icon_blog {background: url(images/icon_blog.png) no-repeat 14px;}
#icon_voice {background: url(images/icon_voice.png) no-repeat 14px;}



保存してブラウザで見てみましょう。
それぞれ指定したアイコンが表示され、バナーが完成しました。