【CSS3】background-imageで複数の背景画像を表示する

CSS3ではbackground-imageで複数の背景画像を使用出来るようになった。

今回使用するのはこの4枚の背景画像を重ねてボタンをつくってみる。

background-imageなどのプロパティの引数に値を順番に指定する。
重なり順は一番左が一番上で、一番右が一番下になる。

p#button {
	background-image: url(画像4のパス), url(画像3), url(画像2), url(画像1);
	background-repeat: 画像4のリピート指定, 画像3, 画像2, 画像1;
	background-position: 画像4の位置指定, 画像3, 画像2, 画像1;
}

実際に使ってみる
【button.html】

<p id="button">ボタン</p>

【button.css】

p#button {
	width: 320px;
	height: 42px;
	line-height: 42px;
	text-indent: 2.2em;
	font-size: 140%;
	color: #FFFFFF;
	margin: 50px auto;
	background-image: url(img04.png), url(img03.png), url(img02.png), url(img01.png);
	background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
	background-position: 98% 50%, 2% 50%, left top, center center;
}

【実行結果】

【CSS3】高解像度用スマートフォン用のメディアクエリ指定方法

スマートフォンのブラウザ(WebKit系)ではdevicePixelRatioというプロパティが定義されていて、
画像1pxを実際のデバイス上で何pxとして描画するかという指定をしている。

スマートフォン(縦)の横幅は320pxとして考えるのが一般的であるが、実際の解像度は端末ごとに違うため、それぞれdevicePixelRatioプロパティの定義によって帳尻を合わせている。

CSS3のメディアクエリ(@media)を使ってデバイスの横幅ごとにデザインを切り替える場合、スマートフォンの横幅=320pxと決めつけてしまうと、iphone4や高解像度Android端末ではうまくいかない。

対象端末のdevicePixelRatioプロパティに対してメディアクエリを指定する事で対応できる。
現在の出回っている端末のdevicePixelRatioは「1」,「1.5」,「2」があり、1はそのまま表示すればいいので、1.5と2を対象に加える。

/* 320px以下(スマートフォン縦・横) */
@media
only screen and (max-width: 320px),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    div#contents {
 
    }
}

【CSS3】メディアクエリ指定でデバイスの横幅ごとに表示を切り替える

CSS3ではユーザのブラウザやデバイスの情報を取得することができるようになり、それに対応したスタイルの適用が可能になった。
これにより、ひとつのHTMLファイルで複数のデバイスに対応できるようになった。

CSS3のメディアクエリ(@media)を使ってデバイスの横幅ごとにデザインを切り替えてみる。
今回は、1,000px以上をPC・タブレット(横)、1,000px以下をタブレット(縦)、480px以下をスマートフォン(横)(縦)と想定してスタイルを指定してみる。

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {

}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {

	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {

	}
}

実際に試してみる。
【index.html】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>title</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!-- page content -->
<div id="contents">
<h1><img src="img/common/img_head.gif" width="100%"/></h1>
	<ul id="main_menu">
		<li class="mainMenu">メニュー1</li>
		<li class="mainMenu">メニュー2</li>
		<li class="mainMenu">メニュー3</li>
		<li class="mainMenu">メニュー4</li>
		<li class="mainMenu">メニュー5</li>
		<li class="mainMenu">メニュー6</li>
		<li class="mainMenu">メニュー7</li>
		<li class="mainMenu">メニュー8</li>
		<li class="mainMenu">メニュー9</li>
		<li class="mainMenu">メニュー10</li>
	</ul>
</div>
</body>
</html>

【common.css】

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {
	width: 980px;
	margin: auto;
}
ul#main_menu {
	display: block;
	width: 100%;
	height: 50px;
}
ul#main_menu li.mainMenu{
	display: block;
	float: left;
	color: #FFFFFF;
	width: 10%;
	height: 50px;
	line-height: 50px;
	background: #000000;
	text-align: center;
}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 20%;
		height: 50px;
		line-height: 50px;
		background: #0000FF;
	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 50%;
		height: 50px;
		line-height: 50px;
		background: #FF0000;
	}
}

【実行結果】

メディアクエリ

ウィンドウの横幅を縮めると、ウィンドウの横幅に応じてそれぞれ指定したスタイルが適応される。

【HTML/CSS】CSS3でグラデーションと背景画像を同時に使う

CSS3では1つの要素に対して、複数の背景を指定することができます。

#box{
background-image: url(img/imege1.png), url(img/imege2.png), url(img/imege3.png), url(img/imege4.png);
}

とすれば複数の背景画像をPhotoshopのレイヤーのように重ねて使うことができます。

CSS3から新たにグラデーションも指定できるようになりましたが、グラデーションと背景画像を別々に指定するとうまく表示されません。

#box{
background-image: url(img/imege1.gif), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
background-image: url(img/imege1.gif), -moz-linear-gradient(top, #000000, #ffffff);
}

という風にグラデーションを一つのレイヤーと考え、背景画像のプロパティ”background-image”の中で指定する事で、グラデーションと背景画像を同時に使う事ができます。