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

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

   

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

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

背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。
ここでは、インライン要素であるリストタグにdisplayプロパティをかけ、背景画像を指定します。



この動画で学べること

・line-heightを使ってテキストを中央揃えにする方法
・背景にアイコンを表示させる方法



line-heightを使ってテキストを中央揃えにしよう

前回作成したテキストを中央に揃えたいと思います。
普通であれば、余白をpxで指定するのですが、ここではline-heightという行間の高さを指定するプロパティを使っていきます。
line-heightを使うと、縦方向の中央揃えができますので、実際に書いてみましょう。


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



保存してブラウザで見てみましょう。
文字が、縦方向の中央に配置されました。
このline-heightを使うというのは裏ワザではありますが、とても便利なのでぜひ覚えておいてください。



背景にアイコンを表示させる方法


では次に、アイコン画像の表示をbackgroundプロパティを使って書いていきます。



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



保存してブラウザで見てみましょう。
アイコンが<a>タグに敷き詰められた状態で表示されました。
<a>タグはインライン要素なので、中のコンテンツの長さに応じて幅が決まります。
今は、ボックスの幅よりも<a>タグの幅が小さいので、文字の上をクリックしなければリンク先に飛ぶことができません。
バナーのどこを押してもリンク先に飛ぶことができるようにしたいので、<a>タグをインライン要素からブロック要素に変えたいと思います。
プロパティdisplayを使って、ブロック要素にするという指定をしていきましょう。
また、画像をリピートさせない、という定義もしてください。



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



保存してブラウザで見てみましょう。
画像を一度だけ表示させることができました。