ウェブ学のすすめ

Study of Web Design & Programing

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

Smartphone

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

プレビュー


↓別ウィンドウを開いて見る
スマートフォン対応デモサイト【2】


↓QRコード

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

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

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スマートフォン対応デモサイト【2】</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="http://jsrun.it/assets/3/d/T/V/3dTVb.png" class="img-illust">
<p class="introduction">
このサイトはポートフォリオのデモサイトです。<br>
iPhoneなどのスマートフォンでご覧になってください。
</p>
<section class="block">
<h1 class="block-heading">イラスト集</h1>
<p class="comment">気象を表したアイコンです。</p>
<nav class="nav-portfolio">
<ul>
<li><a href="" title="晴れ"><img src="http://jsrun.it/assets/l/a/v/8/lav8e.jpg" alt=""></a></li>
<li><a href="" title="晴れ時々曇り"><img src="http://jsrun.it/assets/p/R/g/u/pRguR.jpg" alt=""></a></li>
<li><a href="" title="雨"><img src="http://jsrun.it/assets/8/M/v/T/8MvTZ.jpg" alt=""></a></li>
<li><a href="" title="雷"><img src="http://jsrun.it/assets/3/Y/3/p/3Y3pH.jpg" alt=""></a></li>
<li><a href="" title="竜巻"><img src="http://jsrun.it/assets/u/S/s/y/uSsyB.jpg" alt=""></a></li>
<li><a href="" title="雪"><img src="http://jsrun.it/assets/4/S/U/9/4SU9t.jpg" alt=""></a></li>
<li><a href="" title="満月"><img src="http://jsrun.it/assets/k/o/L/N/koLN0.jpg" alt=""></a></li>
<li><a href="" title="月と雲"><img src="http://jsrun.it/assets/z/1/d/e/z1deT.jpg" alt=""></a></li>
</ul>
</nav>
    <p class="comment">サンプルの<a href="mailto:mail@example.com?subject=サンプルタイトル">メールお問い合わせ先</a></p>
</section>
<footer class="global-footer">
<nav class="nav-about">
<ul>
<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>
<script 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: #F6F6CB;
 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:#8AA5E5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#D9F5F3), to(#8AA5E5));
}
.page-heading {
	margin:0 auto;
	width:140px;
	overflow:hidden;
	color:#333;
	font-size:16px;
	text-align:center;
	white-space:nowrap;
	text-overflow: ellipsis;
	text-shadow:1px 1px #999;
}

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

.block {
 padding-bottom: 20px;
}

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

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

.comment p {
 margin-top: 0;
}

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

.nav-portfolio img {
	margin:0 0 6px 0;
	width:60px;
	height:60px;
	-webkit-border-radius:30px;
	border-radius:30px;
	-webkit-box-shadow:2px 2px 3px #333;
	box-shadow:2px 2px 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 #eee;
}

.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 #8AA5E5;
	height:44px;
	line-height:44px;
	background-color:#fff;
}
.nav-about li:first-child {
	-webkit-border-top-right-radius:8px;
	-webkit-border-top-left-radius:8px;
	border-top-right-radius:8px;
	border-top-left-radius:8px;
}
.nav-about li:last-child {
	-webkit-border-bottom-right-radius:8px;
	-webkit-border-bottom-left-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: #8AA5E5;
}

.copyright {
 margin: 0;
 color:  #ffffff;
 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