スマートフォン対応デモサイト【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="#">キャンペーンのお知らせ１</a></li>
<li><a href="#">キャンペーンのお知らせ２</a></li>
<li><a href="#">キャンペーンのお知らせ３</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>商品２</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="#">カテゴリ１</a></li>
<li class="nav-category-sub"><a href="#">カテゴリ２</a></li>
<li class="nav-category-sub"><a href="#">カテゴリ３</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 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対応

作者: 谷拓樹
出版社/メーカー: ラトルズ
発売日: 2010/11/24
メディア: 単行本（ソフトカバー）
購入: 28人クリック: 992回
この商品を含むブログ (26件) を見る

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

univss1 univss2

ウェブ学のすすめ

Study of Web Design & Programing

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

プレビュー

コード

HTML

CSS

JavaScript

参考