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©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もやってます。
