読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

スマートフォン対応デモサイト【3】フラワーショップ

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_5のサンプルサイトをカスタマイズしてみました。

プレビュー


↓別ウィンドウを開いて見る
スマートフォン対応デモサイト【3】フラワーショップ


QRコード

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

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

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スマートフォン対応デモサイト【3】フラワーショップ</title>
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/iphone.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jCarousel.mobile.min.js"></script>
</head>
<body>
<header class="global-header"> <img src="http://jsrun.it/assets/m/v/2/U/mv2Uu.jpg" alt="" class="logo">
<p class="introduction">Flower SHOPは<br>
フラワーアレンジ<br>
専門店です。</p>
<div class="header-bar">
<h1>フラワーアレンジの専門店|Flower SHOP</h1>
</div>
</header>
<nav class="news">
<ul class="anim-ticker">
<li><a href="#">キャンペーンのお知らせ1</a></li>
<li><a href="#">キャンペーンのお知らせ2</a></li>
<li><a href="#">キャンペーンのお知らせ3</a></li>
</ul>
</nav>
<section class="recommend block">
<h2 class="section-heading">おすすめ商品</h2>
<ul>
<li class="anim-flip-front">
<a href="#">
<dl>
<dt><img src="http://jsrun.it/assets/e/C/y/5/eCy5X.jpg" class="product-image" alt=""></dt>
<dd>商品1</dd>
<dd>○,○○○円</dd>
</dl>
</a>
</li>
<li class="anim-flip-back">
<a href="toeshoes.html">
<dl class="produc-image-recommend">
<dt><img src="http://jsrun.it/assets/o/P/G/3/oPG3P.jpg" class="product-image" alt=""></dt>
<dd>商品2</dd>
<dd>○,○○○円</dd>
</dl>
</a>
</li>
</ul>
</section>
<nav class="nav-category">
<h2 class="section-heading">商品カテゴリ</h2>
<ul>
<li class="nav-category-sub"><a href="#">カテゴリ1</a></li>
<li class="nav-category-sub"><a href="#">カテゴリ2</a></li>
<li class="nav-category-sub"><a href="#">カテゴリ3</a></li>
</ul>
</nav>
<section class="comment block">
<h2 class="section-heading">ショップコンセプト</h2>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</section>
<div class="jCarousel">
<ul>
<li><img src="http://webgaku.hotcom-web.com/images/0819-4.jpg" alt=""></li>
<li><img src="http://webgaku.hotcom-web.com/images/0819-5.jpg" alt=""></li>
<li><img src="http://webgaku.hotcom-web.com/images/0819-6.jpg" alt=""></li>
</ul>
</div>
<dl class="product-info">
<dt>商品の値段</dt>
<dd>○,○○○円 (税込・送料別)</dd>
<dt>サイズ</dt>
<dd>幅○○cm × 高さ○○cm × 奥行○○cm</dd>
</dl>
<p class="order"> <a href="#" class="button">注文する</a> </p>

<footer class="global-footer">
<nav class="nav-about">
<ul>
<li><a href="#">よくある質問</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">特定商取引法</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
</nav>
<p class="copyright"><small>Copyright&copy;2012 vinton</small></p>
</footer>
</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 {
    color: #333;
    background-color: #eee;
    font-family: 
        "ヒラギノ角ゴ Pro W3",
	    "Hiragino Kaku Gothic Pro", 
	    "メイリオ", 
	    Meiryo, 
	    Osaka, 
	    "MS Pゴシック", 
	    "MS PGothic", 
	    sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a {
    color: #4070FF;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(170,119,0,0.5);
}

a img {
    border: 6px solid #fff;
}

p {
    margin-bottom: 1em;
}

em {
    font-style: normal;
}

b {
    color: #333;
}

.global-header {
    background: url(http://jsrun.it/assets/i/i/D/F/iiDFT.jpg) no-repeat right top;
    -webkit-text-shadow:1px 1px 3px #333;
    -moz-text-shadow:1px 1px 3px #333;
    -o-text-shadow:1px 1px 3px #333;
    -ms-text-shadow:1px 1px 3px #333;
    text-shadow:1px 1px 3px #333;
}

.logo {
    border: none;
}

.introduction {
    margin-bottom: 0;
    padding: 10px 22px;
    width: 140px;
    font-size: 12px;
}

.header-bar {
    margin-bottom: 15px;
    padding: 5px 10px;
    border-top: 1px solid #f60;
    color: #fff;
    background-color: #f60;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffd700),to(#f60));
    text-align: center;
}

.section-heading {
    margin-bottom:8px;
    color: #333;
    font-size: 14px;
    text-align: center;
    text-shadow: 0 0 2px #fff;
}

.section-subheading {
    margin: 0 10px 8px 10px;
    font-size: 12px;
    text-align: center;
}

.block {
    margin-bottom: 15px;
    padding: 0 10px;
}

.comment {
    font-size: 13px;
}

.product-image {
    margin-bottom: 6px;
    width: 145px;
    height: 180px;
    background-color: #111;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

/* news */
.news {
    margin-bottom: 15px;
    padding: 0 5px;
    height: 16px;
    overflow: hidden;
    font-size: 13px;
    text-align: center;
}

.news li {
    height: 16px;
    line-height: 16px;
}

.news a {
    padding: 3px;
}

@-webkit-keyframes ticker {
/* 1行目 */
    0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0);}
    10% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
    20% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
    32% {opacity: 0; -webkit-transform: translateY(0); transform: translateY(0);}

/* 2行目 */
    33% {opacity: 0; -webkit-transform: translateY(-16px); transform: translateY(0);}
    43% {opacity: 1; -webkit-transform: translateY(-16px); transform: translateY(0);}
    53% {opacity: 1; -webkit-transform: translateY(-16px); transform: translateY(0);}
    65% {opacity: 0; -webkit-transform: translateY(-16px); transform: translateY(0);}

/* 3行目 */
    66% {opacity: 0; -webkit-transform: translateY(-32px); transform: translateY(-32px);}
    76% {opacity: 1; -webkit-transform: translateY(-32px); transform: translateY(-32px);}
    86% {opacity: 1;-webkit-transform: translateY(-32px); transform: translateY(-32px);}
    100% {opacity: 0; -webkit-transform: translateY(-32px); transform: translateY(-32px);}
}

.anim-ticker {
    -webkit-animation: ticker 10s infinite;
}

/* recommend */

.recommend {
    position: relative;
    height: 260px;
    -webkit-perspective: 320px;
}

.recommend li {
    margin-left: -100px;
    width: 200px;
    position: absolute;
    left: 50%;
    text-align: center;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.recommend a {
    display: block;
    font-size: 12px;
}

@-webkit-keyframes flipFront {
    0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
    45% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
    55% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
    100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
}

@-webkit-keyframes flipBack {
    0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
    45% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
    55% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
    100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
}

.anim-flip-front {
    -webkit-animation: flipFront 5s infinite alternate;
}

.anim-flip-back {
    -webkit-animation: flipBack 5s infinite alternate;
}

.nav-category {
    margin-bottom: 15px;
}

.nav-category li {
    margin-bottom: 1px;
    height: 44px;
    line-height: 44px;
    color: #333;
    font-size: 18px;
    text-shadow: 0 0 2px #FFF;
}

.nav-category a {
    padding: 0 10px;
    display: block;
    color: #333;
    font-weight: bold;
}

.nav-category-sub {
    background-color: #f60;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffd700),to(#f60));
}
.nav-category-sub:hover {
    background-color: #FFF82A;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fefcea),to(#f1da36));
}

/* jCarousel */

.jCarousel {
    margin-bottom: 15px;
    text-align: center;
    -webkit-transition: margin 0.5s ease-in-out; 
}

.product-info {
    margin-bottom: 15px;
}

.product-info dt {
    margin: 0 10px;
    padding: 6px;
    display: inline;
    float: left;
    color: #FFF;
    background-color: #333;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.product-info dd {
    margin-bottom: 6px;
    padding: 6px;
}

.button {
    margin: 0 auto;
    border: 1px solid #ffcc00;
    display: block;
    width: 150px;
    height: 28px;
    line-height: 28px;
    color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffcc00), to(#ff9900));
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    text-shadow: 0 1px 1px #191919;
    -webkit-animation: shining 2s infinite;
}

@-webkit-keyframes shining {
    0% { -webkit-box-shadow: 0 0 1px #FFD700; box-shadow: 0 0 1px #FFD700; }
    50% { -webkit-box-shadow: 0 0 20px #FFD700; box-shadow: 0 0 20px #FFD700;}
    100% { -webkit-box-shadow: 0 0 1px #FFD700; box-shadow: 0 0 1px #FFD700;}
}

.global-footer {
    padding: 10px 10px;
    background-color: #75c4a3;
    font-size: 12px;
    text-align: center;
}

.nav-about li {
    padding-right: 3px;
    border-right: 1px solid #FFFFFF;
    display: inline;
    line-height: 2.4;
    white-space: nowrap;
}

.nav-about li:last-child {
    padding-right: 0;
    border-right: none;
}

.nav-about a {
    padding: 6px 3px;
    color: #fff;
}

.copyright {
    margin-bottom: 0;
}
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