iPhone 専用サイトを作る　html5 CSS3

最近ではiPhoneを手にサイトを閲覧される方が多くなってきました。街を歩いていても、アクセスログをみていても。

というわけでiPhoneでのユーザビリティーを追求したコーディングを習得していこうと思います。

基本的にCSS3を使えば、ほとんど画像を使用せずデザインすることができます。今回制作したサンプルはこちら。

ここで使用した画像は「Back」の背景になっている黒いボタンのみです。

しかも黒いボタンも一つの画像で横、縦ともに自由に可変させることが簡単に出来ます。

まずはソースを見てみましょう。

iPhone demo htmlのソース

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
        <style type="text/css" media="screen">@import "css/style.css";</style>
        <title>iPhone View Test</title>
    </head>
<body>
<div id="toolbar">
<h1>iPhone View Test</h1>
<a href="#" class="back">Back</a>
</div>
<ul class="list">
<li><a href="#">music</a></li>
<li><a href="#">picture</a></li>
<li><a href="#">movie</a></li>
</ul>

<div id="about">
<h2>about</h2>
<p>
iphoneでの表示テストを兼ねて簡単なHTML5とCSS3で構築するページです。
</p>
</div>

</body>
</html>

iPhone demo CSSのソース

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica;
	background: #aaa;
}
h1,h2,h3,h4 {margin:0;padding:0;font-size:1;}
#toolbar {
  -webkit-box-sizing: border-box;
	background-color: #5A7500;
	border-bottom:1px solid #222;
	background:-webkit-gradient(linear, right bottom, right top, color-stop(0.01, #4E6400), color-stop(1, #7B9F00));
	position:relative;
	height:45px;
}
#toolbar h1{
	color: #FFF;
	text-align: center;
	font:bold 20px Helvetica;
	line-height:45px;
	text-shadow:0px -1px 1px #111;

}
.back {
	position: absolute;
	left: 5px;
	top: 8px;
	-webkit-border-image:url(../img/back.png)0 6 0 12 /0 6px 0 12px;
	padding: 0 5px 0 5px;
	color: #FFF;
	font-weight:bold;
	text-decoration: none;
	font-size: 14px;
	line-height: 30px;
	text-shadow:0px -1px 1px #111;
}

.list {
	-webkit-box-shadow:0px 1px 3px #333;
	list-style: none	;
	margin: 0;
	padding:0;
	overflow: hidden;
	border-top:2px solid #333;
}
.list li{
	border-top: 1px solid #555;
	border-bottom:1px solid #111;
}
.list li a{
	display: block;
	height: 50px;
	padding: 0 0 0 10px;
	text-decoration: none;
	font:bold 22px Helvetica;
	line-height: 50px;
	color: #FFF;
	text-shadow:0px -1px 1px #111;
	background:-webkit-gradient(linear, right bottom, right top, color-stop(0.01, #494949), color-stop(1, #393939));
}
#about {
	padding:10px;
	margin:10px 5px;
	border: 1px solid #333;
	background: #FFF;
	-webkit-border-radius:10px;
}

htmlでは特別なことはしていません。下記のメタタグは必要なようですので忘れずに！

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

CSSは結構特殊になってきますね。CSS3ってすごいと思いますね。

グラデーションの指定

background:-webkit-gradient(linear, right bottom, right top, color-stop(0.01, #4E6400), color-stop(1, #7B9F00));

文字にシャドウ（影）をつける

text-shadow:0px -1px 1px #111;

ボーダーにイメージを指定する

-webkit-border-image:url(../img/back.png)0 6 0 12 /0 6px 0 12px;

ボックスに角丸を指定する

-webkit-border-radius:10px;

それぞれの使い方は、別ページで詳しく説明しようと思います。

iPhone 専用サイトを作る html5 CSS3