HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎36. 背景画像の使用例

      2017/07/11   hatano

この章について

background-imageを利用したテクニックを紹介します。今回使用した画像は下記からダウンロードできます。
背景画像データ

background-imageを利用した見出し

見出しなど目立たせたい部分に背景画像を利用することがあります。ポイントはh2要素で幅、高さ、背景画像の指定をし、子要素のspanで文字の位置調整をしています。

背景画像を利用した見出し


<h2 class="heading"><span>インフォメーション</span></h2>


.heading{
	width: 680px;
	height: 72px;
	background: url(images/heading-bg.png) no-repeat;
}
.heading span{
	display: block;
	padding-left: 100px;
	padding-top: 30px;
	font-weight: bold;
	font-size: 22px;
}

background-imageを利用した行頭マーク

箇条書きリスト(ul, li要素)の行頭マーカーブラウザごとで見た目に違いが出てしまうのが欠点です。背景画像を利用することによって、どのブラウザでも同じ見た目の行頭マーカーにすることができます。ポイントはli要素padding-leftで位置を右にずらすことで背景画像に文字がかぶらないようにします。

背景画像を利用した行頭マーカー


<ul>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>


li{
	list-style: none;
	margin-bottom: 10px;
	margin-left: 20px;
	padding-left: 12px;
	background: url(images/maker.png) no-repeat left center;
	font-size: 14px;
}

hoverで色の変わるボタン

通常時はimg要素を表示。hover時は背景画像を表示させるテクニックです。
ポイントはa要素に背景画像を指定し、hover時img要素display: none;で非表示にさせることです。a要素はインライン要素のため幅、高さの指定ができません。display: block;を指定してブロックレベル要素に変更しておきましょう。

背景画像を利用したボタン


<p class="btn">
	<a href="#"><img src="images/btn.png" alt="button" width="400" height="60"></a>
</p>


.btn{
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.btn a{
	display: block;
	width: 400px;
	height: 60px;
	background: url(images/btn-on.png) no-repeat;
}
.btn a:hover img{
	display: none;
}