2013-04-04

89回目授業内容　テキスト-魅せるiPhoneサイト2

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

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

ナビゲーションボタンをCSS3で丸くする
- 制作時間：1.5時間

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>エモトカホリ</title>
<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">
<!--[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">
<h1 class="page-heading">空飛ぶペンギン</h1>
<nav class="nav-page">
<p class="nav-page-left">
<a href="index.html">ホーム</a>
</p>
</nav>
</header>

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


<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;2010 Emoto Kahori</small></p>
</footer>
</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;
		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;
}
:focus {outline: 0;}}
table {
	border-collapse: separate;
	border-spacing: 0;
}
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 */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* HTML5 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
/* body */
body {
	font-size: 1.0;
	text-align: left;
}
/* link */
a {
	color: #017acd;
}
/* container */
#container {
	width: 900px;
	margin: 0auto;
}




.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(#d9f5f7), to(#75d9d0));
}
.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: 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;
	box-shadow: 0 1px #d9f5f3;
	text-decoration: none;
}



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

.nav-about {
	margin: 10px;
}
.nav-about ul {
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 3px #333333;
	box-shadow: 0 0 3px #333333;
}
.nav-about li {
	border-top: 1px solid #d9f5f3;
	border-bottom: 1px solid #75d9d0;
	height: 44px;
/*	padding: 19px 0 0 0;*/
	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-top-right-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}
.nav-about a {
	padding: 0 14px;
	display: block;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

CSSアニメーション
- 制作時間：1時間

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>CSSアニメーション</title>
<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">
<!--[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>


<nav class="news">
<ul class="anim-ticker">
<li><a href="mothers-day.html">【母の日】プレゼントオーダー承っています</a></li>
<li><a href="free-carriage.html">【送料無料】10,000円以上お買い上げで送料無料</a></li>
<li><a href="ordermade.html">【お祝い】各種イベント用のオーダー承っています</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" width="145" height="193" 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" width="145" height="193" class="product-image" alt="バレリーナへのギフトに良い、トウシューズ入りの華やかなアレンジ"></dt>
<dd>バレエ向け「トゥシューズ」</dd>
<dd>7,800円</dd>
</dl>
</a>
</li>
</ul>
</section>

<p class="order">
<a href="order.html" class="button">注文する</a>
</p>

</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;
}
:focus {outline: 0;}}
table {
	border-collapse: separate;
	border-spacing: 0;
}
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 */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* HTML5 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
/* body */
body {
	font-size: 1.0;
	text-align: left;
	background-color: #000;
}
/* link */
a {
	color: #017acd;
}


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

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

.news a {
 padding: 3px;
}
@-webkit-keyframes ticker {
/* 1行目 */
 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);}

/* 2行目 */
 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);}
 65% { opacity: 0; -webkit-transform: translateY(-16px); transform: translateY(0);}

/* 3行目 */
 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);}
}

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

.recommend {
	position: relative;
	height: 260px;
	-webkit-perspective: 320;
}
.recommend li {
	margin-left: -100px;
	position: absolute;
	left: 50%;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}
.recommend a {
	margin: 0 auto;
	display: block;
	width:200px;
	font-size: 12px;
	text-align: center;
}
@-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;
}

.button {
	margin: 0 auto;
	border: 1px solid #ffcc00;
	display: block;
	width: 150px;
	height: 28px;
	line-height: 28px;
	color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffcc00), to(#ff9900));
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	border-radius: 14px;
	-webkit-text-shadow: 0 1px 1px #191919;
	text-shadow: 0 1px 1px #191919;
	-webkit-animation: shining 2s infinite;
	animation: shining 2s infinite;
}

@-webkit-keyframes shining {
	0% { box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;}
	50% { box-shadow: 0 0 10px #fff; -webkit-box-shadow: 0 0 10px #fff;}
	100% { box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;}
}

脱線話（復活）

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

2013-04-03

88回目授業内容　テキスト-魅せるiPhoneサイト

[授業][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もやってます。

2013-04-02

87回目授業内容　レスポンシブルデザイン練習！

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

WordPresのレスポンシブルデザイン練習！

一日全てが・・・

選択したテンプレートのバグを治そうとして撃沈しました・・・。
こうなったら直接張り込みしようかなと・・・。

脱線話（復活）

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

2013-04-01

86回目授業内容　レスポンシブルデザイン練習！

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

レスポンシブルデザイン練習！

脱線話（復活）

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

2013-03-28

85回目授業内容　テキスト「スマートフォンサイトのためのHTML5 + CSS3」

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

テキスト「スマートフォンサイトのためのHTML5 + CSS3」

課題サイトの可変グリッドを実戦する

/* reset 
---------------------------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ", 
		Osaka, 
		"MS P Gothic", 
		"ＭＳ Ｐゴシック", 
		sans-serif;
}
ul, ol {
	list-style: none;
}
img {
	border: none;
	vertical-align: bottom;
	height: auto;
}
p {
	font-size: 0.875em;
	line-height: 1.3em;
}
/* font 
---------------------------------------------*/
html { font-size: 16px; }
body { font-size: 16px; }
h1 { font-size: 14px; }
h2 { font-size: 14px; }
ul, dl { font-size: 14px;}
address { font-size: 12px; }

/* layout 
---------------------------------------------*/


body {
/*	line-height: 1.0;
	-webkit-text-size-adjust: none;*/	background: url("../img/bg_all.png") repeat #fff;
	width: 100%;
}
#container {
/*	background-color: #fff;*/
	background-image:url("../img/bk_shadow.png");
	width: 100%;
}
#header {
	width: 96%;/*950px*/
	height: 70px;
	margin: 10px 10px 0 20px ;
	padding: 20px 5px 0 5px;
	position: relative;
	border-bottom: 10px solid #C7B9B2;
}
.logo {
	padding-top: 5px;
}
h1 {
	display: none;
}
h2 {
	font-size: 0.6em;
	color: #928984;
	position: absolute;
	right: 0;
	top: 30px;
}
.nav {
	position: absolute;
	right: 0;
	top: 60px;
	width: 60.8%;
}
.nav ul {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border-left: 1px solid #C7B9B2;
	overflow: auto;
}
.nav li{
	float: left;
	display: inline;
	width: 16.4%;/*100px*/
	border-right: #C7B9B2 1px solid;
}
.nav a {
	padding-top: 5px;
	font-style: normal;
	text-align: center;
	text-decoration: none;
	display: block;
	color: #928984;
	height: 15px;
	font-size: 0.875em;
	font-size: 80%;
}
.nav li a:hover {
	background-color: #C7B9B2;
	color: #fff;
}
.nav li a:visited {
 color: #928984;
}
em {
	font-style: normal;
}
#wrapper {
	margin: 0 auto;
}
#content {
	width: 75%;
	margin: 10px 0 10px 20px;
	float: left;
	display: inline;
}
#sidebar {
	float: right;
	display: inline;
	margin: 10px 0 0 0;
	width: 22%;
}
#f3a7d7e769315f2 {
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
	overflow: hidden;
	height: 780px;/*710px*/
	width: 100%;/*240px*/
}
#slideshow_box {
	width: 96%;/*960px*/
  height: 22.5%;/*225px*/
	overflow: hidden;
	text-decoration: none;
	font-style: normal;
}
#slideshow {
  max-width: 100%;/*700px*/
  height: 330px;/*330px*/
}
#slideshow2 {
  width: 100%;/*700px*/
  height: 100%;/*330px*/
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
}
#slideshow3 {
	float: left;
	display: inline;
	margin-bottom: 15px;
  width: 474px;
  height: 205px;
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
}
#slideshow4 {
	float: right;
	display: inline;
  width: 474px;
  height: 205px;
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
}
#content4 {
	width: 100%;/*703px*/
	overflow: hidden;
}
#topic {
	float: left;
	display: inline;
	margin: 15px 0 10px 0;
	padding: 10px 20px 10px 10px;
	width: 44%;/*316px*/
	height: auto;
	overflow: auto;
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
}
h3 {
	font-size: 1.4em;
	color: #928984;
	padding-left: 32px;
	line-height: 1.2em;
	margin-bottom: 10px;
	font-weight: bold;
	background-image:url(../img/icon25px.gif);
	background-repeat: no-repeat;
}
#topic dl {
	word-wrap: break-word;
}
#topic dt {
	margin: 15px 0 5px 0;
	color: #F03;
	font-weight: bold;
}
#topic dd {
	margin: 0 0 8px 7px;
	border-bottom: 2px dotted #928984;
}
#supervision {
	float: right;
	display: inline;
	margin: 15px 0 10px 0;
	padding: 10px 10px 10px 10px;
	width: 44%;/*318px*/
	height: auto;
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
}
#supervision img {
	clear: both;
	float: left;
	display: inline;
	margin: 0 10px 25px 0x;
}
.supervision_p{
	width: 100%;/*210px*/
	margin: 5px;
}
#supervision .link {
	clear: both;
	width: 99.056604%;/*315px*/
	text-align: right;
}

#school {
	clear: both;
	width: 96%;/*678px*/
	margin: 10px 0 10px 0;
	padding: 10px 10px 10px 10px;
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
}
#school p {
	margin-left: 10px;
}
#school #nav ul {
	width: auto;
	height: auto;
	margin: 10px 0 0 0;
	padding: 0;
	overflow: auto;
}
#school #nav li {
	float: left;
	display: inline;
	height: 50px;
/*	border-left: #C7B9B2 1px solid;*/
}
#school #nav a {
	text-align: center;
	text-decoration: none;
	display: block;
}
#school #nav em {
  visibility: hidden;
}
#school #nav li#dance a {
	background-image: url("../img/baby_dance.jpg" );
	width: 222px;
	height: 50px;
	background-position:0 0px;
}
#school #nav li#dance a:hover {
	background-image: url("../img/baby_dance.jpg" );
	width: 222px;
	height: 50px;
	background-position: 0 -50px;
}
#school #nav li#massage a {
	background-image: url("../img/baby_massage.jpg" );
	width: 222px;
	height: 50px;
	background-position:0 0px;
}
#school #nav li#massage a:hover {
	background-image: url("../img/baby_massage.jpg" );
	width: 222px;
	height: 50px;
	background-position: 0 -50px;
}
#school #nav li#music a {
	background-image: url("../img/baby_play.jpg" );
	width: 222px;
	height: 50px;
	background-position:0 0px;
}
#school #nav li#music a:hover {
	background-image: url("../img/baby_play.jpg" );
	width: 222px;
	height: 50px;
	background-position: 0 -50px;
}
#school #nav li#make a {
	background-image: url("../img/mamamake.jpg" );
	width: 222px;
	height: 50px;
	background-position:0 0px;
}
#school #nav li#make a:hover {
	background-image: url("../img/mamamake.jpg" );
	width: 222px;
	height: 50px;
	background-position: 0 -50px;
}
#school #nav li#flower a {
	background-image: url("../img/flowerarrenge.jpg" );
	width: 222px;
	height: 50px;
	background-position:0 0px;
}
#school #nav li#flower a:hover {
	background-image: url("../img/flowerarrenge.jpg" );
	width: 222px;
	height: 50px;
	background-position: 0 -50px;
}
#school #nav li#rinpa a {
	background-image: url("../img/selfrinpa.jpg" );
	width: 222px;
	height: 50px;
	background-position:0 0px;
}
#school #nav li#rinpa a:hover {
	background-image: url("../img/selfrinpa.jpg" );
	width: 222px;
	height: 50px;
	background-position: 0 -50px;
}
#schedule {
	width: 96%;/*678px*/
	margin: 15px 0 10px 0;
	padding: 10px 10px 10px 10px;
	border:solid 2px #C7B9B2;
	border-radius: 10px 0 10px 0 /  10px 0 10px 10px;
}
#schedule .google_schedule {
	width: 100%;/*678px*/
	border-width: 0 ;
	height: 600px;/*600px*/
	frameborder: 0;
	scrolling: no;
}
#footer {
	clear: both;
	width: 94%;/*960px*/
	height: 110px;
	margin: 0 auto;
	padding: 0 20px 10px 0;
	border-top: 10px solid #C7B9B2;
	padding-top: 5px;
	color: #928984;
	text-align: center;
}
.footer_nav {
	width: 100%;/*960px*/
	font-size: 0.875em;
	height: 50px;
}
.footer_nav ul {
	margin: 0 0 15px 0;
	overflow: auto;
	text-align: center;
}
.footer_nav li{
	float: left;
	display: inline;
	width: 14.2857143%;/*100px*/
}
.footer_nav a {
	line-height: 1.8em;
	font-style: normal;
	text-align: center;
	text-decoration: none;
	display: block;
	color: #928984;
}
.footer_nav li a:hover {
	background-color: #C7B9B2;
	color: #fff;
}
.footer_nav li a:visited {
 color: #928984;
}
address {
	margin: 0 0 15px 0;
	padding-top: 10px;
	color: 
}

脱線話（復活）

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

2013-03-27

84回目授業内容　マルチデバイス・スマートフォン対応サイト〜レスポンシブWebデザイン課題完成系

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

マルチデバイス・スマートフォン対応サイト

固定レイアウト
- Container全体を4分割する
  - PC:４組
  - タブレット：２組
  - スマートフォン：１組

クライアントとの打ち合わせ方
- ワイヤーフレームを使って打ち合わす

h1タグにindex.htmlは書かない
- 書くなら全部に記述する

imgはpcサイズだとスマートフォンに入りきらない

img{ max-width : 100%}

で横幅指定する

メディアクエリーの設定

グリッドを敷く
- 12・16・等で縦にグリッドを書く

2段組の作成

#contents {
overflow : hidden;
width : 960px} /* 960/1024 */
#contents #main,
#contents #sub {
float : left;
margin : 0 10px } /*10/960*/
#contents #main { width : 620px } /*620/960*/
#contents #sub { width : 300px } /*300/960*/

ナビゲーションパネルの調整
- スマートフォン対応幅での25％を変更する

nav ul {
width : 960px;/* 960/1024 */
margin : 0 auto}

リキッドレイアウト（可変レイアウト）「フルードグリッド」

#contents #main,
#contents #sub { 
float : left;
margin : 0 1.0416667%} /*10/960*/ 
#contents #main { width : 64.5833333%} /*620/960*/
#contents #sub { width : 31.25%} /*300/960*/

- mainとsubの幅とmarginを％表記にする。

親要素であるcontentsもフルードグリッド化

#contents {
overflow : hidden;
width : 93.75%} /*960/1024*/

ナビゲーションも指定

nav ul {
width : 93.75%; /*960/1024*/
margin : 0 auto}

footerも指定

footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto}

レスポンシブWebデザイン課題完成系

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=320,initial-scale=1.0">
<title>トップ|allWeb 豆はカラダにイイ</title>
<link href="http://fonts.googleapis.com/css?family=Righteous" rel="stylesheet" type="text/css">
<link href="css/style_l.css" rel="stylesheet" type="text/css" media="all">
<!--[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;
}
@-o-viewport {width : 320px; zoom:1.0}
</style>
</head>
<body>
<header>
<hgroup>
  <h1><a href="/"><img src="images/2-1-zu03_a-2_71x72.png" alt="ロゴ　allWebクリエイター塾"></a></h1>
  <h2>豆はカラダにイイ</h2>
</hgroup>
   <nav>
     <ul>
<li><a href="">ホーム</a></li>
<li><a href="">枝豆一覧</a></li>
<li><a href="">枝豆隊</a></li>
<li><a href="">アクセス</a></li>
     </ul>
   </nav>
  </header>
<!-- //header -->

<!--contentns-->
<div id="contents">
<div id="main">
  
<section id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<a href="">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</section>
  
<section id="reciept">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="images/2-1-zu03_b_639x426.jpg" alt="イラスト　枝豆">　<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
  
<h4>ずんだ</h4>
<img src="images/2-1-zu03_c_639x426.jpg" alt="イラスト　ずんだ"><p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section>
  
</div>
<!--//main-->
  
<!--sub-->
<div id="sub">
  
<aside>
<h4>枝豆隊隊長</h4>
<img src="images/2-1-zu03_d_639x428.jpg" alt="肖像 枝豆隊長">　<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>
  
</div>
<!--//sub-->
  
</div>
<!--//contents-->
  
  
<!-- footer -->
<footer>
<p><small>2004-2012&copy;allWebクリエイター塾</small></p>
</footer>
<!-- //footer -->
</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 {
	  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,
		verdana;
}
:focus {outline: 0;}}
table {
	border-collapse: separate;
	border-spacing: 0;
}
ul, ol {
	list-style-type: none;/* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
a img, iframe {border: none;}
img, input {
	vertical-align: bottom;
}
img{ max-width : 100%}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}

h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
h1 {font-size: 48px; line-height: 1} /* 48px */
h2 {font-size : 36px; line-height : 1.3333} /* 48px */
h3{font-size : 24px; line-height : 1} /* 24px */
hgroup h2,h4,h5,h6 {font-size : 16px; line-height : 1.5} /* 24px */

select {margin: inherit;}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left: 2em; }
/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* HTML5 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
/* body */
body {
	/*font-size: 16px;*/
	text-align: left;
	line-height : 1.5;
}
/* link */
a {
	color: #017acd;
}
/* container */
#container {
	width: 900px;
	margin: 0auto;
}
header { text-align : center;padding-top : 24px}
header h1 { margin-bottom : 24px}
header h2 { color : #62240b; font-weight: bold}

nav ul li { width : 25%; float : left}
nav ul li a { display : block; color: #d8c2a4; line-height: 1.8}
nav ul li a:hover { background-color: #900; color: #FFF;}
nav {
margin-bottom : 24px;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul { overflow : hidden}

#contents {
width : 90%;
margin : 0 auto;
text-align : center}
#contents p { 
margin-bottom : 24px;
text-align : left;
line-height: 1.5;}
#contents img { 
margin-bottom : 24px; 
box-shadow : 0 0 12px #000}

footer {
color : white;
text-align : center;
padding : 24px 0;
background-color: #060}

/*768px*/
@media screen and (min-width : 768px){
#contents { text-align : left}
}

/*1024px*/
@media screen and (min-width : 1024px) {
html {
font-family : verdana, sans-serif;
font-size : 100%;
line-height: 1.5;
background: url(../images/960_grid_12_col.png) repeat-y top center}

#contents {
overflow : hidden;
width : 93.75%} /*960/1024*/
#contents #main,
#contents #sub {
float : left;
margin : 0 1.0416667%} /*10/960*/ 
#contents #main { width : 64.5833333%} /*620/960*/
#contents #sub { width : 31.25%} /*300/960*/

nav ul {
width : 960px;/* 960/1024 */
margin : 0 auto}

footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto}

}

脱線話（復活）

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

2013-03-26

83回目授業内容　HTML5 + CSS3

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

HTML5 + CSS3

float時でのclear bothをulにかける方法

ul:after {
	content:"";
	display: block;
	clear: both;
}

マーキー

index.html

<body>
<p id="mq">4月20日まで期間限定セール実施中！</p>
</body>

style.css

#mq {
	overflow:-webkit-marquee;
}
#mq {
  background-color:#903;
  background-image:-webkit-gradient(linear, left top, right top, from(#903), to(#903),color-stop(0.4,#F00),color-stop(0.6,#F00));
  color:#FFF;
  border:inset #999 1px;
  padding:3px 0;
}

角度を変更した要素のマーキー

#mq {
  overflow:-webkit-marquee;
  -webkit-transform:rotate(45deg);
  width:50%;
  white-space:nowrap;
  position:absolute;
  top:0.5em;
  right:-2.5em;
}

無限背景

body {
  background-image:url(images/bg.jpg);
  background-repeat:repeat-x;
  -webkit-animation:bk_move 120s linear 0 infinite;
}
@-webkit-keyframes 'bk_move' {
  from {
    background-position-x:left;
  }
  to {
    background-position-x:2753px;
  }
}

脱線話（復活）

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