88回目授業内容　テキスト-魅せるiPhoneサイト - 四十路男TokiyoのWeb人生再スタートDiary

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

テキスト-魅せるiPhoneサイト

基本的なiPhoneページの作成
- 制作時間：2時間

<!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="img/home.png">
<link href="http://fonts.googleapis.com/css?family=Righteous" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<!--<link rel="stylesheet" href="css/ style-m.css" media="only screen and (min-width:600px) and (max-width:979px)">
<link rel="stylesheet" href="css/style.css" media="only screen and (min-width:980px)">-->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">
</script>
<style>
article section figure {  float: right;  margin: 0 0 15px 15px;}
</style>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,  hgroup, menu, nav, section {
display: block;
}
</style>
</head>
<body>

<header class="global-header">
<a href="./"><img src="img/logo.png"  width="320" height="79" alt="コウベデュカ" class="logo"></a>
</nav>
<h1 class="page-heading">KOBE DUKKAHへようこそ</h1>
</header>
<div class="block">
 <img src="img/img_dining.jpg" class="image-right" alt="" />
 <p>スパイスの街としても有名な神戸から新しいミックススパイスを提案します。</p>
 <p>"中東地域エジプトが発祥のDUKKAH （デュカ） - 西洋七味-"</p>
 <p>ゴマ・カシューナッツ・クミン・コリアンダー・黒胡椒・パプリカ・・・etc・・・</p>
 <p>栄養価にも優れたナッツ・香辛料が沢山入った、健康にも良い調味料です。</p>
 <p>欧米では広く親しまれているデュカをオリジナルブレンドでご提供します。</p>
</div>
<section class="block">
  <h1 class="block-heading">Dukkah（デュカ）</h1>
  <p>中東地域・エジプト発祥とされる、Dukkah（デュカ）は、ナッツ（ヘーゼルナッツ等）と香辛料をブレンド した食品です。</p>
  <p>主に前菜やサイドメニューとして、パンや新鮮な野菜を付けるディップとして使われていました。 </p>
  <p>単語はアラビア語"duqqa"（英語"to pound"）に由来し、香辛料・ナッツを"搗いて混ぜる（混ぜ合わ せる）"ことからきているとされています。</p>
  <p>言わずとしれた健康食材のゴマ・意外にミネラル豊富なナッツ・風味の豊かなスパイス（もちろん漢方に用いられることから体に良い）をミックスした、手軽で美味しく体に良い食品です。</p>
  <p>しかし、どんなに体に良いものであっても大量摂取することは良くありません。</p>
  <p>デュカはナッツ＆スパイスをブレンドすることで、毎日手軽に・美味しく・バランスの良い栄養を摂取して頂くことができます。</p>
</section>

<section class="block">
<h1 class="block-heading">Spice（スパイス）</h1>
<figure class="image-left">
<img src="img/img_spice.jpg"  width="100" height="100" alt="クミンの写真">
<figcaption>クミン</figcaption>
</figure>
<p>近年、塩分の過剰摂取による高血圧・動脈硬化・狭心症・心筋梗塞・腎臓病・脳出血が危惧されています。</p>
<p>最近は塩が胃の粘膜に作用し、胃がんの発症率を高めることが明らかになっています。</p>
<p>しかし、いざ減塩するとなると、料理に味気なさを感じたり・食がすすまないといったこともあると思います。</p>
<p>そこで、減塩しつつ、より一層料理を美味しくするものとして脚光を浴びているのが、香辛料です。</p>
<p>少量加えることで風味が増し、様々な栄養が含まれ、古くから薬としても用いられています。</p>
<div class="nav-reference"><a href="sample_spice.html">デュカに含まれる主なスパイスはこちら</a></div>
</section>
<section class="block">
  <h1 class="block-heading">Nut（ナッツ）</h1>
  <figure class="image-left">
    <img src="img/img_nuts.jpg" />
    <figcaption>カシューナッツ</figcaption>
  </figure>
  <p>近年、カルシウムやリン・鉄などの"ミネラル"を含む食品が注目を集めるようになりました。</p>
  <p>この三つのほか、マグネシウム・マンガン・カリウム・銅・亜鉛など、日常生活において金属製品・電池などから認識するような成分までいろいろあり、健康の上で重要な役割を果たしています。</p>
  <p>この貴重な"ミネラル"は、カルシウムなら牛乳・小魚といった感じで、それを含む食品を摂ることにより補っていくのですが、実はナッツ類には、このミネラルが豊富に含まれているのです。</p>
  <p>言うなれば、"ミネラルの宝庫"です。</p>
  <div class="nav-reference"><a href="nut.html">デュカに含まれる主なナッツはこちら</a></div>
</section>

<footer class="global-footer">
<p><small class="copyright">Copyright&copy;2010 KOBE DUKKAH</small></p>
</footer>

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

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

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,header,figure,footer,section,article,aside {
	  margin: 0;
	  padding: 0;
		line-height: 1.0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		-webkit-font-smoothing: antialiased;
	font-family:
		"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"Hiragino Kaku Gothic Pro W3",
		"メイリオ",
		Meiryo,
		Osaka,
		"ＭＳ Ｐゴシック",
		"MS PGothic",
		sans-serif;
}
table {
	border-collapse: separate;
	border-spacing: 0;
	empty-cells: show;
}
ul, ol {
	list-style-type: none;/* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
a img, iframe {border: none;}
img, input {
	vertical-align: bottom;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {margin: inherit;}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left: 2em; }
/* clearfix */
/* HTML5 */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
/* body */
body {
	font-size: 1.0;
	text-align: left;
	line-height: 1.0;
	-webkit-text-size-adjust: none;
}
/* link */
a {
	color: #017acd;
}

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

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

a {
	color: #333;
}

.logo {
	margin: 0 auto;
	display: block;
}

.nav-topicpath {
	padding: 3px 10px;
	background-color: #fa400f;
	font-size: 12px;
}
	
.nav-topicpath ul:after {
	content: "";
	display: block;
	clear: both;
}

.nav-topicpath li {
	float: left;
}

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

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

.page-heading {
	padding: 12px;
	color: #fa400f;
	background-image:url(../img/bg_header.png);
	background-repeat: repeat-x;
	background-position: left top;
	font-size: 18px;
	text-align: center;
}

.block {
	margin: auto 10px 12px 10px;
	padding-bottom: 12px;
	border-bottom: 1px dotted #fa400f;
}

.block:after {
	content: '';
	display: block;
	clear: both;
}

.block-heading {
	margin-bottom: 6px;
	color: #000;
	font-size: 16px;
}

.block p {
	margin-bottom: 1em;
}

.block p:last-of-type {
	margin-bottom: 0;
}

.image-right, .image-left {
	width: 100px;
	font-size: 12px;
	text-align: center;
}

.image-right {
	margin: 0 0 6px 6px;
	float: right;
}

.image-left {
	margin: 0 6px 6px;
	float: left;
}

.image-center {
	margin: 0 auto 6px auto;
	display: block;
}
.nav-reference {
	margin: 10px;
	text-align: right;
}
.nav-reference a {
	padding: 3px 14px 3px 0;
	background-image: url(../img/ico_next.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.block .nav-reference {
	margin: 10px 0;
}

.nav-home {
	margin: auto 10px 12px;
	text-align: right;
}

.nav-home a {
	padding: 3px 0 3px 18px;
	background-image: url(../img/ico_home.png);
	background-repeat: no-repeat;
	background-position: left center;
}
.global-footer {
	padding: 12px 10px 6px;
	background-color: #fa400f;
	background-image: url(../img/bg_footer.png);
	background-repeat: repeat-x;
	background-position: left top;
	font-size: 12px;
	text-align: center;
}

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。