iPhoneサイト2

授業

iPhoneサイト2


URL: http://puisto.moo.jp/iphone/02/

index.html
<!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">
<h1 class="page-heading">エモトカホリ</h1>
</header>
<img src="img/logo.png" class="img-illust">
<p class="introduction">
エモトカホリのポートフォリオサイトです<br>
動物や植物を中心にしたイラストを書いています。
</p>
<section class="block">
<h1 class="block-heading">イラスト集</h1>
<p class="comment">
エモトカホリの作品集です。絵をクリックするとイラストのページに移動します。
</p>
<nav class="nav-portfolio">
<ul>
<li><a href="flying-penguin.html" title="ペンギン"><img src="img/thumbnail_flying-penguin.png" alt="群れをなして空を飛ぶペンギンたちのイラスト"></a></li>
<li><a href="love-bluebird.html" title="コトリ"><img src="img/thumbnail_love-bluebird.png" alt="恋する二人を見守るコトリがハート型に赤い糸を咥えているイラスト"></a></li>
<li><a href="dreaming-elephant.html" title="ゾウ"><img src="img/thumbnail_dreaming-elephant.png" alt="クジャクの上に乗って空を飛ぶことを夢見るゾウのイラスト"></a></li>
<li><a href="star-bear.html" title="クマ"><img src="img/thumbnail_star-bear.png" alt="星を虫取りアミでたくさん捕まえているクマのイラスト"></a></li>
<li><a href="present-dog.html" title="イヌ"><img src="img/thumbnail_present-dog.png" alt="プレゼントの箱を体につけたイヌのイラスト"></a></li>
<li><a href="flying-cat.html" title="ネコ"><img src="img/thumbnail_flying-cat.png" alt="色とりどりの風船を持って空を飛ぶネコのイラスト"></a></li>
<li><a href="rabbit.html" title="ウサギ"><img src="img/thumbnail_rabbit.png" alt="花に恋するウサギ"></a></li>
<li><a href="tortoise.html" title="カメ"><img src="img/thumbnail_tortoise.png" alt="森で長生きしているカメ"></a></li>	
</ul>
</nav>
<p class="comment">
こちらで紹介している以外の作品もありますので、ご覧になりたい方は<a href="mailto:mail@exsample.com?subject=【エモトカホリの他の作品について】">メールでお問い合わせください。</a>
</p>
</section>
<footer class="global-footer">
<nav class="nav-about">
<ul>
<li><a href="emotokahori.html">エモトカホリの紹介</a></li>
<li><a href="sales.html">イラストの販売について</a></li>
<li><a href="contact.html">仕事のご依頼・お問い合わせ</a></li>
</ul>
</nav>
<p class="copyright"><small>Copyright&copy;21012 Emoto Kahori</small></p>
<script src="js/iphone.js"></script>
</body>
</html>
flying-penguin.html
<!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">
<h1 class="page-heading">空飛ぶペンギン</h1>
<nav class="nav-page">
<p class="nav-page-left">
<a href="index.html">ホーム</a>
</p>
</header>

<section class="block">
<img src="img/flying-penguin.png" width="300" height="200" class="img-illust">
<h1 class="block-heading">空飛ぶペンギン</h1>
<p class="comment">
空飛ぶペンギンの群れです。
</p>
</section>

<section class="block">
<h1 class="block-heading">他のイラスト</h1>
<nav class="nav-portfolio">
<ul>
<li><a href="love-bluebird.html" title="コトリ"><img src="img/thumbnail_love-bluebird.png" alt="恋する二人を見守るコトリがハート型に赤い糸を咥えているイラスト"></a></li>
<li><a href="dreaming-elephant.html" title="ゾウ"><img src="img/thumbnail_dreaming-elephant.png" alt="クジャクの上に乗って空を飛ぶことを夢見るゾウのイラスト"></a></li>
<li><a href="star-bear.html" title="クマ"><img src="img/thumbnail_star-bear.png" alt="星を虫取りアミでたくさん捕まえているクマのイラスト"></a></li>
<li><a href="present-dog.html" title="イヌ"><img src="img/thumbnail_present-dog.png" alt="プレゼントの箱を体につけたイヌのイラスト"></a></li>
<li><a href="flying-cat.html" title="ネコ"><img src="img/thumbnail_flying-cat.png" alt="色とりどりの風船を持って空を飛ぶネコのイラスト"></a></li>
<li><a href="rabbit.html" title="ウサギ"><img src="img/thumbnail_rabbit.png" alt="花に恋するウサギ"></a></li>
<li><a href="tortoise.html" title="カメ"><img src="img/thumbnail_tortoise.png" alt="森で長生きしているカメ"></a></li>	
</ul>
</nav>
</section>

<footer class="global-footer">
<nav class="nav-about">
<ul>
<li><a href="emotokahori.html">エモトカホリの紹介</a></li>
<li><a href="sales.html">イラストの販売について</a></li>
<li><a href="contact.html">仕事のご依頼・お問い合わせ</a></li>
</ul>
</nav>
<p class="copyright"><small>Copyright&copy;21012 Emoto Kahori</small></p>
<script src="js/iphone.js"></script>
</body>
</html>
iphone.css
@charset "UTF-8";
/*=====================================
*ブラウザのデフォルトスタイルをリセット
=================================*/

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt,
dd, p, header, hgroup, section, article, aside, 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-type: none;
}

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

/*=============================
*サイト全体の基本スタイル
==============================*/

body {
	background-color: #D9F5F3;
	font-family: Helvetica;
	font-size: 14px;
	line-height: 1.6;
}

a {
	color: #336699;
}

.global-header {
	border-bottom: 1px solid #fff;
	height: 44px;
	line-height: 44px;
	background-color: #75D9D0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#D9F5F3), to(#75D9d0));
}

.page-heading {
	margin: 0 auto;
	width: 140px;
	overflow: hidden;
	color: #fff;
	color: #333;
	font-size: 16px;
	text-align: center;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 1px #fff;
}

.nav-page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.nav-page-left {
	position: absolute;
	top: 0;
	left: 10px;
}

.nav-page a {
	padding: 6px 12px;
	border: 1px solid #75D9D0;
	background-color: #D9F5F3;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#D9F5F3), color-stop(45%, #C8E4E2), color-stop(55%, #86E0E1), to(#75D9D0));
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px #D9F5F3;
	text-decoration: none;
}

.introduction {
	margin: 15px 10px;
	padding: 5px 10px;
	background-color: #75D9D0;
	font-size: 12px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
}

.block {
	padding-bottom: 20px;
}

.block-heading {
	margin: 10px;
	padding: 5px;
	border-left: 5px solid #75D9D0;
	font-size: 14px;
}

.comment {
	margin: 0 10px;
	font-size: 12px;
}

.comment p {
	margin-top: 0;
}

.nav-portfolio {
	margin-top: 10px;
}

.nav-portfolio img {
	margin-bottom: 6px;
	width: 60px;
	height: 60px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 0 0 3px #333;
	box-shadow: 0 0 3px #333;
}

.nav-portfolio li {
	margin: 0 0 10px 16px;
	float: left;
	text-align: center;
}

.nav-portfolio ul:after {
	content: '';
	display: block;
	clear: both;
}

.nav-portfolio a {
	display: block;
	text-decoration: none;
}

.nav-portfolio a:after {
	display: block;
	content: attr(title);
	font-size: 12px;
	width: 60px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.img-illust {
	margin: 0 auto;
	display: block;
	border: 10px solid #F5F5F0;
}

.nav-about {
	margin: 10px;
}

.nav-about ul {
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 3px #333;
	box-shadow: 0 0 3px #333;
}

.nav-about li {
	border-top: 1px solid #D9F5F3;
	border-bottom: 1px solid #75D9D0;
	height: 44px;
	line-height: 44px;
	background-color: #fff;
}

.nav-about li:first-child {
	-webkit-border-top-right-radius: 8px;
	-webkit-botder-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

.nav-about li:last-child {
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.nav-about a {
	padding: 0 14px;
	display: block;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.global-footer {
	padding: 10px 0;
	background-color: #75D9D0;
}

.copyright {
	margin: 0;
	color: #fff;
	text-align: center;
}
iphone.js
//検索バーを隠す
window.addEventListener('load',
   function() {
		 setTimeout(function() {
			 scrollTo(0,1);
		 },100);
	 },
	 false);
	 
	 $(function() {
		 $('#flickable1').flickable();
	 });