ウェブ学のすすめ

Study of Web Design & Programing

スマートフォン対応デモサイト【１】

Smartphone

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_3のサンプルサイトをトップページだけですがカスタマイズしてみました。

プレビュー


↓別ウィンドウを開いて見る
Pizza＆Pasta


↓QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格： 無料

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pizza＆Pasta</title>
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="img/home.png">
<link rel="stylesheet" href="css/iphone.css" media="screen">
</head>
<body>
<header class="global-header">
<img src="http://jsrun.it/assets/t/O/3/0/tO30W.png" alt="" class="logo">
<h1 class="page-heading">パスタとピザのお店</h1>
</header>
<div class="block">
<img src="http://jsrun.it/assets/1/6/x/B/16xBv.png" class="image-right" alt="">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
<section class="block">
<h1 class="block-heading">メニュー</h1>
<ul>
<li>サンプルメニュー</li> 
<li>サンプルメニュー</li> 
<li>サンプルメニュー</li> 
<li>サンプルメニュー</li> 
<li>サンプルメニュー</li> 
<li>サンプルメニュー</li> 
</ul>
</section>
<section class="block">
<h1 class="block-heading">Pasta（パスタ）</h1>
<figure class="image-left">
<img src="http://jsrun.it/assets/l/G/d/n/lGdn1.png">
<figcaption>エビのパスタ</figcaption>
</figure>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<div class="nav-reference"><a href="#">他のパスタメニューはこちら</a></div>
</section>
<section class="block">
<h1 class="block-heading">Pizza（ピザ）</h1>
<figure class="image-left">
<img src="http://jsrun.it/assets/r/P/7/S/rP7SJ.png">
<figcaption>バジルとトマト</figcaption>
</figure>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<div class="nav-reference"><a href="#">他のピザメニューはこちら</a></div>
</section>
<footer class="global-footer">
<p><small class="copyright">Copyright&copy;2012 Pizza＆Pasta</small></p>
</footer>
<script type="text/javascript" src="js/iphone.js"></script>
</body>
</html>
CSS
@charset "utf-8";
/* reset */

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
 margin: 0;
 padding: 0;
 font-size: 100%;
}

body {
 line-height: 1.0;
 -webkit-text-size-adjust: none;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
 display:block;
}

img {
 border: 0;
 vertical-align: bottom;
}

ul, ol {
 list-style: none;
}

table {
 border-spacing: 0;
 empty-cells: show;
}

/* style */

body {
 background-color: #F9EABF;
 font-family: Arial, san-serif;
 font-size: 14px;
 line-height: 1.6;
}

a {
 color: #333;
}

.logo {
 margin: 0 auto;
 display: block;
}

.page-heading {
 padding: 12px;
 color: #FA400F;
 background-image: url(http://jsrun.it/assets/k/x/j/X/kxjXY.png);
 background-repeat: repeat-x;
 background-position: left top;
 font-size: 18px;
 text-align: center;
}

.block {
 margin: auto 10px 12px 10px;
 padding-bottom: 12px;
 border-bottom: 1px dotted #FA400F;
}

.block img {
    border:4px solid #fff;
}

.block:after {
 content: '';
 display: block;
 clear: both;
}

.block-heading {
 margin-bottom: 6px;
 color: #000;
 font-size: 16px;
}

.block p {
 margin-bottom: 1em;
}

.block p:last-of-type {
 margin-bottom: 0;
}

.image-right, .image-left {
 width: 108px;
 font-size: 12px;
 text-align: center;
}

.image-right {
 margin: 0 0 6px 6px;
 float: right;
}

.image-left {
 margin: 0 12px 6px 6px;
 float: left;
}

.nav-reference {
 margin: 10px;
 text-align: right;
}

.nav-reference a {
 padding: 3px 14px 3px 0;
 background-image: url(http://jsrun.it/assets/5/a/b/0/5ab0k.png);
 background-repeat: no-repeat;
 background-position: right center;
}

.block .nav-reference {
 margin: 10px 0;
}

.global-footer {
 padding: 12px 10px 6px;
 background-color: #FA400F;
 background-image: url(http://jsrun.it/assets/l/2/e/w/l2ewB.png);
 background-repeat: repeat-x;
 background-position: left top;
 font-size: 12px;
 text-align: center;
}
JavaScript
window.addEventListener('load',
	function(){
		setTimeout(function(){
			scrollTo(0,1);
		},100);
	},
false);

参考


HTML5とCSS3で作る 魅せるiPhoneサイト サポートページ

HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5＋CSS3で作る 魅せるiPhoneサイト
カテゴリ: ブック
サイズ: 82.2 MB
価格： ￥1,200

univss1 univss2