iPhoneサイト1

授業

iPhoneサイト1


URL: http://puisto.moo.jp/iphone/01/index.html

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="img/home.png">
<link rel="stylesheet" href="css/iphone.css" media="screen">
</head>
<body>
  <header class="global-header">
  <a href="/"><img src="img/logo.png" alt="コウベデュカ" class="logo"></a>
  <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" alt="クミンの写真">
  <figcaption>クミン</figcaption>
  </figure>
  <p>近年、塩分の過剰摂取による高血圧・動脈硬化・狭心症・心筋梗塞・腎臓病・脳出血が危惧されています。</p>
  <p>最近は塩が胃の粘膜に作用し、胃がんの発症率を高めることが明らかになっています。</p>
  <p>しかし、いざ減塩するとなると、料理に味気なさを感じたり・食がすすまないといったこともあると思います。</p>
  <p>そこで、減塩しつつ、より一層料理を美味しくするものとして脚光を浴びているのが、香辛料です。</p>
  <p>少量加えることで風味が増し、様々な栄養が含まれ、古くから薬としても用いられています。</p>
  <div class="nav-reference"><a href="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="nuts.html">デュカに含まれる主なナッツはこちら</a></div>
  </section>
  <footer class="global-footer">
  <p><small class="copyright">Copyright&copy; 2012 KOBE DUKKAH</small></p>
  </footer>
  <script src="js/iphone.js"></script>
  
</body>
</html>
nuts.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="img/home.png">
<link rel="stylesheet" href="css/iphone.css" media="screen">
</head>
<body>
<header class="global-header">
<img src="img/logo.png" alt="コウベデュカ" class="logo">
  <nav class="nav-topicpath">
  <ul>
  <li><a href="index.html" title="ホーム">コウベデュカ</a></li>
  <li>ナッツ</li>
  </ul>
  </nav>
  <h1 class="page-heading">デュカに含まれる主なナッツ</h1>
  </header>
  <section class="block">
  <h1 class="block-heading">Cashew Nut(カシューナッツ)</h1>
  <img src="img/img_cashew.jpg" class="image-center" title="A Cashew Nut(カシューナッツ)">
  <p>貧血や月経不順・味覚の働きを保つのを改善したりする働きがあると言われおり、便秘の改善・疲労回復・胃潰瘍や動脈硬化の予防にも効果があるとされています。</p>
  <p>含有される成分にはオレイン酸やビタミンB1、鉄、亜鉛などがあります。</p>
  <p>オレイン酸はいわゆる不飽和脂肪酸の一つであり、動脈硬化の予防に効果があるとされており、これはコレステロール低下作用があると考えられているためで、他にも便秘や胃潰瘍に対しても役立つと言われています。ビタミンB1には疲労回復、鉄分は貧血を防ぐ、亜鉛は味覚に関与し・成長にも影響を及ぼすとされています。</p>
   </section>
   <section class="block">
   <h1 class="block-heading">Almond(アーモンド)</h1>
   <img src="img/img_almond.jpg" class="image-center" title="Almond(アーモンド)の写真">
   <p>含有される成分にはリノール酸・オレイン酸・ビタミンE/B1/B2・カルシウム・鉄分などがあり、特に、通称"若返りのビタミン"体細胞の老化促進を抑制する効能があるビタミンEが豊富に含まれており、含有されるビタミンE量はナッツの中でもトップクラスと言われています。</p>
   <p>ビタミンEには活性酸素の悪さを阻害する作用があり、動脈硬化をはじめとする様々な生活習慣病の予防に効果があるとされています。</p>
   <p>ビタミンB1やB2は体力を強めたり、疲労回復や集中力を向上させる働きがあり、カルシウムは骨粗鬆症の予防・イライラ感解消効果、鉄分は貧血の予防に役立つとされています。</p>
   <p>リノール酸はコレステロールを減少させ、動脈硬化の予防に有用とされます。</p>
   <p>オレイン酸はいわゆる善玉と呼ばれているHDLコレステロールを増加させる一方で、悪玉されるLDLコレステロールを減少させる作用があります。</p>
   <p>さらに、食物繊維が12%程度含まれており（ごぼうよりも多い）、便秘解消に効果があります。アルツハイマーや物忘れに効くとも言われています。</p>
   </section>
   <section class="block">
   <h1 class="block-heading">Pistachio(ピスタチオ)</h1>
   <img src="img/img_pistachio.jpg" class="image-center" title="Pistachio(ピスタチオ)の写真">
   <p>疲労を回復させたり、貧血や便秘の改善に役立つと言われています。</p>
   <p>また細胞の老化を防ぐ・骨を強くする・高血圧・動脈硬化の予防にも効果があるとされています。</p>
   <p>含有される成分には、リノール酸やオレイン酸をはじめ、カリウム・鉄・ビタミンB1/E/Kなどがあります。</p>
   <p>カリウムは、体内の余分なナトリウムを体外へ排泄するのを促進させる働きがあると考えられており、高血圧の予防に効果があるとされています。</p>
   <p>ビタミンB1は糖質のエネルギー転換に欠かせない成分であり、疲労の回復に役立つとされます。</p>
   <p>ビタミンKは血液凝固（止血）・骨へのカルシウムの定着に効果があります。</p>
   </section>
   <section class="block">
   <h1 class="block-heading">Hazel Nut(ヘーゼルナッツ)</h1>
   <img src="img/img_hazel.jpg" class="image-center" title="Hazel Nut(ヘーゼルナッツ)の写真">
   <p>カリウム・カルシウム・鉄・ビタミンE/B1/B2など多くのミネラルを含有しています。</p>
   <p>心疾患、高脂血症、糖尿病などの生活習慣病への効果が確認されています。</p>
   <p>総コレステロールと血圧を下げる一価不飽和脂肪酸（オレイン酸）や、血行を促進・老化を防ぐビタミンEが豊富に含まれています。</p>
   <p>からだの酸化を防ぎ、血行促進・健康な肌作り・便秘解消・骨粗鬆症予防などにおいても有効に働き、ヘーゼルナッツによる体重の増加はないことも実験により立証されています。</p>
   <p>トルコをはじめ多くの国々で、"健康のために毎日ヘーゼルナッツを"と言われています。 </p>
   </section>
   
   <nav class="nav-reference">
   <a href="spice.html">デュカに含まれる主なスパイスはこちら</a>
   </nav>
   <p class="nav-home"><a href="index.html">ホームに戻る</a></p>
   <footer class="global-footer">
   <p><small class="copyright">Copyright&copy; 2012 KOBE DUKKAH</small></p>
   </footer>

  <script src="js/iphone.js"></script>
  
</body>
</html>
spice.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="img/home.png">
<link rel="stylesheet" href="css/iphone.css" media="screen">
</head>
<body>
<header class="global-header">
<img src="img/logo.png" alt="コウベデュカ" class="logo">
  <nav class="nav-topicpath">
  <ul>
  <li><a href="index.html" title="ホーム">コウベデュカ</a></li>
  <li>スパイス</li>
  </ul>
  </nav>
  <h1 class="page-heading">デュカに含まれる主なナッツ</h1>
  </header>
  
  <section class="block">
  <h1 class="block-heading">Sesame(セサミ)</h1>
  <img src="img/img_sesame.jpg" class="image-center" title="Sesame(セサミ)の写真">
  <p>世界各国・日本でも古くから愛される、言わずと知れた健康食材。</p>
  <p>古くから漢方薬としても用いられ、カルシウム・マグネシウム・鉄・リン・亜鉛等のミネラルが多く含まれ、骨粗しょう症の予防や貧血の改善に効果があります。また、たんぱく質・食物繊維・ナイアシン・ビタミンA/B1/B2/B6/E、更には葉酸が豊富に含まれています。</p>
  <p>活性酸素が体内で生成されるのを抑え、肝臓機能を強化し細胞の老化やガン化を抑制する作用があるとも言われています。</p>
  <p>脂質はオレイン酸・リノール酸が80%を占め・たんぱく質も豊富に含み、コレステロール抑制にも効果があるとされています。</p>
   </section>
    
  <section class="block">
  <h1 class="block-heading">Cumin(クミン)</h1>
  <img src="img/img_cumin.jpg" class="image-center" title="Cumin(クミン)の写真">
  <p>世界各地のさまざまな料理に使われるポピュラーなスパイスの一つ。</p>
  <p>クミンの香りを生かした代表的な料理には下記のような料理があります。</p>
  <ul>
  <li>北アフリカのクスクス</li>
  <li>北欧のクミン入りチーズ</li>
  <li>ドイツのキュンメル酒</li>
  <li>メキシコ料理のチリ・コン・カン</li>
  </ul>
  <p>アメリカでは、ドレッシングやケーキ・パン類にも用いられます。</p>
  <p>食欲増進と消化の促進・腹痛や胃痛の緩和などに効果があります。</p>
  <p>その他にも抗がん作用・強壮効果・関節痛の緩和・生理不順の改善に効果があります。</p>
  </section>
  <section class="block">
  <h1 class="block-heading">Black Pepper(黒胡椒)</h1>
  <img src="img/img_blackpepper.jpg" class="image-center" title="Black Pepper(黒胡椒)の写真">
  <p>料理の味を引き締め、食欲を増進させてくれる胡椒。</p>
  <p>抗酸化作用があり（ワインのポリフェノールと同様）、お肉を食べた時に生じる体を老化させる活性化酸素を消去してくれます。</p>
  <p>また辛味成分であるペペリンには抗菌作用があり、食品を長持ちさせてくれます。</p>
  <p>ペぺリンには、食欲を増進させるだけでなく、新陳代謝を活発にし血液の循環をよくすることで、食事で得たエネルギーを体内に蓄積することなくカロリーを消費する作用があります。</p>
  <p>アミンという成分には腐敗防止効果もあります。</p>
  <p>さらに、胡椒の香りには様々な成分があり、モノテリペンには脳を活性化し、記憶力・集中力に働きかける力があります。</p>
  </section>
  <section class="block">
  <h1 class="block-heading">Coriander（コリアンダー）</h1>
  <img src="img/img_coriander.jpg" class="image-center" title="Coriander（コリアンダー）の写真">
  <p>日本でもカレー粉の主要な原料の一つになっています。</p>
  <p>また、甘い芳香を活かし、油揚げ菓子・ビスケット・カステラ・クッキー・パンなど菓子類の風味づけにもよく使われ、肉の詰めもの・ソーセージ類・クリームチーズ・コテージチーズなどにも用いられます。</p>
  <p>日本料理には馴染みが薄かった為、以前は入手困難でしたが、近年のエスニックブームで需要が増加し、日本国内でも入手しやすくなりました。</p>
  <p>炎症の緩和・リラックスの効果もあるとされています。最近では、ポプリの材料にもなっています。</p>
  </section>
  <section class="block">
  <h1 class="block-heading">Turmeric（ターメリック）</h1>
  <p>カレー粉の香りの原料として欠かせない主要原料の一つ。</p>
  <p>またクルクミンの鮮やかな黄色がカレー料理の食欲を引き立てます。</p>
  <p>魚・米・牛肉・鶏肉・フライや炒めものに非常によく合います。</p>
  <p>ソース・マスタード・バター・チーズ・シチュー・スープ・ドレッシング・ピクルスなど幅広い料理に用いられています。</p>
  <p>日本のたくあんにも使われています。</p>
  <p>尚、クルクミンには、利胆（胆汁の分泌を促進）、健胃などの薬効があります。</p>
  <p>肝機能を増進するといわれ、二日酔いの防止用として錠剤やドリンク剤にも用いられています。</p>
  </section>
  <section class="block">
  <h1 class="block-heading">Paprika（パプリカ）</h1>
  <p>彩りが豊かで、食卓をパッと明るくしてくれるパプリカ。</p>
  <p>ハンガリー料理にパプリカは欠かせない存在で、シチュー料理グヤーシュをはじめ、数多くの料理に用いられ、かつては国をあげてパプリカを生産保護していた程でした。</p>
  <p>非常に豊富なビタミンを含み、特にビタミンCや体内でビタミンAに変わるベータカロチンが豊富です。</p>
  <p>喫煙や飲酒が多い方・季節の変わり目で体調が優れない方にも非常に有効です。</p>
  <p>成分的にはピーマンに近いですが、ビタミンPを含んでいる為、ビタミンCを壊れにくくし、その抗酸化作用の性質を高める効果をもつため、加熱調理してもビタミンCが失われにくい。</p>
  <p>大量に投入しても料理の味を損なわず、鮮やかな赤色は焦がさない限りは調理しても赤みを保ちます。</p>
  </section>
  <nav class="nav-reference">
  <a href="nuts.html">デュカに含まれる代表的なナッツはこちら</a>
  </nav>
  <p class="nav-home"><a href="index.html">ホームに戻る</a>
  <footer class="global-footer">
  <p><small class="copyright">Copyright&copy; 2012 KOBE DUKKAH</small></p>
  </footer>

  <script src="js/iphone.js"></script>
  
  </body>
  </html>
iphone.css
/*========================
*ブラウザデフォルトのスタイルをリセットくコ:彡
==========================*/

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: none;
}

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

/*==========================
*サイトの基本スタイルくコ:彡
*============================*/

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 {
	display: block;
	clear: both;
	content: '';
}

.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: #000000;
	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;
}