8/16授業(メモ)

web/授業 
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>川口の歩道橋からの写真</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">
</head>
<body>
<header class="global-header"><img src="img/logo.png" alt="" class="logo"/>
<p class="introduction">大切な舞台公演を<br/>
華やかなお花を<br/>
お届けします。</p>
<div class="header-bar">
<h1>お祝いの花のお店</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="joukei.html">
<dl>
<dt><img src="img/pic_joukei_thumbnail.jpg" class="product-image" alt="運命の王子をじっと待ち、森の湖にたたずむ、白鳥の姿のオデット姫のイメージ"></dt>
<dd>バレエ・白鳥の湖より「情景」</dd>
<dd>5,500円</dd>
</dl>
</a>
</li>
<li class="anim-flip-back">
<a href="toeshoes.html">
<dl class="produc-image-recommend">
<dt><img src="img/pic_toeshoes_thumbnail.jpg" class="product-image" alt="バレリーナへのギフトに良い、トウシューズ入りの華やかなアレンジ"></dt>
<dd>バレエ向け「トゥシューズ」</dd>
<dd>7,800円</dd>
</dl>
</a>
</li>
</ul>
</section>
<nav class="nav-category">
<h2 class="section-heading">商品カテゴリー</h2>
<ul>
<li class="nav-category-ballet"><a href="#">バレエ</a></li>
<li class="nav-category-flamenco"><a href="#">フラメンコ</a></li>
<li class="nav-category-huladance"><a href="#">フラダンス</a></li>
</ul>
</nav>
<section class="comment block">
<h2 class="section-heading">コンセプト</h2>
<p>舞台に立つ人は</p>
</section>

<footer class="global-footer">
<nav class="nav-about">
<ul>
<li><a href="#">質問</li>
<li><a href="#">#</li>
<li><a href="#">#</li>
<li><a href="#">#</li>
</ul>
</nav>
<p class="copyright"><small>Copyright&copy;2010</small></p>
</footer>
<script type="text/javascript" src="js/iphone.js">
</body>
</html>

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,h4,h5,h6,ul,ol,di,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;
}

body{
	color: #ddd;
	background-color: #191919;
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6;
}

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

a img{
	border: 1px solid #aa7700;
}

p{
	margin-bottom: 1em;
}

em{
	font-style: normal;
}

b{
	color: #fff;
}

.global-header{
	margin-bottom: 14px;
	background: url(file:///C|/Users/felica18/Desktop/0816/iphone/img/bg_header_min.jpg) no-repeat right top;
}

.logo{
	border: none;
}

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

.section-heading{
	margin-bottom: 8px;
	color: #fff;
	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: 193px;
	background-color: #111;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

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

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

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

.nav-category-ballet{
	background-image: url(../img/bg_nav_ballet.jpg);
}

.nav-category-flamenco{
	background-image: url(../img/bg_nav_flamenco.jpg);
}

.nav-category-huladance{
	background-image: url(../img/bg_nav_huladance.jpg);
}

.global-foter{
	padding: 10px 10px;
	background-color: #500000;
	font-size: 12px;
	text-align: center;
}

.nav-about li{
	padding-right: 3px;
	border-right: 1px solid #fff;
	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;
}

.nav-topicpath{
	padding: 3px 10px;
	overflow: auto;
	font-size: 12px;
}

.nav-topicpath li{
	float: left;
}

.nav-topicpath li + li:before{
	margin: 0 6px;
	content: ">";
}

.nav-topicpath li a{
	padding: 3px 0;
	color: #fff;
}

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

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

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

.new a{
	padding: 3px;
}

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

@-webkit-keyframes ticker{
	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);	
		}
	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);	
		}
	63%{
	opacity: 0;-webkit-transform: translateY(-16px);transform: translateY(0);	
		}
	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);	
}
}

.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;
}
    • js
// 検索バーを隠す
window.addEventListener('load',
	function(){
		setTimeout(function(){
			scrollTo(0,1);
		},100);
	},
false);

$(function() {
    $('#flickable1').flickable();
});

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<title>青木町公園</title>
<link rel="apple-touch-icon-precomposed" href="iphone.png">
<link rel="stylesheet" href="css/base.css">
</head>

<body>

<header id="top">
<h1><img src="images/ttl_main.jpg" width="320" height="123" alt="#"></h1>
</header>

<div id="wrap">

<section>
<h2>お越しの方へ</h2>
<p>見学、相談。<br>お気をつけてお越しください。</p>
</section>

<nav>
<ul class="clearfix">
<li><a href="#access">アクセス</li>
<li><a href="#tel">電話</li>
<li><a href="#mail">メール</li>
</ul>
</nav>

<section>
<h3 id="access">アクセス</h3>
<p>埼玉県川口市 <a href="http://goo.gl/maps/Opon"></a></p>
<aside>
<p>川口駅から歩いての方法</p>
</aside>
</section>

<section>
<h3 id="tel">電話のお問い合わせ</h3>
<p><a href="tel:00000000">00000000</a>&lt;電話&gt;<br>aaaaa</p>
<aside>
<p>営業時間<br>遅くまで</p>
</aside>
</section>

<section>
<h3 id="mail">メール</h3>
<p><a href="#">xxxx@google.co.jp</a></p>
</section>

</div>

<div id="footContent">
<p id="btn Top"><a href="#top">トップ</a></p>
<p id="switchButton"><a href="xxxxx.com">PC</a>|スマートフォン</a></p>
</div>

<footer>
<p><img src="shared/images/txt_footer.png" width="298" height="13" alt="&copy;2012."></p>
</footer>

<script type="text/javascript" src="js/smoothScroll.js"></script>
</body>
</html>